← Back to Editor

#EDCA3B · #E2DA66 · #BAD27C · #89AD8E · #6E838F

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

#EDCA3B

Ginger · GoldenRod · Sunflower

HEX
#EDCA3B
RGB
rgb(237, 202, 59)
HSL
hsl(48, 83%, 58%)
HSB
hsb(48, 75%, 93%)
CMYK
cmyk(0%, 15%, 75%, 7%)
Oklch
oklch(84.6% 0.156 94.6)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#E2DA66

Fresh Green · Khaki · Sunflower

HEX
#E2DA66
RGB
rgb(226, 218, 102)
HSL
hsl(56, 68%, 64%)
HSB
hsb(56, 55%, 89%)
CMYK
cmyk(0%, 4%, 55%, 11%)
Oklch
oklch(87.2% 0.138 105.3)

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

#BAD27C

Willow Green · Tan · Apple Green

HEX
#BAD27C
RGB
rgb(186, 210, 124)
HSL
hsl(77, 49%, 65%)
HSB
hsb(77, 41%, 82%)
CMYK
cmyk(11%, 0%, 41%, 18%)
Oklch
oklch(82.6% 0.114 121.7)

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

#89AD8E

Celadon · DarkSeaGreen · Apple Green

HEX
#89AD8E
RGB
rgb(137, 173, 142)
HSL
hsl(128, 18%, 61%)
HSB
hsb(128, 21%, 68%)
CMYK
cmyk(21%, 0%, 18%, 32%)
Oklch
oklch(71.2% 0.059 148.8)

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

#6E838F

Slate Blue · SlateGray · Navy Blue

HEX
#6E838F
RGB
rgb(110, 131, 143)
HSL
hsl(202, 13%, 50%)
HSB
hsb(202, 23%, 56%)
CMYK
cmyk(23%, 8%, 0%, 44%)
Oklch
oklch(59.7% 0.031 233.0)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EDCA3B
3B5FED

Analogous

ED703B
EDCA3B
B7ED3B

Triadic

EDCA3B
3BEDC9
C93BED

Split-Comp.

EDCA3B
3BB7ED
703BED

Tetradic

EDCA3B
3BED70
3B5FED
ED3BB7

Contrast Matrix WCAG 2.1 Contrast

EDCA3B
E2DA66
BAD27C
89AD8E
6E838F
—
1.1
Fail
1.0
Fail
1.6
Fail
2.5
Fail
1.1
Fail
—
1.1
Fail
1.7
Fail
2.7
Fail
1.0
Fail
1.1
Fail
—
1.5
Fail
2.4
Fail
1.6
Fail
1.7
Fail
1.5
Fail
—
1.6
Fail
2.5
Fail
2.7
Fail
2.4
Fail
1.6
Fail
—
White BG
1.6Fail
1.5Fail
1.7Fail
2.5Fail
4.0AA Large
Black BG
13.1AAA
14.5AAA
12.6AAA
8.4AAA
5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DEDE5E
DFDE82
C4C591
999996
77778C

Deuteranopia

E0E266
DFE089
C3C196
979497
76748B

Tritanopia

EB797F
E2989D
BBA1A5
8B9B9D
6F8A89

Achromatopsia

C4C4C4
CFCFCF
C1C1C1
9F9F9F
7E7E7E

Shades & Tints Shades & Tints

#EDCA3B

Dark
Light

#E2DA66

Dark
Light

#BAD27C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #edca3b;
  --color-2: #e2da66;
  --color-3: #bad27c;
  --color-4: #89ad8e;
  --color-5: #6e838f;
}

SCSS

$color-1: #edca3b;
$color-2: #e2da66;
$color-3: #bad27c;
$color-4: #89ad8e;
$color-5: #6e838f;

TAILWIND

colors: {
  'brand-1': '#edca3b',
  'brand-2': '#e2da66',
  'brand-3': '#bad27c',
  'brand-4': '#89ad8e',
  'brand-5': '#6e838f',
}

RGB Array

[237, 202, 59], [226, 218, 102], [186, 210, 124], [137, 173, 142], [110, 131, 143]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EDCA3B, #E2DA66, #BAD27C, #89AD8E, #6E838F 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: #edca3b; --color-2: #e2da66; --color-3: #bad27c; --color-4: #89ad8e; --color-5: #6e838f. 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