← Back to Editor

#E9E77C · #E4A27A · #DD537A · #B5788C · #7BC9AD

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#E9E77C

Fresh Green · Khaki · Sunflower

HEX
#E9E77C
RGB
rgb(233, 231, 124)
HSL
hsl(59, 71%, 70%)
HSB
hsb(59, 47%, 91%)
CMYK
cmyk(0%, 1%, 47%, 9%)
Oklch
oklch(90.8% 0.130 107.8)

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

#E4A27A

Apricot · DarkSalmon · Warm Sun

HEX
#E4A27A
RGB
rgb(228, 162, 122)
HSL
hsl(23, 66%, 69%)
HSB
hsb(23, 46%, 89%)
CMYK
cmyk(0%, 29%, 46%, 11%)
Oklch
oklch(76.7% 0.095 52.0)

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

#DD537A

Dark Violet · LightCoral · Rose Pink

HEX
#DD537A
RGB
rgb(221, 83, 122)
HSL
hsl(343, 67%, 60%)
HSB
hsb(343, 62%, 87%)
CMYK
cmyk(0%, 62%, 45%, 13%)
Oklch
oklch(63.5% 0.175 6.2)

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

#B5788C

Dark Violet · Gray · Rose Pink

HEX
#B5788C
RGB
rgb(181, 120, 140)
HSL
hsl(340, 29%, 59%)
HSB
hsb(340, 34%, 71%)
CMYK
cmyk(0%, 34%, 23%, 29%)
Oklch
oklch(64.2% 0.080 358.4)

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

#7BC9AD

Jade · MediumAquaMarine · Apple Green

HEX
#7BC9AD
RGB
rgb(123, 201, 173)
HSL
hsl(158, 42%, 64%)
HSB
hsb(158, 39%, 79%)
CMYK
cmyk(39%, 0%, 14%, 21%)
Oklch
oklch(77.7% 0.088 169.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9E77C
7C7EE9

Analogous

E9B17C
E9E77C
B4E97C

Triadic

E9E77C
7CE9E7
E77CE9

Split-Comp.

E9E77C
7CB4E9
B17CE9

Tetradic

E9E77C
7CE9B1
7C7EE9
E97CB4

Contrast Matrix WCAG 2.1 Contrast

E9E77C
E4A27A
DD537A
B5788C
7BC9AD
—
1.7
Fail
2.9
Fail
2.7
Fail
1.5
Fail
1.7
Fail
—
1.7
Fail
1.6
Fail
1.1
Fail
2.9
Fail
1.7
Fail
—
1.1
Fail
1.9
Fail
2.7
Fail
1.6
Fail
1.1
Fail
—
1.8
Fail
1.5
Fail
1.1
Fail
1.9
Fail
1.8
Fail
—
White BG
1.3Fail
2.2Fail
3.8AA Large
3.5AA Large
1.9Fail
Black BG
16.2AAA
9.7AAA
5.6AA
6.0AA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E896
C7C784
A1A071
9B9A87
9D9DB4

Deuteranopia

E8E89C
CBD086
A9B46E
9EA386
9892B5

Tritanopia

E9AAAF
E18B8D
D66967
B28383
7FB9BA

Achromatopsia

DBDBDB
B1B1B1
818181
8D8D8D
AEAEAE

Shades & Tints Shades & Tints

#E9E77C

Dark
Light

#E4A27A

Dark
Light

#DD537A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9e77c;
  --color-2: #e4a27a;
  --color-3: #dd537a;
  --color-4: #b5788c;
  --color-5: #7bc9ad;
}

SCSS

$color-1: #e9e77c;
$color-2: #e4a27a;
$color-3: #dd537a;
$color-4: #b5788c;
$color-5: #7bc9ad;

TAILWIND

colors: {
  'brand-1': '#e9e77c',
  'brand-2': '#e4a27a',
  'brand-3': '#dd537a',
  'brand-4': '#b5788c',
  'brand-5': '#7bc9ad',
}

RGB Array

[233, 231, 124], [228, 162, 122], [221, 83, 122], [181, 120, 140], [123, 201, 173]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E9E77C, #E4A27A, #DD537A, #B5788C, #7BC9AD 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: #e9e77c; --color-2: #e4a27a; --color-3: #dd537a; --color-4: #b5788c; --color-5: #7bc9ad. 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