#CFD6D6 + #B2C9C7 + #CEFF8F + #FAECCF + #FAD7CF · dark - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CFD6D6

Sky Blue · LightGray · Pearl Gray

HEX

#CFD6D6

RGB

rgb(207, 214, 214)

HSL

hsl(180, 8%, 83%)

HSB

hsb(180, 3%, 84%)

CMYK

cmyk(3%, 0%, 0%, 16%)

Oklch

oklch(87.1% 0.008 197.0)

Traditional「Sky Blue」· Paint「Pearl Gray」· Creative Silver Lining

#B2C9C7

Jade · Silver · Lake Green

HEX

#B2C9C7

RGB

rgb(178, 201, 199)

HSL

hsl(175, 18%, 74%)

HSB

hsb(175, 11%, 79%)

CMYK

cmyk(11%, 0%, 1%, 21%)

Oklch

oklch(81.8% 0.025 190.3)

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

#CEFF8F

Willow Green · Khaki · Apple Green

HEX

#CEFF8F

RGB

rgb(206, 255, 143)

HSL

hsl(86, 100%, 78%)

HSB

hsb(86, 44%, 100%)

CMYK

cmyk(19%, 0%, 44%, 0%)

Oklch

oklch(94.2% 0.149 128.3)

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

#FAECCF

Goose Yellow · Bisque · Lemon Cream

HEX

#FAECCF

RGB

rgb(250, 236, 207)

HSL

hsl(40, 81%, 90%)

HSB

hsb(40, 17%, 98%)

CMYK

cmyk(0%, 6%, 17%, 2%)

Oklch

oklch(94.7% 0.041 85.3)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#FAD7CF

Peach Pink · Bisque · Cherry Blossom

HEX

#FAD7CF

RGB

rgb(250, 215, 207)

HSL

hsl(11, 81%, 90%)

HSB

hsb(11, 17%, 98%)

CMYK

cmyk(0%, 14%, 17%, 2%)

Oklch

oklch(90.6% 0.041 33.0)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CFD6D6

D7D0D0

Analogous

D0D7D4

CFD6D6

D0D4D7

Triadic

CFD6D6

D7D0D7

D7D7D0

Split-Comp.

CFD6D6

D7D0D4

D7D4D0

Tetradic

CFD6D6

D4D0D7

D7D0D0

D4D7D0

Contrast Matrix WCAG 2.1 Contrast

CFD6D6	B2C9C7	CEFF8F	FAECCF	FAD7CF
—	1.2 Fail	1.3 Fail	1.3 Fail	1.1 Fail
1.2 Fail	—	1.5 Fail	1.5 Fail	1.3 Fail
1.3 Fail	1.5 Fail	—	1.0 Fail	1.2 Fail
1.3 Fail	1.5 Fail	1.0 Fail	—	1.1 Fail
1.1 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.5Fail

1.7Fail

1.1Fail

1.2Fail

1.3Fail

Black BG

14.2AAA

12.1AAA

18.3AAA

18.0AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D2D2D6

BCBCC7

E3E4AA

F4F4D6

EBEBD1

Deuteranopia

D2D1D6

BBB9C8

E0DDB1

F5F6D8

EDF0D1

Tritanopia

CFD6D6

B3C8C8

D0BFC4

F9DCDD

F8D2D3

Achromatopsia

D4D4D4

C2C2C2

E4E4E4

EDEDED

E1E1E1

Shades & Tints Shades & Tints

#CFD6D6

Dark

Light

#B2C9C7

Dark

Light

#CEFF8F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cfd6d6;
  --color-2: #b2c9c7;
  --color-3: #ceff8f;
  --color-4: #faeccf;
  --color-5: #fad7cf;
}

SCSS

$color-1: #cfd6d6;
$color-2: #b2c9c7;
$color-3: #ceff8f;
$color-4: #faeccf;
$color-5: #fad7cf;

TAILWIND

colors: {
  'brand-1': '#cfd6d6',
  'brand-2': '#b2c9c7',
  'brand-3': '#ceff8f',
  'brand-4': '#faeccf',
  'brand-5': '#fad7cf',
}

RGB Array

[207, 214, 214], [178, 201, 199], [206, 255, 143], [250, 236, 207], [250, 215, 207]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #CFD6D6, #B2C9C7, #CEFF8F, #FAECCF, #FAD7CF 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: #cfd6d6; --color-2: #b2c9c7; --color-3: #ceff8f; --color-4: #faeccf; --color-5: #fad7cf. 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 dark-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