#FFF8E0 + #D8E0AA + #72AF98 + #D8B4A1 + #E5DFCA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFF8E0

Goose Yellow · LightYellow · Lemon Cream

HEX

#FFF8E0

RGB

rgb(255, 248, 224)

HSL

hsl(46, 100%, 94%)

HSB

hsb(46, 12%, 100%)

CMYK

cmyk(0%, 3%, 12%, 0%)

Oklch

oklch(97.8% 0.032 93.5)

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

#D8E0AA

Fresh Green · Wheat · Lemon Cream

HEX

#D8E0AA

RGB

rgb(216, 224, 170)

HSL

hsl(69, 47%, 77%)

HSB

hsb(69, 24%, 88%)

CMYK

cmyk(4%, 0%, 24%, 12%)

Oklch

oklch(88.7% 0.071 114.7)

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

#72AF98

Mineral Blue · CadetBlue · Olive Green

HEX

#72AF98

RGB

rgb(114, 175, 152)

HSL

hsl(157, 28%, 57%)

HSB

hsb(157, 35%, 69%)

CMYK

cmyk(35%, 0%, 13%, 31%)

Oklch

oklch(70.6% 0.072 168.5)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#D8B4A1

Apricot · Tan · Warm Sun

HEX

#D8B4A1

RGB

rgb(216, 180, 161)

HSL

hsl(21, 41%, 74%)

HSB

hsb(21, 25%, 85%)

CMYK

cmyk(0%, 17%, 25%, 15%)

Oklch

oklch(79.7% 0.049 49.4)

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

#E5DFCA

Goose Yellow · LightGray · Lemon Cream

HEX

#E5DFCA

RGB

rgb(229, 223, 202)

HSL

hsl(47, 34%, 85%)

HSB

hsb(47, 12%, 90%)

CMYK

cmyk(0%, 3%, 12%, 10%)

Oklch

oklch(90.3% 0.029 93.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFF8E0

E0E8FF

Analogous

FFE9E0

FFF8E0

F7FFE0

Triadic

FFF8E0

E0FFF8

F8E0FF

Split-Comp.

FFF8E0

E0F7FF

E9E0FF

Tetradic

FFF8E0

E0FFE9

E0E8FF

FFE0F7

Contrast Matrix WCAG 2.1 Contrast

FFF8E0	D8E0AA	72AF98	D8B4A1	E5DFCA
—	1.3 Fail	2.4 Fail	1.8 Fail	1.3 Fail
1.3 Fail	—	1.8 Fail	1.4 Fail	1.0 Fail
2.4 Fail	1.8 Fail	—	1.3 Fail	1.9 Fail
1.8 Fail	1.4 Fail	1.3 Fail	—	1.4 Fail
1.3 Fail	1.0 Fail	1.9 Fail	1.4 Fail	—

White BG

1.1Fail

1.4Fail

2.5Fail

1.9Fail

1.3Fail

Black BG

19.8AAA

15.2AAA

8.3AAA

11.0AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

FCFCE6

DBDCB7

8C8D9E

C8C8A6

E2E2CF

Deuteranopia

FCFDE7

DBDABA

89849F

CBCDA7

E3E3D0

Tritanopia

FFEAEB

D8C1C4

75A2A3

D6A9AA

E5D3D4

Achromatopsia

F7F7F7

D7D7D7

9A9A9A

BDBDBD

DEDEDE

Shades & Tints Shades & Tints

#FFF8E0

Dark

Light

#D8E0AA

Dark

Light

#72AF98

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fff8e0;
  --color-2: #d8e0aa;
  --color-3: #72af98;
  --color-4: #d8b4a1;
  --color-5: #e5dfca;
}

SCSS

$color-1: #fff8e0;
$color-2: #d8e0aa;
$color-3: #72af98;
$color-4: #d8b4a1;
$color-5: #e5dfca;

TAILWIND

colors: {
  'brand-1': '#fff8e0',
  'brand-2': '#d8e0aa',
  'brand-3': '#72af98',
  'brand-4': '#d8b4a1',
  'brand-5': '#e5dfca',
}

RGB Array

[255, 248, 224], [216, 224, 170], [114, 175, 152], [216, 180, 161], [229, 223, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFF8E0, #D8E0AA, #72AF98, #D8B4A1, #E5DFCA 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: #fff8e0; --color-2: #d8e0aa; --color-3: #72af98; --color-4: #d8b4a1; --color-5: #e5dfca. 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