← Back to Editor

#E74A55 · #323D41 · #555B51 · #9D9872 · #EEDC94

space

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E74A55

Vermilion · Tomato · Passion Red

HEX
#E74A55
RGB
rgb(231, 74, 85)
HSL
hsl(356, 77%, 60%)
HSB
hsb(356, 68%, 91%)
CMYK
cmyk(0%, 68%, 63%, 9%)
Oklch
oklch(63.2% 0.193 20.8)

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

#323D41

Slate Blue · DarkSlateGray · Peacock Green

HEX
#323D41
RGB
rgb(50, 61, 65)
HSL
hsl(196, 13%, 23%)
HSB
hsb(196, 23%, 25%)
CMYK
cmyk(23%, 6%, 0%, 75%)
Oklch
oklch(35.2% 0.016 221.8)

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

#555B51

Ink Gray · DimGray · Charcoal

HEX
#555B51
RGB
rgb(85, 91, 81)
HSL
hsl(96, 6%, 34%)
HSB
hsb(96, 11%, 36%)
CMYK
cmyk(7%, 0%, 11%, 64%)
Oklch
oklch(46.3% 0.018 132.6)

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

#9D9872

Autumn Sage · Gray · Sunflower

HEX
#9D9872
RGB
rgb(157, 152, 114)
HSL
hsl(53, 18%, 53%)
HSB
hsb(53, 27%, 62%)
CMYK
cmyk(0%, 3%, 27%, 38%)
Oklch
oklch(67.4% 0.053 101.4)

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

#EEDC94

Goose Yellow · Khaki · Lemon Cream

HEX
#EEDC94
RGB
rgb(238, 220, 148)
HSL
hsl(48, 73%, 76%)
HSB
hsb(48, 38%, 93%)
CMYK
cmyk(0%, 8%, 38%, 7%)
Oklch
oklch(89.3% 0.093 95.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E74A55
4AE8DD

Analogous

E84AA3
E74A55
E88F4A

Triadic

E74A55
55E84A
4A55E8

Split-Comp.

E74A55
4AE88F
4AA3E8

Tetradic

E74A55
A3E84A
4AE8DD
8F4AE8

Contrast Matrix WCAG 2.1 Contrast

E74A55
323D41
555B51
9D9872
EEDC94
—
2.9
Fail
1.8
Fail
1.3
Fail
2.8
Fail
2.9
Fail
—
1.6
Fail
3.8
AA Large
8.1
AAA
1.8
Fail
1.6
Fail
—
2.4
Fail
5.1
AA
1.3
Fail
3.8
AA Large
2.4
Fail
—
2.1
Fail
2.8
Fail
8.1
AAA
5.1
AA
2.1
Fail
—
White BG
3.8AA Large
11.2AAA
7.0AA
2.9Fail
1.4Fail
Black BG
5.5AA
1.9Fail
3.0AA Large
7.2AAA
15.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A252
373740
585853
9B9B7B
E6E6A5

Deuteranopia

ACB852
363540
575754
9B9C7D
E7E9AA

Tritanopia

DF5050
333F3F
555556
9D8284
EDB3B6

Achromatopsia

7A7A7A
3A3A3A
585858
959595
D9D9D9

Shades & Tints Shades & Tints

#E74A55

Dark
Light

#323D41

Dark
Light

#555B51

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e74a55;
  --color-2: #323d41;
  --color-3: #555b51;
  --color-4: #9d9872;
  --color-5: #eedc94;
}

SCSS

$color-1: #e74a55;
$color-2: #323d41;
$color-3: #555b51;
$color-4: #9d9872;
$color-5: #eedc94;

TAILWIND

colors: {
  'brand-1': '#e74a55',
  'brand-2': '#323d41',
  'brand-3': '#555b51',
  'brand-4': '#9d9872',
  'brand-5': '#eedc94',
}

RGB Array

[231, 74, 85], [50, 61, 65], [85, 91, 81], [157, 152, 114], [238, 220, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #E74A55, #323D41, #555B51, #9D9872, #EEDC94 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: #e74a55; --color-2: #323d41; --color-3: #555b51; --color-4: #9d9872; --color-5: #eedc94. 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 space-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