#C5E7EE + #ADD0D5 + #899CA5 + #E4A466 + #F1ECE8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C5E7EE

Sky Blue · LightBlue · Glacier Blue

HEX

#C5E7EE

RGB

rgb(197, 231, 238)

HSL

hsl(190, 55%, 85%)

HSB

hsb(190, 17%, 93%)

CMYK

cmyk(17%, 3%, 0%, 7%)

Oklch

oklch(90.6% 0.037 211.5)

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

#ADD0D5

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#ADD0D5

RGB

rgb(173, 208, 213)

HSL

hsl(188, 32%, 76%)

HSB

hsb(188, 19%, 84%)

CMYK

cmyk(19%, 2%, 0%, 16%)

Oklch

oklch(83.4% 0.038 207.0)

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

#899CA5

Slate Blue · LightSlateGray · Lake Green

HEX

#899CA5

RGB

rgb(137, 156, 165)

HSL

hsl(199, 13%, 59%)

HSB

hsb(199, 17%, 65%)

CMYK

cmyk(17%, 5%, 0%, 35%)

Oklch

oklch(68.1% 0.025 227.9)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#E4A466

Ginger · SandyBrown · Warm Sun

HEX

#E4A466

RGB

rgb(228, 164, 102)

HSL

hsl(30, 70%, 65%)

HSB

hsb(30, 55%, 89%)

CMYK

cmyk(0%, 28%, 55%, 11%)

Oklch

oklch(76.7% 0.109 64.1)

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

#F1ECE8

Apricot · Linen · Peach Orange

HEX

#F1ECE8

RGB

rgb(241, 236, 232)

HSL

hsl(27, 24%, 93%)

HSB

hsb(27, 4%, 95%)

CMYK

cmyk(0%, 2%, 4%, 5%)

Oklch

oklch(94.6% 0.008 61.5)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5E7EE

EECBC4

Analogous

C4EEE0

C5E7EE

C4D2EE

Triadic

C5E7EE

EEC4E7

E7EEC4

Split-Comp.

C5E7EE

EEC4D2

EEE0C4

Tetradic

C5E7EE

E0C4EE

EECBC4

D2EEC4

Contrast Matrix WCAG 2.1 Contrast

C5E7EE	ADD0D5	899CA5	E4A466	F1ECE8
—	1.3 Fail	2.2 Fail	1.6 Fail	1.1 Fail
1.3 Fail	—	1.7 Fail	1.3 Fail	1.4 Fail
2.2 Fail	1.7 Fail	—	1.3 Fail	2.4 Fail
1.6 Fail	1.3 Fail	1.3 Fail	—	1.8 Fail
1.1 Fail	1.4 Fail	2.4 Fail	1.8 Fail	—

White BG

1.3Fail

1.6Fail

2.9Fail

2.1Fail

1.2Fail

Black BG

16.0AAA

12.8AAA

7.4AAA

9.8AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4EC

BCBCD4

9191A3

C8C875

EFEFE9

Deuteranopia

D2CFEC

BAB8D4

908FA2

CCD179

EFF0E9

Tritanopia

C7EBEB

AFD3D3

8AA1A1

E18183

F1EAEA

Achromatopsia

DEDEDE

C6C6C6

979797

B0B0B0

EDEDED

Shades & Tints Shades & Tints

#C5E7EE

Dark

Light

#ADD0D5

Dark

Light

#899CA5

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5e7ee;
  --color-2: #add0d5;
  --color-3: #899ca5;
  --color-4: #e4a466;
  --color-5: #f1ece8;
}

SCSS

$color-1: #c5e7ee;
$color-2: #add0d5;
$color-3: #899ca5;
$color-4: #e4a466;
$color-5: #f1ece8;

TAILWIND

colors: {
  'brand-1': '#c5e7ee',
  'brand-2': '#add0d5',
  'brand-3': '#899ca5',
  'brand-4': '#e4a466',
  'brand-5': '#f1ece8',
}

RGB Array

[197, 231, 238], [173, 208, 213], [137, 156, 165], [228, 164, 102], [241, 236, 232]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5E7EE, #ADD0D5, #899CA5, #E4A466, #F1ECE8 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: #c5e7ee; --color-2: #add0d5; --color-3: #899ca5; --color-4: #e4a466; --color-5: #f1ece8. 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