#ADD8A0 + #E9D477 + #ECA780 + #E08584 + #A87C89 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#ADD8A0

Celadon · LightGreen · Apple Green

HEX

#ADD8A0

RGB

rgb(173, 216, 160)

HSL

hsl(106, 42%, 74%)

HSB

hsb(106, 26%, 85%)

CMYK

cmyk(20%, 0%, 26%, 15%)

Oklch

oklch(83.7% 0.089 138.5)

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

#E9D477

Ginger · Khaki · Sunflower

HEX

#E9D477

RGB

rgb(233, 212, 119)

HSL

hsl(49, 72%, 69%)

HSB

hsb(49, 49%, 91%)

CMYK

cmyk(0%, 9%, 49%, 9%)

Oklch

oklch(86.8% 0.116 96.9)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#ECA780

Apricot · DarkSalmon · Warm Sun

HEX

#ECA780

RGB

rgb(236, 167, 128)

HSL

hsl(22, 74%, 71%)

HSB

hsb(22, 46%, 93%)

CMYK

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

Oklch

oklch(78.5% 0.097 50.3)

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

#E08584

Peach Pink · LightCoral · Coral Red

HEX

#E08584

RGB

rgb(224, 133, 132)

HSL

hsl(1, 60%, 70%)

HSB

hsb(1, 41%, 88%)

CMYK

cmyk(0%, 41%, 41%, 12%)

Oklch

oklch(71.3% 0.112 20.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#A87C89

Dark Violet · Gray · Rose Pink

HEX

#A87C89

RGB

rgb(168, 124, 137)

HSL

hsl(342, 20%, 57%)

HSB

hsb(342, 26%, 66%)

CMYK

cmyk(0%, 26%, 18%, 34%)

Oklch

oklch(63.3% 0.057 359.4)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ADD8A0

CCA1D9

Analogous

CAD9A1

ADD8A0

A1D9B0

Triadic

ADD8A0

A1AED9

D9A1AE

Split-Comp.

ADD8A0

B0A1D9

D9A1CA

Tetradic

ADD8A0

A1CAD9

CCA1D9

D9B0A1

Contrast Matrix WCAG 2.1 Contrast

ADD8A0	E9D477	ECA780	E08584	A87C89
—	1.1 Fail	1.3 Fail	1.7 Fail	2.2 Fail
1.1 Fail	—	1.4 Fail	1.8 Fail	2.4 Fail
1.3 Fail	1.4 Fail	—	1.3 Fail	1.8 Fail
1.7 Fail	1.8 Fail	1.3 Fail	—	1.3 Fail
2.2 Fail	2.4 Fail	1.8 Fail	1.3 Fail	—

White BG

1.6Fail

1.5Fail

2.0Fail

2.7Fail

3.6AA Large

Black BG

13.1AAA

14.1AAA

10.4AAA

7.9AAA

5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C0C0AE

E0E08E

CECE89

B9B884

959586

Deuteranopia

BDBAB1

E1E393

D2D78C

BEC584

989B85

Tritanopia

AFB8BB

E89FA3

E99193

DB8484

A68383

Achromatopsia

C5C5C5

D0D0D0

B7B7B7

A0A0A0

8B8B8B

Shades & Tints Shades & Tints

#ADD8A0

Dark

Light

#E9D477

Dark

Light

#ECA780

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #add8a0;
  --color-2: #e9d477;
  --color-3: #eca780;
  --color-4: #e08584;
  --color-5: #a87c89;
}

SCSS

$color-1: #add8a0;
$color-2: #e9d477;
$color-3: #eca780;
$color-4: #e08584;
$color-5: #a87c89;

TAILWIND

colors: {
  'brand-1': '#add8a0',
  'brand-2': '#e9d477',
  'brand-3': '#eca780',
  'brand-4': '#e08584',
  'brand-5': '#a87c89',
}

RGB Array

[173, 216, 160], [233, 212, 119], [236, 167, 128], [224, 133, 132], [168, 124, 137]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ADD8A0, #E9D477, #ECA780, #E08584, #A87C89 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: #add8a0; --color-2: #e9d477; --color-3: #eca780; --color-4: #e08584; --color-5: #a87c89. 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