#DFE4D1 + #8AC8B3 + #B1BD95 + #BBA072 + #E44A1B - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#DFE4D1

Willow Green · LightGray · Mint Green

HEX

#DFE4D1

RGB

rgb(223, 228, 209)

HSL

hsl(76, 26%, 86%)

HSB

hsb(76, 8%, 89%)

CMYK

cmyk(2%, 0%, 8%, 11%)

Oklch

oklch(91.0% 0.026 118.9)

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

#8AC8B3

Jade · MediumAquaMarine · Lake Green

HEX

#8AC8B3

RGB

rgb(138, 200, 179)

HSL

hsl(160, 36%, 66%)

HSB

hsb(160, 31%, 78%)

CMYK

cmyk(31%, 0%, 11%, 22%)

Oklch

oklch(78.5% 0.071 171.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#B1BD95

Willow Green · DarkGray · Apple Green

HEX

#B1BD95

RGB

rgb(177, 189, 149)

HSL

hsl(78, 23%, 66%)

HSB

hsb(78, 21%, 74%)

CMYK

cmyk(6%, 0%, 21%, 26%)

Oklch

oklch(77.8% 0.056 121.3)

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

#BBA072

Ginger · Tan · Warm Sun

HEX

#BBA072

RGB

rgb(187, 160, 114)

HSL

hsl(38, 35%, 59%)

HSB

hsb(38, 39%, 73%)

CMYK

cmyk(0%, 14%, 39%, 27%)

Oklch

oklch(71.9% 0.070 80.5)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E44A1B

Vermilion · Chocolate · Passion Red

HEX

#E44A1B

RGB

rgb(228, 74, 27)

HSL

hsl(14, 79%, 50%)

HSB

hsb(14, 88%, 89%)

CMYK

cmyk(0%, 68%, 88%, 11%)

Oklch

oklch(62.1% 0.198 36.1)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DFE4D1

D7D2E5

Analogous

E5E0D2

DFE4D1

D6E5D2

Triadic

DFE4D1

D2E0E5

E5D2E0

Split-Comp.

DFE4D1

D2D6E5

E0D2E5

Tetradic

DFE4D1

D2E5E0

D7D2E5

E5D2D6

Contrast Matrix WCAG 2.1 Contrast

DFE4D1	8AC8B3	B1BD95	BBA072	E44A1B
—	1.5 Fail	1.5 Fail	1.9 Fail	3.1 AA Large
1.5 Fail	—	1.0 Fail	1.3 Fail	2.1 Fail
1.5 Fail	1.0 Fail	—	1.3 Fail	2.0 Fail
1.9 Fail	1.3 Fail	1.3 Fail	—	1.6 Fail
3.1 AA Large	2.1 Fail	2.0 Fail	1.6 Fail	—

White BG

1.3Fail

1.9Fail

2.0Fail

2.5Fail

4.0AA Large

Black BG

16.2AAA

11.0AAA

10.6AAA

8.4AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E1D6

A5A5B8

B6B69F

AFAF7D

A1A026

Deuteranopia

E1E1D7

A19DB9

B6B5A1

B1B380

AAB629

Tritanopia

DFD9DA

8DBCBD

B2A6A8

BA8688

DC2F31

Achromatopsia

E0E0E0

B3B3B3

B5B5B5

A3A3A3

737373

Shades & Tints Shades & Tints

#DFE4D1

Dark

Light

#8AC8B3

Dark

Light

#B1BD95

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dfe4d1;
  --color-2: #8ac8b3;
  --color-3: #b1bd95;
  --color-4: #bba072;
  --color-5: #e44a1b;
}

SCSS

$color-1: #dfe4d1;
$color-2: #8ac8b3;
$color-3: #b1bd95;
$color-4: #bba072;
$color-5: #e44a1b;

TAILWIND

colors: {
  'brand-1': '#dfe4d1',
  'brand-2': '#8ac8b3',
  'brand-3': '#b1bd95',
  'brand-4': '#bba072',
  'brand-5': '#e44a1b',
}

RGB Array

[223, 228, 209], [138, 200, 179], [177, 189, 149], [187, 160, 114], [228, 74, 27]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DFE4D1, #8AC8B3, #B1BD95, #BBA072, #E44A1B 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: #dfe4d1; --color-2: #8ac8b3; --color-3: #b1bd95; --color-4: #bba072; --color-5: #e44a1b. 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