← Back to Editor

#E1AA2C · #D6496C · #212818 · #9FB747 · #D5E87D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E1AA2C

Ginger · GoldenRod · Sunflower

HEX
#E1AA2C
RGB
rgb(225, 170, 44)
HSL
hsl(42, 75%, 53%)
HSB
hsb(42, 80%, 88%)
CMYK
cmyk(0%, 24%, 80%, 12%)
Oklch
oklch(76.9% 0.146 82.9)

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

#D6496C

Vermilion · MediumVioletRed · Passion Red

HEX
#D6496C
RGB
rgb(214, 73, 108)
HSL
hsl(345, 63%, 56%)
HSB
hsb(345, 66%, 84%)
CMYK
cmyk(0%, 66%, 50%, 16%)
Oklch
oklch(60.9% 0.177 9.2)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#212818

Grass Green · Black · Dark Green

HEX
#212818
RGB
rgb(33, 40, 24)
HSL
hsl(86, 25%, 13%)
HSB
hsb(86, 40%, 16%)
CMYK
cmyk(18%, 0%, 40%, 84%)
Oklch
oklch(26.5% 0.030 127.5)

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

#9FB747

Grass Green · GoldenRod · Olive Green

HEX
#9FB747
RGB
rgb(159, 183, 71)
HSL
hsl(73, 44%, 50%)
HSB
hsb(73, 61%, 72%)
CMYK
cmyk(13%, 0%, 61%, 28%)
Oklch
oklch(73.9% 0.140 120.2)

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

#D5E87D

Willow Green · Khaki · Apple Green

HEX
#D5E87D
RGB
rgb(213, 232, 125)
HSL
hsl(71, 70%, 70%)
HSB
hsb(71, 46%, 91%)
CMYK
cmyk(8%, 0%, 46%, 9%)
Oklch
oklch(89.4% 0.134 117.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E1AA2C
2D63E1

Analogous

E1512D
E1AA2C
BDE12D

Triadic

E1AA2C
2DE1AB
AB2DE1

Split-Comp.

E1AA2C
2DBDE1
512DE1

Tetradic

E1AA2C
2DE151
2D63E1
E12DBD

Contrast Matrix WCAG 2.1 Contrast

E1AA2C
D6496C
212818
9FB747
D5E87D
—
2.0
Fail
7.2
AAA
1.1
Fail
1.6
Fail
2.0
Fail
—
3.6
AA Large
1.9
Fail
3.1
AA Large
7.2
AAA
3.6
AA Large
—
6.8
AA
11.3
AAA
1.1
Fail
1.9
Fail
6.8
AA
—
1.7
Fail
1.6
Fail
3.1
AA Large
11.3
AAA
1.7
Fail
—
White BG
2.1Fail
4.2AA Large
15.2AAA
2.2Fail
1.3Fail
Black BG
10.0AAA
5.0AA
1.4Fail
9.3AAA
15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C94A
999864
24241C
A9AA62
DDDD97

Deuteranopia

CCD152
A1AC62
24231D
A8A669
DCDB9D

Tritanopia

DE6368
CF5D5B
211F20
A0777C
D6ABB0

Achromatopsia

ACACAC
777777
242424
A3A3A3
D6D6D6

Shades & Tints Shades & Tints

#E1AA2C

Dark
Light

#D6496C

Dark
Light

#212818

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e1aa2c;
  --color-2: #d6496c;
  --color-3: #212818;
  --color-4: #9fb747;
  --color-5: #d5e87d;
}

SCSS

$color-1: #e1aa2c;
$color-2: #d6496c;
$color-3: #212818;
$color-4: #9fb747;
$color-5: #d5e87d;

TAILWIND

colors: {
  'brand-1': '#e1aa2c',
  'brand-2': '#d6496c',
  'brand-3': '#212818',
  'brand-4': '#9fb747',
  'brand-5': '#d5e87d',
}

RGB Array

[225, 170, 44], [214, 73, 108], [33, 40, 24], [159, 183, 71], [213, 232, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E1AA2C, #D6496C, #212818, #9FB747, #D5E87D is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e1aa2c; --color-2: #d6496c; --color-3: #212818; --color-4: #9fb747; --color-5: #d5e87d. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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