#C2DFD8 + #D6E9E6 + #EDF7F5 + #F7F5ED + #FAF7E9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C2DFD8

Jade · LightGray · Glacier Blue

HEX

#C2DFD8

RGB

rgb(194, 223, 216)

HSL

hsl(166, 31%, 82%)

HSB

hsb(166, 13%, 87%)

CMYK

cmyk(13%, 0%, 3%, 13%)

Oklch

oklch(88.0% 0.032 179.4)

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

#D6E9E6

Jade · Lavender · Glacier Blue

HEX

#D6E9E6

RGB

rgb(214, 233, 230)

HSL

hsl(171, 30%, 88%)

HSB

hsb(171, 8%, 91%)

CMYK

cmyk(8%, 0%, 1%, 9%)

Oklch

oklch(91.9% 0.021 185.5)

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

#EDF7F5

Jade · Snow · Glacier Blue

HEX

#EDF7F5

RGB

rgb(237, 247, 245)

HSL

hsl(168, 38%, 95%)

HSB

hsb(168, 4%, 97%)

CMYK

cmyk(4%, 0%, 1%, 3%)

Oklch

oklch(96.8% 0.011 182.9)

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

#F7F5ED

Goose Yellow · SeaShell · Lemon Cream

HEX

#F7F5ED

RGB

rgb(247, 245, 237)

HSL

hsl(48, 38%, 95%)

HSB

hsb(48, 4%, 97%)

CMYK

cmyk(0%, 1%, 4%, 3%)

Oklch

oklch(96.9% 0.011 95.2)

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

#FAF7E9

Goose Yellow · SeaShell · Lemon Cream

HEX

#FAF7E9

RGB

rgb(250, 247, 233)

HSL

hsl(49, 63%, 95%)

HSB

hsb(49, 7%, 98%)

CMYK

cmyk(0%, 1%, 7%, 2%)

Oklch

oklch(97.5% 0.019 96.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2DFD8

DFC3CA

Analogous

C3DFCA

C2DFD8

C3D8DF

Triadic

C2DFD8

D9C3DF

DFD9C3

Split-Comp.

C2DFD8

DFC3D8

DFCAC3

Tetradic

C2DFD8

CAC3DF

DFC3CA

D8DFC3

Contrast Matrix WCAG 2.1 Contrast

C2DFD8	D6E9E6	EDF7F5	F7F5ED	FAF7E9
—	1.1 Fail	1.3 Fail	1.3 Fail	1.3 Fail
1.1 Fail	—	1.2 Fail	1.2 Fail	1.2 Fail
1.3 Fail	1.2 Fail	—	1.0 Fail	1.0 Fail
1.3 Fail	1.2 Fail	1.0 Fail	—	1.0 Fail
1.3 Fail	1.2 Fail	1.0 Fail	1.0 Fail	—

White BG

1.4Fail

1.3Fail

1.1Fail

Black BG

14.8AAA

16.7AAA

19.2AAA

19.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CFCFDA

DEDEE7

F1F1F5

F6F6EF

F9F9EC

Deuteranopia

CDCBDA

DDDCE7

F1F0F6

F6F6EF

F9F9ED

Tritanopia

C3DBDB

D7E7E7

EDF6F6

F7F0F1

FAEFF0

Achromatopsia

D6D6D6

E3E3E3

F4F4F4

F5F5F5

F6F6F6

Shades & Tints Shades & Tints

#C2DFD8

Dark

Light

#D6E9E6

Dark

Light

#EDF7F5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2dfd8;
  --color-2: #d6e9e6;
  --color-3: #edf7f5;
  --color-4: #f7f5ed;
  --color-5: #faf7e9;
}

SCSS

$color-1: #c2dfd8;
$color-2: #d6e9e6;
$color-3: #edf7f5;
$color-4: #f7f5ed;
$color-5: #faf7e9;

TAILWIND

colors: {
  'brand-1': '#c2dfd8',
  'brand-2': '#d6e9e6',
  'brand-3': '#edf7f5',
  'brand-4': '#f7f5ed',
  'brand-5': '#faf7e9',
}

RGB Array

[194, 223, 216], [214, 233, 230], [237, 247, 245], [247, 245, 237], [250, 247, 233]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C2DFD8, #D6E9E6, #EDF7F5, #F7F5ED, #FAF7E9 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: #c2dfd8; --color-2: #d6e9e6; --color-3: #edf7f5; --color-4: #f7f5ed; --color-5: #faf7e9. 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