#36CABA + #E3BB7D + #C9C28C + #A7C899 + #8AC9AC · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#36CABA

Mineral Blue · MediumTurquoise · Mint Ice

HEX

#36CABA

RGB

rgb(54, 202, 186)

HSL

hsl(174, 58%, 50%)

HSB

hsb(174, 73%, 79%)

CMYK

cmyk(73%, 0%, 8%, 21%)

Oklch

oklch(76.0% 0.123 184.2)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#E3BB7D

Ginger · BurlyWood · Warm Sun

HEX

#E3BB7D

RGB

rgb(227, 187, 125)

HSL

hsl(36, 65%, 69%)

HSB

hsb(36, 45%, 89%)

CMYK

cmyk(0%, 18%, 45%, 11%)

Oklch

oklch(81.3% 0.092 77.9)

Traditional「Ginger」· Paint「Warm Sun」· Creative Honey Glow

#C9C28C

Fresh Green · Tan · Sunflower

HEX

#C9C28C

RGB

rgb(201, 194, 140)

HSL

hsl(53, 36%, 67%)

HSB

hsb(53, 30%, 79%)

CMYK

cmyk(0%, 3%, 30%, 21%)

Oklch

oklch(80.7% 0.072 101.6)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#A7C899

Celadon · DarkSeaGreen · Apple Green

HEX

#A7C899

RGB

rgb(167, 200, 153)

HSL

hsl(102, 30%, 69%)

HSB

hsb(102, 24%, 78%)

CMYK

cmyk(16%, 0%, 24%, 22%)

Oklch

oklch(79.6% 0.074 136.5)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#8AC9AC

Jade · DarkSeaGreen · Apple Green

HEX

#8AC9AC

RGB

rgb(138, 201, 172)

HSL

hsl(152, 37%, 66%)

HSB

hsb(152, 31%, 79%)

CMYK

cmyk(31%, 0%, 14%, 21%)

Oklch

oklch(78.5% 0.077 164.2)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

36CABA

C93644

Analogous

36C971

36CABA

368EC9

Triadic

36CABA

BB36C9

C9BB36

Split-Comp.

36CABA

C9368E

C97136

Tetradic

36CABA

7136C9

C93644

8EC936

Contrast Matrix WCAG 2.1 Contrast

36CABA	E3BB7D	C9C28C	A7C899	8AC9AC
—	1.1 Fail	1.1 Fail	1.1 Fail	1.1 Fail
1.1 Fail	—	1.0 Fail	1.0 Fail	1.1 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

2.0Fail

1.8Fail

1.9Fail

Black BG

10.3AAA

11.7AAA

11.6AAA

11.4AAA

11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7677BE

D2D18C

C6C699

B5B6A4

A5A6B3

Deuteranopia

6E62BF

D4D790

C6C79C

B3B1A7

A29DB5

Tritanopia

3DC1C2

E1989A

C9A3A6

A9ADAF

8DB9BA

Achromatopsia

9C9C9C

C0C0C0

BEBEBE

B9B9B9

B3B3B3

Shades & Tints Shades & Tints

#36CABA

Dark

Light

#E3BB7D

Dark

Light

#C9C28C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #36caba;
  --color-2: #e3bb7d;
  --color-3: #c9c28c;
  --color-4: #a7c899;
  --color-5: #8ac9ac;
}

SCSS

$color-1: #36caba;
$color-2: #e3bb7d;
$color-3: #c9c28c;
$color-4: #a7c899;
$color-5: #8ac9ac;

TAILWIND

colors: {
  'brand-1': '#36caba',
  'brand-2': '#e3bb7d',
  'brand-3': '#c9c28c',
  'brand-4': '#a7c899',
  'brand-5': '#8ac9ac',
}

RGB Array

[54, 202, 186], [227, 187, 125], [201, 194, 140], [167, 200, 153], [138, 201, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #36CABA, #E3BB7D, #C9C28C, #A7C899, #8AC9AC is ideal for: corporate websites, product showcases, portfolios. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #36caba; --color-2: #e3bb7d; --color-3: #c9c28c; --color-4: #a7c899; --color-5: #8ac9ac. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This cool-style 5-color scheme is especially suited for tech, SaaS, healthcare, eco industries. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color