#E9ED80 + #B9B076 + #77835E + #575B51 + #20CBEA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E9ED80

Fresh Green · Khaki · Sunflower

HEX

#E9ED80

RGB

rgb(233, 237, 128)

HSL

hsl(62, 75%, 72%)

HSB

hsb(62, 46%, 93%)

CMYK

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

Oklch

oklch(92.0% 0.133 110.6)

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

#B9B076

Autumn Sage · Tan · Sunflower

HEX

#B9B076

RGB

rgb(185, 176, 118)

HSL

hsl(52, 32%, 59%)

HSB

hsb(52, 36%, 73%)

CMYK

cmyk(0%, 5%, 36%, 27%)

Oklch

oklch(75.1% 0.078 100.5)

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

#77835E

Grass Green · DimGray · Olive Green

HEX

#77835E

RGB

rgb(119, 131, 94)

HSL

hsl(79, 16%, 44%)

HSB

hsb(79, 28%, 51%)

CMYK

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

Oklch

oklch(59.0% 0.056 122.7)

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

#575B51

Ink Gray · DimGray · Charcoal

HEX

#575B51

RGB

rgb(87, 91, 81)

HSL

hsl(84, 6%, 34%)

HSB

hsb(84, 11%, 36%)

CMYK

cmyk(4%, 0%, 11%, 64%)

Oklch

oklch(46.4% 0.017 124.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#20CBEA

Lake Blue · DeepSkyBlue · Lake Green

HEX

#20CBEA

RGB

rgb(32, 203, 234)

HSL

hsl(189, 83%, 52%)

HSB

hsb(189, 86%, 92%)

CMYK

cmyk(86%, 13%, 0%, 8%)

Oklch

oklch(77.6% 0.132 214.5)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9ED80

8682ED

Analogous

EDBB82

E9ED80

B4ED82

Triadic

E9ED80

82EAED

ED82EA

Split-Comp.

E9ED80

82B4ED

BB82ED

Tetradic

E9ED80

82EDBB

8682ED

ED82B4

Contrast Matrix WCAG 2.1 Contrast

E9ED80	B9B076	77835E	575B51	20CBEA
—	1.8 Fail	3.3 AA Large	5.6 AA	1.6 Fail
1.8 Fail	—	1.8 Fail	3.2 AA Large	1.1 Fail
3.3 AA Large	1.8 Fail	—	1.7 Fail	2.1 Fail
5.6 AA	3.2 AA Large	1.7 Fail	—	3.6 AA Large
1.6 Fail	1.1 Fail	2.1 Fail	3.6 AA Large	—

White BG

1.2Fail

2.2Fail

4.0AA Large

7.0AA

1.9Fail

Black BG

16.9AAA

9.5AAA

5.2AA

3.0AA Large

10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEB9A

B5B584

7C7C67

595953

6A6CE2

Deuteranopia

EBEAA1

B6B687

7C7B69

595854

6053E1

Tritanopia

E9AFB4

B98F92

786E70

575556

29DDDB

Achromatopsia

DFDFDF

ACACAC

7B7B7B

595959

9B9B9B

Shades & Tints Shades & Tints

#E9ED80

Dark

Light

#B9B076

Dark

Light

#77835E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9ed80;
  --color-2: #b9b076;
  --color-3: #77835e;
  --color-4: #575b51;
  --color-5: #20cbea;
}

SCSS

$color-1: #e9ed80;
$color-2: #b9b076;
$color-3: #77835e;
$color-4: #575b51;
$color-5: #20cbea;

TAILWIND

colors: {
  'brand-1': '#e9ed80',
  'brand-2': '#b9b076',
  'brand-3': '#77835e',
  'brand-4': '#575b51',
  'brand-5': '#20cbea',
}

RGB Array

[233, 237, 128], [185, 176, 118], [119, 131, 94], [87, 91, 81], [32, 203, 234]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E9ED80, #B9B076, #77835E, #575B51, #20CBEA is ideal for: corporate websites, product showcases, portfolios. 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: #e9ed80; --color-2: #b9b076; --color-3: #77835e; --color-4: #575b51; --color-5: #20cbea. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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