#878787 + #DAE0C3 + #E4F5AE + #D4F75E + #BEED24 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#878787

Ash · Gray · Warm Gray

HEX

#878787

RGB

rgb(135, 135, 135)

HSL

hsl(0, 0%, 53%)

HSB

hsb(0, 0%, 53%)

CMYK

cmyk(0%, 0%, 0%, 47%)

Oklch

oklch(62.3% 0.000 89.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

#DAE0C3

Willow Green · LightGray · Mint Green

HEX

#DAE0C3

RGB

rgb(218, 224, 195)

HSL

hsl(72, 32%, 82%)

HSB

hsb(72, 13%, 88%)

CMYK

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

Oklch

oklch(89.4% 0.039 116.7)

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

#E4F5AE

Willow Green · Wheat · Mint Green

HEX

#E4F5AE

RGB

rgb(228, 245, 174)

HSL

hsl(74, 78%, 82%)

HSB

hsb(74, 29%, 96%)

CMYK

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

Oklch

oklch(94.1% 0.093 119.2)

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

#D4F75E

Willow Green · Khaki · Apple Green

HEX

#D4F75E

RGB

rgb(212, 247, 94)

HSL

hsl(74, 91%, 67%)

HSB

hsb(74, 62%, 97%)

CMYK

cmyk(14%, 0%, 62%, 3%)

Oklch

oklch(92.2% 0.180 121.0)

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

#BEED24

Grass Green · GreenYellow · Olive Green

HEX

#BEED24

RGB

rgb(190, 237, 36)

HSL

hsl(74, 85%, 54%)

HSB

hsb(74, 85%, 93%)

CMYK

cmyk(20%, 0%, 85%, 7%)

Oklch

oklch(88.2% 0.209 123.3)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

878787

Analogous

878787

Triadic

878787

Split-Comp.

878787

Tetradic

878787

Contrast Matrix WCAG 2.1 Contrast

878787	DAE0C3	E4F5AE	D4F75E	BEED24
—	2.6 Fail	3.1 AA Large	3.0 Fail	2.6 Fail
2.6 Fail	—	1.2 Fail	1.1 Fail	1.0 Fail
3.1 AA Large	1.2 Fail	—	1.0 Fail	1.2 Fail
3.0 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
2.6 Fail	1.0 Fail	1.2 Fail	1.1 Fail	—

White BG

3.6AA Large

1.4Fail

1.2Fail

1.4Fail

Black BG

5.8AA

15.4AAA

18.0AAA

17.3AAA

15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

878787

DDDDCA

EBECBF

E3E383

D2D355

Deuteranopia

878787

DCDCCC

EAE9C3

E1DE8C

D0CC60

Tritanopia

878787

DAD0D1

E5CDD0

D6A0A7

C07B83

Achromatopsia

878787

DBDBDB

E8E8E8

DBDBDB

C8C8C8

Shades & Tints Shades & Tints

#878787

Dark

Light

#DAE0C3

Dark

Light

#E4F5AE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #878787;
  --color-2: #dae0c3;
  --color-3: #e4f5ae;
  --color-4: #d4f75e;
  --color-5: #beed24;
}

SCSS

$color-1: #878787;
$color-2: #dae0c3;
$color-3: #e4f5ae;
$color-4: #d4f75e;
$color-5: #beed24;

TAILWIND

colors: {
  'brand-1': '#878787',
  'brand-2': '#dae0c3',
  'brand-3': '#e4f5ae',
  'brand-4': '#d4f75e',
  'brand-5': '#beed24',
}

RGB Array

[135, 135, 135], [218, 224, 195], [228, 245, 174], [212, 247, 94], [190, 237, 36]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #878787, #DAE0C3, #E4F5AE, #D4F75E, #BEED24 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: #878787; --color-2: #dae0c3; --color-3: #e4f5ae; --color-4: #d4f75e; --color-5: #beed24. 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