← Back to Editor

#C9D8E5 · #686B71 · #DCE4B5 · #F3F3F2 · #454C2E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#C9D8E5

Sky Blue · LightGray · Sky Blue

HEX
#C9D8E5
RGB
rgb(201, 216, 229)
HSL
hsl(208, 35%, 84%)
HSB
hsb(208, 12%, 90%)
CMYK
cmyk(12%, 6%, 0%, 10%)
Oklch
oklch(87.5% 0.024 244.2)

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

#686B71

Ink Gray · DimGray · Warm Gray

HEX
#686B71
RGB
rgb(104, 107, 113)
HSL
hsl(220, 4%, 43%)
HSB
hsb(220, 8%, 44%)
CMYK
cmyk(8%, 5%, 0%, 56%)
Oklch
oklch(52.7% 0.010 264.5)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#DCE4B5

Willow Green · Wheat · Apple Green

HEX
#DCE4B5
RGB
rgb(220, 228, 181)
HSL
hsl(70, 47%, 80%)
HSB
hsb(70, 21%, 89%)
CMYK
cmyk(4%, 0%, 21%, 11%)
Oklch
oklch(90.1% 0.062 115.5)

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

#F3F3F2

Plain White · SeaShell · Cloud White

HEX
#F3F3F2
RGB
rgb(243, 243, 242)
HSL
hsl(60, 4%, 95%)
HSB
hsb(60, 0%, 95%)
CMYK
cmyk(0%, 0%, 0%, 5%)
Oklch
oklch(96.4% 0.001 106.4)

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

#454C2E

Grass Green · DarkOliveGreen · Forest Green

HEX
#454C2E
RGB
rgb(69, 76, 46)
HSL
hsl(74, 25%, 24%)
HSB
hsb(74, 39%, 30%)
CMYK
cmyk(9%, 0%, 39%, 70%)
Oklch
oklch(40.2% 0.048 119.3)

Traditional「Grass Green」· Paint「Forest Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C9D8E5
E4D5C8

Analogous

C8E4E4
C9D8E5
C8C9E4

Triadic

C9D8E5
E4C8D7
D7E4C8

Split-Comp.

C9D8E5
E4C8C9
E4E4C8

Tetradic

C9D8E5
E4C8E4
E4D5C8
C9E4C8

Contrast Matrix WCAG 2.1 Contrast

C9D8E5
686B71
DCE4B5
F3F3F2
454C2E
—
3.7
AA Large
1.1
Fail
1.3
Fail
6.2
AA
3.7
AA Large
—
4.0
AA Large
4.8
AA
1.7
Fail
1.1
Fail
4.0
AA Large
—
1.2
Fail
6.8
AA
1.3
Fail
4.8
AA
1.2
Fail
—
8.1
AAA
6.2
AA
1.7
Fail
6.8
AA
8.1
AAA
—
White BG
1.5Fail
5.3AA
1.3Fail
1.1Fail
9.0AAA
Black BG
14.4AAA
3.9AA Large
15.8AAA
18.9AAA
2.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFD0E2
696970
DFE0C0
F3F3F2
484835

Deuteranopia

CFCEE1
69696F
DFDEC3
F3F3F2
484737

Tritanopia

CADFDF
686E6E
DCC9CB
F3F2F2
453B3C

Achromatopsia

D5D5D5
6B6B6B
DCDCDC
F3F3F3
464646

Shades & Tints Shades & Tints

#C9D8E5

Dark
Light

#686B71

Dark
Light

#DCE4B5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c9d8e5;
  --color-2: #686b71;
  --color-3: #dce4b5;
  --color-4: #f3f3f2;
  --color-5: #454c2e;
}

SCSS

$color-1: #c9d8e5;
$color-2: #686b71;
$color-3: #dce4b5;
$color-4: #f3f3f2;
$color-5: #454c2e;

TAILWIND

colors: {
  'brand-1': '#c9d8e5',
  'brand-2': '#686b71',
  'brand-3': '#dce4b5',
  'brand-4': '#f3f3f2',
  'brand-5': '#454c2e',
}

RGB Array

[201, 216, 229], [104, 107, 113], [220, 228, 181], [243, 243, 242], [69, 76, 46]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C9D8E5, #686B71, #DCE4B5, #F3F3F2, #454C2E 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: #c9d8e5; --color-2: #686b71; --color-3: #dce4b5; --color-4: #f3f3f2; --color-5: #454c2e. 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