← Back to Editor

#CFD9E3 · #EEA24A · #EE445E · #664F69 · #877233

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#CFD9E3

Azure · LightGray · Sky Blue

HEX
#CFD9E3
RGB
rgb(207, 217, 227)
HSL
hsl(210, 26%, 85%)
HSB
hsb(210, 9%, 89%)
CMYK
cmyk(9%, 4%, 0%, 11%)
Oklch
oklch(88.1% 0.018 248.0)

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

#EEA24A

Ginger · SandyBrown · Warm Sun

HEX
#EEA24A
RGB
rgb(238, 162, 74)
HSL
hsl(32, 83%, 61%)
HSB
hsb(32, 69%, 93%)
CMYK
cmyk(0%, 32%, 69%, 7%)
Oklch
oklch(77.1% 0.136 67.1)

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

#EE445E

Vermilion · Tomato · Passion Red

HEX
#EE445E
RGB
rgb(238, 68, 94)
HSL
hsl(351, 83%, 60%)
HSB
hsb(351, 71%, 93%)
CMYK
cmyk(0%, 71%, 61%, 7%)
Oklch
oklch(63.9% 0.205 16.8)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#664F69

Dark Plum · DimGray · Eggplant

HEX
#664F69
RGB
rgb(102, 79, 105)
HSL
hsl(293, 14%, 36%)
HSB
hsb(293, 25%, 41%)
CMYK
cmyk(3%, 25%, 0%, 59%)
Oklch
oklch(46.1% 0.050 322.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#877233

Ochre · Sienna · Honey Gold

HEX
#877233
RGB
rgb(135, 114, 51)
HSL
hsl(45, 45%, 36%)
HSB
hsb(45, 62%, 53%)
CMYK
cmyk(0%, 16%, 62%, 47%)
Oklch
oklch(55.9% 0.086 91.0)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFD9E3
E3D9CF

Analogous

CFE3E3
CFD9E3
CFCFE3

Triadic

CFD9E3
E3CFD9
D9E3CF

Split-Comp.

CFD9E3
E3CFCF
E3E3CF

Tetradic

CFD9E3
E3CFE3
E3D9CF
CFE3CF

Contrast Matrix WCAG 2.1 Contrast

CFD9E3
EEA24A
EE445E
664F69
877233
—
1.5
Fail
2.6
Fail
5.1
AA
3.3
AA Large
1.5
Fail
—
1.8
Fail
3.4
AA Large
2.2
Fail
2.6
Fail
1.8
Fail
—
1.9
Fail
1.3
Fail
5.1
AA
3.4
AA Large
1.9
Fail
—
1.6
Fail
3.3
AA Large
2.2
Fail
1.3
Fail
1.6
Fail
—
White BG
1.4Fail
2.1Fail
3.7AA Large
7.3AAA
4.7AA
Black BG
14.7AAA
9.9AAA
5.6AA
2.9Fail
4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D3E1
CDCC5F
A4A358
5C5C63
7E7E42

Deuteranopia

D3D2E0
D2D764
AEBB56
5D5F61
7F8146

Tritanopia

CFDFDE
EA7074
E65352
655E5D
864E51

Achromatopsia

D7D7D7
AFAFAF
7A7A7A
595959
717171

Shades & Tints Shades & Tints

#CFD9E3

Dark
Light

#EEA24A

Dark
Light

#EE445E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfd9e3;
  --color-2: #eea24a;
  --color-3: #ee445e;
  --color-4: #664f69;
  --color-5: #877233;
}

SCSS

$color-1: #cfd9e3;
$color-2: #eea24a;
$color-3: #ee445e;
$color-4: #664f69;
$color-5: #877233;

TAILWIND

colors: {
  'brand-1': '#cfd9e3',
  'brand-2': '#eea24a',
  'brand-3': '#ee445e',
  'brand-4': '#664f69',
  'brand-5': '#877233',
}

RGB Array

[207, 217, 227], [238, 162, 74], [238, 68, 94], [102, 79, 105], [135, 114, 51]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CFD9E3, #EEA24A, #EE445E, #664F69, #877233 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #cfd9e3; --color-2: #eea24a; --color-3: #ee445e; --color-4: #664f69; --color-5: #877233. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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