#E5C384 + #CCBB9C + #B3B3B4 + #9AABCC + #84A6E6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E5C384

Goose Yellow · BurlyWood · Warm Sun

HEX

#E5C384

RGB

rgb(229, 195, 132)

HSL

hsl(39, 65%, 71%)

HSB

hsb(39, 42%, 90%)

CMYK

cmyk(0%, 15%, 42%, 10%)

Oklch

oklch(83.2% 0.089 82.3)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#CCBB9C

Goose Yellow · Tan · Warm Sun

HEX

#CCBB9C

RGB

rgb(204, 187, 156)

HSL

hsl(39, 32%, 71%)

HSB

hsb(39, 24%, 80%)

CMYK

cmyk(0%, 8%, 24%, 20%)

Oklch

oklch(79.8% 0.046 82.5)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#B3B3B4

Ash · DarkGray · Silver Sand

HEX

#B3B3B4

RGB

rgb(179, 179, 180)

HSL

hsl(240, 1%, 70%)

HSB

hsb(240, 1%, 71%)

CMYK

cmyk(1%, 1%, 0%, 29%)

Oklch

oklch(76.7% 0.001 286.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#9AABCC

Azure · LightSteelBlue · Cobalt Blue

HEX

#9AABCC

RGB

rgb(154, 171, 204)

HSL

hsl(220, 33%, 70%)

HSB

hsb(220, 25%, 80%)

CMYK

cmyk(25%, 16%, 0%, 20%)

Oklch

oklch(73.9% 0.052 263.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#84A6E6

Azure · CornflowerBlue · Cobalt Blue

HEX

#84A6E6

RGB

rgb(132, 166, 230)

HSL

hsl(219, 66%, 71%)

HSB

hsb(219, 43%, 90%)

CMYK

cmyk(43%, 28%, 0%, 10%)

Oklch

oklch(72.5% 0.101 262.6)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E5C384

85A7E5

Analogous

E59385

E5C384

D7E585

Triadic

E5C384

85E5C3

C385E5

Split-Comp.

E5C384

85D7E5

9385E5

Tetradic

E5C384

85E593

85A7E5

E585D7

Contrast Matrix WCAG 2.1 Contrast

E5C384	CCBB9C	B3B3B4	9AABCC	84A6E6
—	1.1 Fail	1.2 Fail	1.4 Fail	1.5 Fail
1.1 Fail	—	1.1 Fail	1.2 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.4 Fail	1.2 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.7Fail

1.9Fail

2.1Fail

2.3Fail

2.4Fail

Black BG

12.5AAA

11.2AAA

10.0AAA

9.1AAA

8.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D693

C5C4A4

B3B3B4

A1A2C4

9393D7

Deuteranopia

D8DB97

C6C7A5

B3B3B4

A09FC2

918ED3

Tritanopia

E39FA2

CBA9AB

B3B4B4

9BBEBC

86CAC8

Achromatopsia

C6C6C6

BDBDBD

B3B3B3

AAAAAA

A3A3A3

Shades & Tints Shades & Tints

#E5C384

Dark

Light

#CCBB9C

Dark

Light

#B3B3B4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e5c384;
  --color-2: #ccbb9c;
  --color-3: #b3b3b4;
  --color-4: #9aabcc;
  --color-5: #84a6e6;
}

SCSS

$color-1: #e5c384;
$color-2: #ccbb9c;
$color-3: #b3b3b4;
$color-4: #9aabcc;
$color-5: #84a6e6;

TAILWIND

colors: {
  'brand-1': '#e5c384',
  'brand-2': '#ccbb9c',
  'brand-3': '#b3b3b4',
  'brand-4': '#9aabcc',
  'brand-5': '#84a6e6',
}

RGB Array

[229, 195, 132], [204, 187, 156], [179, 179, 180], [154, 171, 204], [132, 166, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E5C384, #CCBB9C, #B3B3B4, #9AABCC, #84A6E6 is ideal for: health products, baby brands, fresh-style blogs. 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: #e5c384; --color-2: #ccbb9c; --color-3: #b3b3b4; --color-4: #9aabcc; --color-5: #84a6e6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 general-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