#CAE8F2 + #F4ECC5 + #F2CFBB + #ECB5B8 + #9D89A2 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CAE8F2

Sky Blue · Lavender · Glacier Blue

HEX

#CAE8F2

RGB

rgb(202, 232, 242)

HSL

hsl(195, 61%, 87%)

HSB

hsb(195, 17%, 95%)

CMYK

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

Oklch

oklch(91.2% 0.034 219.9)

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

#F4ECC5

Fresh Green · Bisque · Lemon Cream

HEX

#F4ECC5

RGB

rgb(244, 236, 197)

HSL

hsl(50, 68%, 86%)

HSB

hsb(50, 19%, 96%)

CMYK

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

Oklch

oklch(94.0% 0.052 97.7)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#F2CFBB

Apricot · Wheat · Peach Orange

HEX

#F2CFBB

RGB

rgb(242, 207, 187)

HSL

hsl(22, 68%, 84%)

HSB

hsb(22, 23%, 95%)

CMYK

cmyk(0%, 14%, 23%, 5%)

Oklch

oklch(87.9% 0.048 51.5)

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

#ECB5B8

Peach Pink · LightPink · Cherry Blossom

HEX

#ECB5B8

RGB

rgb(236, 181, 184)

HSL

hsl(357, 59%, 82%)

HSB

hsb(357, 23%, 93%)

CMYK

cmyk(0%, 23%, 22%, 7%)

Oklch

oklch(82.4% 0.064 14.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#9D89A2

Dark Plum · DarkGray · Violet

HEX

#9D89A2

RGB

rgb(157, 137, 162)

HSL

hsl(288, 12%, 59%)

HSB

hsb(288, 15%, 64%)

CMYK

cmyk(3%, 15%, 0%, 36%)

Oklch

oklch(65.6% 0.043 319.5)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CAE8F2

F2D4CA

Analogous

CAF2E8

CAE8F2

CAD4F2

Triadic

CAE8F2

F2CAE8

E8F2CA

Split-Comp.

CAE8F2

F2CAD4

F2E8CA

Tetradic

CAE8F2

E8CAF2

F2D4CA

D4F2CA

Contrast Matrix WCAG 2.1 Contrast

CAE8F2	F4ECC5	F2CFBB	ECB5B8	9D89A2
—	1.1 Fail	1.1 Fail	1.4 Fail	2.5 Fail
1.1 Fail	—	1.2 Fail	1.5 Fail	2.7 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	2.2 Fail
1.4 Fail	1.5 Fail	1.2 Fail	—	1.8 Fail
2.5 Fail	2.7 Fail	2.2 Fail	1.8 Fail	—

White BG

1.3Fail

1.2Fail

1.5Fail

1.8Fail

3.2AA Large

Black BG

16.3AAA

17.7AAA

14.4AAA

11.9AAA

6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D7D7F0

F1F0CE

E3E3C0

D4D4B7

94949C

Deuteranopia

D5D3EF

F1F2D1

E5E7C1

D7DCB7

96979B

Tritanopia

CBEEED

F4D6D8

F0C4C5

E9B7B7

9C9796

Achromatopsia

E0E0E0

EAEAEA

D7D7D7

C6C6C6

929292

Shades & Tints Shades & Tints

#CAE8F2

Dark

Light

#F4ECC5

Dark

Light

#F2CFBB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cae8f2;
  --color-2: #f4ecc5;
  --color-3: #f2cfbb;
  --color-4: #ecb5b8;
  --color-5: #9d89a2;
}

SCSS

$color-1: #cae8f2;
$color-2: #f4ecc5;
$color-3: #f2cfbb;
$color-4: #ecb5b8;
$color-5: #9d89a2;

TAILWIND

colors: {
  'brand-1': '#cae8f2',
  'brand-2': '#f4ecc5',
  'brand-3': '#f2cfbb',
  'brand-4': '#ecb5b8',
  'brand-5': '#9d89a2',
}

RGB Array

[202, 232, 242], [244, 236, 197], [242, 207, 187], [236, 181, 184], [157, 137, 162]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #CAE8F2, #F4ECC5, #F2CFBB, #ECB5B8, #9D89A2 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: #cae8f2; --color-2: #f4ecc5; --color-3: #f2cfbb; --color-4: #ecb5b8; --color-5: #9d89a2. 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 warm-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