#F9ECE3 + #F4E3DB + #EADCDC + #D8D9DD + #CBD0D4 · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F9ECE3

Apricot · Linen · Peach Orange

HEX

#F9ECE3

RGB

rgb(249, 236, 227)

HSL

hsl(25, 65%, 93%)

HSB

hsb(25, 9%, 98%)

CMYK

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

Oklch

oklch(95.1% 0.019 57.2)

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

#F4E3DB

Apricot · Beige · Peach Orange

HEX

#F4E3DB

RGB

rgb(244, 227, 219)

HSL

hsl(19, 53%, 91%)

HSB

hsb(19, 10%, 96%)

CMYK

cmyk(0%, 7%, 10%, 4%)

Oklch

oklch(92.7% 0.022 47.0)

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

#EADCDC

Peach Pink · LightGray · Cherry Blossom

HEX

#EADCDC

RGB

rgb(234, 220, 220)

HSL

hsl(0, 25%, 89%)

HSB

hsb(0, 6%, 92%)

CMYK

cmyk(0%, 6%, 6%, 8%)

Oklch

oklch(90.6% 0.015 17.4)

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

#D8D9DD

Plain White · LightGray · Cloud White

HEX

#D8D9DD

RGB

rgb(216, 217, 221)

HSL

hsl(228, 7%, 86%)

HSB

hsb(228, 2%, 87%)

CMYK

cmyk(2%, 2%, 0%, 13%)

Oklch

oklch(88.6% 0.006 275.0)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

#CBD0D4

Sky Blue · LightGray · Pearl Gray

HEX

#CBD0D4

RGB

rgb(203, 208, 212)

HSL

hsl(207, 9%, 81%)

HSB

hsb(207, 4%, 83%)

CMYK

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

Oklch

oklch(85.5% 0.008 241.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9ECE3

E2EFF9

Analogous

F9E2E3

F9ECE3

F9F7E2

Triadic

F9ECE3

E2F9EB

EBE2F9

Split-Comp.

F9ECE3

E2F9F7

E2E3F9

Tetradic

F9ECE3

E3F9E2

E2EFF9

F7E2F9

Contrast Matrix WCAG 2.1 Contrast

F9ECE3	F4E3DB	EADCDC	D8D9DD	CBD0D4
—	1.1 Fail	1.2 Fail	1.2 Fail	1.3 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.2 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.3 Fail	1.2 Fail	1.2 Fail	1.1 Fail	—

White BG

1.2Fail

1.3Fail

1.4Fail

1.6Fail

Black BG

18.1AAA

16.9AAA

15.8AAA

14.9AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F3F3E5

EDECDD

E4E4DC

D8D8DC

CDCDD3

Deuteranopia

F4F5E6

EEEFDD

E5E6DC

D8D8DC

CDCDD3

Tritanopia

F8E7E7

F3DEDF

E9DCDC

D8DBDB

CBD2D2

Achromatopsia

EFEFEF

E7E7E7

E0E0E0

D9D9D9

CFCFCF

Shades & Tints Shades & Tints

#F9ECE3

Dark

Light

#F4E3DB

Dark

Light

#EADCDC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9ece3;
  --color-2: #f4e3db;
  --color-3: #eadcdc;
  --color-4: #d8d9dd;
  --color-5: #cbd0d4;
}

SCSS

$color-1: #f9ece3;
$color-2: #f4e3db;
$color-3: #eadcdc;
$color-4: #d8d9dd;
$color-5: #cbd0d4;

TAILWIND

colors: {
  'brand-1': '#f9ece3',
  'brand-2': '#f4e3db',
  'brand-3': '#eadcdc',
  'brand-4': '#d8d9dd',
  'brand-5': '#cbd0d4',
}

RGB Array

[249, 236, 227], [244, 227, 219], [234, 220, 220], [216, 217, 221], [203, 208, 212]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #F9ECE3, #F4E3DB, #EADCDC, #D8D9DD, #CBD0D4 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: #f9ece3; --color-2: #f4e3db; --color-3: #eadcdc; --color-4: #d8d9dd; --color-5: #cbd0d4. 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 sunset-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