#CCE1B6 + #F2F4C3 + #F5D48D + #E7B594 + #9E927A · sunset - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#CCE1B6

Willow Green · LightGray · Apple Green

HEX

#CCE1B6

RGB

rgb(204, 225, 182)

HSL

hsl(89, 42%, 80%)

HSB

hsb(89, 19%, 88%)

CMYK

cmyk(9%, 0%, 19%, 12%)

Oklch

oklch(88.3% 0.062 128.8)

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

#F2F4C3

Fresh Green · Bisque · Lemon Cream

HEX

#F2F4C3

RGB

rgb(242, 244, 195)

HSL

hsl(62, 69%, 86%)

HSB

hsb(62, 20%, 96%)

CMYK

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

Oklch

oklch(95.4% 0.063 109.5)

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

#F5D48D

Goose Yellow · Khaki · Lemon Cream

HEX

#F5D48D

RGB

rgb(245, 212, 141)

HSL

hsl(41, 84%, 76%)

HSB

hsb(41, 42%, 96%)

CMYK

cmyk(0%, 13%, 42%, 4%)

Oklch

oklch(88.2% 0.097 85.6)

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

#E7B594

Apricot · BurlyWood · Warm Sun

HEX

#E7B594

RGB

rgb(231, 181, 148)

HSL

hsl(24, 63%, 74%)

HSB

hsb(24, 36%, 91%)

CMYK

cmyk(0%, 22%, 36%, 9%)

Oklch

oklch(81.0% 0.073 54.9)

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

#9E927A

Ginger · Gray · Sunflower

HEX

#9E927A

RGB

rgb(158, 146, 122)

HSL

hsl(40, 16%, 55%)

HSB

hsb(40, 23%, 62%)

CMYK

cmyk(0%, 8%, 23%, 38%)

Oklch

oklch(66.4% 0.037 84.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CCE1B6

CBB7E1

Analogous

E1E1B7

CCE1B6

B7E1B7

Triadic

CCE1B6

B7CDE1

E1B7CD

Split-Comp.

CCE1B6

B7B7E1

E1B7E1

Tetradic

CCE1B6

B7E1E1

CBB7E1

E1B7B7

Contrast Matrix WCAG 2.1 Contrast

CCE1B6	F2F4C3	F5D48D	E7B594	9E927A
—	1.2 Fail	1.0 Fail	1.3 Fail	2.2 Fail
1.2 Fail	—	1.3 Fail	1.6 Fail	2.7 Fail
1.0 Fail	1.3 Fail	—	1.3 Fail	2.1 Fail
1.3 Fail	1.6 Fail	1.3 Fail	—	1.7 Fail
2.2 Fail	2.7 Fail	2.1 Fail	1.7 Fail	—

White BG

1.4Fail

1.1Fail

1.4Fail

1.8Fail

3.1AA Large

Black BG

15.0AAA

18.5AAA

14.7AAA

11.4AAA

6.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5C0

F3F3CF

E7E69E

D1D19C

999980

Deuteranopia

D4D2C3

F3F3D2

E9EBA2

D4D89E

9A9A81

Tritanopia

CDC9CA

F2D8DA

F3ACAF

E5A2A4

9D8485

Achromatopsia

D6D6D6

EEEEEE

D6D6D6

C0C0C0

939393

Shades & Tints Shades & Tints

#CCE1B6

Dark

Light

#F2F4C3

Dark

Light

#F5D48D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cce1b6;
  --color-2: #f2f4c3;
  --color-3: #f5d48d;
  --color-4: #e7b594;
  --color-5: #9e927a;
}

SCSS

$color-1: #cce1b6;
$color-2: #f2f4c3;
$color-3: #f5d48d;
$color-4: #e7b594;
$color-5: #9e927a;

TAILWIND

colors: {
  'brand-1': '#cce1b6',
  'brand-2': '#f2f4c3',
  'brand-3': '#f5d48d',
  'brand-4': '#e7b594',
  'brand-5': '#9e927a',
}

RGB Array

[204, 225, 182], [242, 244, 195], [245, 212, 141], [231, 181, 148], [158, 146, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #CCE1B6, #F2F4C3, #F5D48D, #E7B594, #9E927A 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: #cce1b6; --color-2: #f2f4c3; --color-3: #f5d48d; --color-4: #e7b594; --color-5: #9e927a. 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