← Back to Editor

#CDE2DF · #F2F1F2 · #665544 · #DB6844 · #B9D6CE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#CDE2DF

Jade · LightGray · Glacier Blue

HEX
#CDE2DF
RGB
rgb(205, 226, 223)
HSL
hsl(171, 27%, 85%)
HSB
hsb(171, 9%, 89%)
CMYK
cmyk(9%, 0%, 1%, 11%)
Oklch
oklch(89.6% 0.023 186.4)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#F2F1F2

Plain White · SeaShell · Cloud White

HEX
#F2F1F2
RGB
rgb(242, 241, 242)
HSL
hsl(300, 4%, 95%)
HSB
hsb(300, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(95.9% 0.002 325.6)

Traditional「Plain White」· Paint「Cloud White」· Creative Morning Mist

#665544

Ochre · DarkOliveGreen · Amber Brown

HEX
#665544
RGB
rgb(102, 85, 68)
HSL
hsl(30, 20%, 33%)
HSB
hsb(30, 33%, 40%)
CMYK
cmyk(0%, 17%, 33%, 60%)
Oklch
oklch(46.2% 0.035 66.8)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#DB6844

Vermilion · Tomato · Passion Red

HEX
#DB6844
RGB
rgb(219, 104, 68)
HSL
hsl(14, 68%, 56%)
HSB
hsb(14, 69%, 86%)
CMYK
cmyk(0%, 53%, 69%, 14%)
Oklch
oklch(64.9% 0.153 37.9)

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

#B9D6CE

Jade · LightSteelBlue · Glacier Blue

HEX
#B9D6CE
RGB
rgb(185, 214, 206)
HSL
hsl(163, 26%, 78%)
HSB
hsb(163, 14%, 84%)
CMYK
cmyk(14%, 0%, 4%, 16%)
Oklch
oklch(85.2% 0.033 177.0)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CDE2DF
E3CED2

Analogous

CEE3D6
CDE2DF
CEDCE3

Triadic

CDE2DF
E0CEE3
E3E0CE

Split-Comp.

CDE2DF
E3CEDC
E3D6CE

Tetradic

CDE2DF
D6CEE3
E3CED2
DCE3CE

Contrast Matrix WCAG 2.1 Contrast

CDE2DF
F2F1F2
665544
DB6844
B9D6CE
—
1.2
Fail
5.3
AA
2.6
Fail
1.1
Fail
1.2
Fail
—
6.3
AA
3.1
AA Large
1.4
Fail
5.3
AA
6.3
AA
—
2.1
Fail
4.6
AA
2.6
Fail
3.1
AA Large
2.1
Fail
—
2.2
Fail
1.1
Fail
1.4
Fail
4.6
AA
2.2
Fail
—
White BG
1.4Fail
1.1Fail
7.1AAA
3.5AA Large
1.5Fail
Black BG
15.5AAA
18.6AAA
2.9Fail
6.1AA
13.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D6D6E0
F2F2F2
5F5E48
A9A84D
C6C6D0

Deuteranopia

D5D3E0
F2F2F2
606149
B0B84F
C4C2D0

Tritanopia

CEE0E0
F2F2F2
654B4C
D55455
BAD1D2

Achromatopsia

DBDBDB
F1F1F1
585858
868686
CCCCCC

Shades & Tints Shades & Tints

#CDE2DF

Dark
Light

#F2F1F2

Dark
Light

#665544

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cde2df;
  --color-2: #f2f1f2;
  --color-3: #665544;
  --color-4: #db6844;
  --color-5: #b9d6ce;
}

SCSS

$color-1: #cde2df;
$color-2: #f2f1f2;
$color-3: #665544;
$color-4: #db6844;
$color-5: #b9d6ce;

TAILWIND

colors: {
  'brand-1': '#cde2df',
  'brand-2': '#f2f1f2',
  'brand-3': '#665544',
  'brand-4': '#db6844',
  'brand-5': '#b9d6ce',
}

RGB Array

[205, 226, 223], [242, 241, 242], [102, 85, 68], [219, 104, 68], [185, 214, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CDE2DF, #F2F1F2, #665544, #DB6844, #B9D6CE is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #cde2df; --color-2: #f2f1f2; --color-3: #665544; --color-4: #db6844; --color-5: #b9d6ce. 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. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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