#E8F0E1 + #F5DCB0 + #E2C18B + #A9BF9F + #ABA56C - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E8F0E1

Celadon · Beige · Mint Green

HEX

#E8F0E1

RGB

rgb(232, 240, 225)

HSL

hsl(92, 33%, 91%)

HSB

hsb(92, 6%, 94%)

CMYK

cmyk(3%, 0%, 6%, 6%)

Oklch

oklch(94.5% 0.022 130.0)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#F5DCB0

Goose Yellow · Wheat · Peach Orange

HEX

#F5DCB0

RGB

rgb(245, 220, 176)

HSL

hsl(38, 78%, 83%)

HSB

hsb(38, 28%, 96%)

CMYK

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

Oklch

oklch(90.4% 0.064 81.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#E2C18B

Goose Yellow · BurlyWood · Warm Sun

HEX

#E2C18B

RGB

rgb(226, 193, 139)

HSL

hsl(37, 60%, 72%)

HSB

hsb(37, 38%, 89%)

CMYK

cmyk(0%, 15%, 38%, 11%)

Oklch

oklch(82.7% 0.080 79.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#A9BF9F

Celadon · DarkGray · Apple Green

HEX

#A9BF9F

RGB

rgb(169, 191, 159)

HSL

hsl(101, 20%, 69%)

HSB

hsb(101, 17%, 75%)

CMYK

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

Oklch

oklch(77.9% 0.051 135.9)

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

#ABA56C

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#ABA56C

RGB

rgb(171, 165, 108)

HSL

hsl(54, 27%, 55%)

HSB

hsb(54, 37%, 67%)

CMYK

cmyk(0%, 4%, 37%, 33%)

Oklch

oklch(71.3% 0.077 103.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8F0E1

E9E0F0

Analogous

EFF0E0

E8F0E1

E0F0E1

Triadic

E8F0E1

E0E8F0

F0E0E8

Split-Comp.

E8F0E1

E1E0F0

F0E0EF

Tetradic

E8F0E1

E0EFF0

E9E0F0

F0E1E0

Contrast Matrix WCAG 2.1 Contrast

E8F0E1	F5DCB0	E2C18B	A9BF9F	ABA56C
—	1.1 Fail	1.5 Fail	1.7 Fail	2.2 Fail
1.1 Fail	—	1.3 Fail	1.5 Fail	1.9 Fail
1.5 Fail	1.3 Fail	—	1.1 Fail	1.5 Fail
1.7 Fail	1.5 Fail	1.1 Fail	—	1.3 Fail
2.2 Fail	1.9 Fail	1.5 Fail	1.3 Fail	—

White BG

1.2Fail

1.3Fail

1.7Fail

2.0Fail

2.5Fail

Black BG

18.0AAA

15.7AAA

12.2AAA

10.6AAA

8.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBECE5

EAEABB

D4D398

B3B3A7

A8A87A

Deuteranopia

EBEAE6

ECEEBD

D6D89B

B1B0A9

A9A97D

Tritanopia

E8E7E8

F4C3C5

E0A2A5

AAADAE

AB8587

Achromatopsia

ECECEC

DEDEDE

C5C5C5

B5B5B5

A0A0A0

Shades & Tints Shades & Tints

#E8F0E1

Dark

Light

#F5DCB0

Dark

Light

#E2C18B

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8f0e1;
  --color-2: #f5dcb0;
  --color-3: #e2c18b;
  --color-4: #a9bf9f;
  --color-5: #aba56c;
}

SCSS

$color-1: #e8f0e1;
$color-2: #f5dcb0;
$color-3: #e2c18b;
$color-4: #a9bf9f;
$color-5: #aba56c;

TAILWIND

colors: {
  'brand-1': '#e8f0e1',
  'brand-2': '#f5dcb0',
  'brand-3': '#e2c18b',
  'brand-4': '#a9bf9f',
  'brand-5': '#aba56c',
}

RGB Array

[232, 240, 225], [245, 220, 176], [226, 193, 139], [169, 191, 159], [171, 165, 108]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8F0E1, #F5DCB0, #E2C18B, #A9BF9F, #ABA56C 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: #e8f0e1; --color-2: #f5dcb0; --color-3: #e2c18b; --color-4: #a9bf9f; --color-5: #aba56c. 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