← Back to Editor

#ED2121 · #2A9A6D · #E3E68C · #08382C · #D6C44F

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#ED2121

Vermilion · Crimson · Passion Red

HEX
#ED2121
RGB
rgb(237, 33, 33)
HSL
hsl(0, 85%, 53%)
HSB
hsb(0, 86%, 93%)
CMYK
cmyk(0%, 86%, 86%, 7%)
Oklch
oklch(60.5% 0.233 27.9)

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

#2A9A6D

Mineral Blue · SeaGreen · Forest Green

HEX
#2A9A6D
RGB
rgb(42, 154, 109)
HSL
hsl(156, 57%, 38%)
HSB
hsb(156, 73%, 60%)
CMYK
cmyk(73%, 0%, 29%, 40%)
Oklch
oklch(61.3% 0.121 161.7)

Traditional「Mineral Blue」· Paint「Forest Green」· Creative Blush Sunrise

#E3E68C

Fresh Green · Khaki · Sunflower

HEX
#E3E68C
RGB
rgb(227, 230, 140)
HSL
hsl(62, 64%, 73%)
HSB
hsb(62, 39%, 90%)
CMYK
cmyk(1%, 0%, 39%, 10%)
Oklch
oklch(90.3% 0.113 110.1)

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

#08382C

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#08382C
RGB
rgb(8, 56, 44)
HSL
hsl(165, 75%, 13%)
HSB
hsb(165, 86%, 22%)
CMYK
cmyk(86%, 0%, 21%, 78%)
Oklch
oklch(30.6% 0.054 171.8)

Traditional「Mineral Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#D6C44F

Autumn Sage · SandyBrown · Sunflower

HEX
#D6C44F
RGB
rgb(214, 196, 79)
HSL
hsl(52, 62%, 57%)
HSB
hsb(52, 63%, 84%)
CMYK
cmyk(0%, 8%, 63%, 16%)
Oklch
oklch(81.4% 0.137 100.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

ED2121
21EDED

Analogous

ED2187
ED2121
ED8721

Triadic

ED2121
21ED21
2121ED

Split-Comp.

ED2121
21ED87
2187ED

Tetradic

ED2121
87ED21
21EDED
8721ED

Contrast Matrix WCAG 2.1 Contrast

ED2121
2A9A6D
E3E68C
08382C
D6C44F
—
1.2
Fail
3.3
AA Large
3.0
AA Large
2.5
Fail
1.2
Fail
—
2.7
Fail
3.7
AA Large
2.0
Fail
3.3
AA Large
2.7
Fail
—
9.9
AAA
1.3
Fail
3.0
AA Large
3.7
AA Large
9.9
AAA
—
7.4
AAA
2.5
Fail
2.0
Fail
1.3
Fail
7.4
AAA
—
White BG
4.3AA Large
3.5AA Large
1.3Fail
13.0AAA
1.8Fail
Black BG
4.8AA
5.9AA
16.0AAA
1.6Fail
11.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

959321
5A5C78
E4E4A2
1D1D2F
CECE6B

Deuteranopia

A1B021
544C7B
E4E4A7
1A1630
CFD172

Tritanopia

E32121
308082
E3B3B7
0A3132
D58287

Achromatopsia

5E5E5E
737373
DBDBDB
282828
BCBCBC

Shades & Tints Shades & Tints

#ED2121

Dark
Light

#2A9A6D

Dark
Light

#E3E68C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ed2121;
  --color-2: #2a9a6d;
  --color-3: #e3e68c;
  --color-4: #08382c;
  --color-5: #d6c44f;
}

SCSS

$color-1: #ed2121;
$color-2: #2a9a6d;
$color-3: #e3e68c;
$color-4: #08382c;
$color-5: #d6c44f;

TAILWIND

colors: {
  'brand-1': '#ed2121',
  'brand-2': '#2a9a6d',
  'brand-3': '#e3e68c',
  'brand-4': '#08382c',
  'brand-5': '#d6c44f',
}

RGB Array

[237, 33, 33], [42, 154, 109], [227, 230, 140], [8, 56, 44], [214, 196, 79]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #ED2121, #2A9A6D, #E3E68C, #08382C, #D6C44F is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ed2121; --color-2: #2a9a6d; --color-3: #e3e68c; --color-4: #08382c; --color-5: #d6c44f. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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