← Back to Editor

#424D40 · #DD3C3C · #FFEACE · #574D3C · #30392D

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

#424D40

Celadon · DarkSlateGray · Charcoal

HEX
#424D40
RGB
rgb(66, 77, 64)
HSL
hsl(111, 9%, 28%)
HSB
hsb(111, 17%, 30%)
CMYK
cmyk(14%, 0%, 17%, 70%)
Oklch
oklch(40.6% 0.026 140.8)

Traditional「Celadon」· Paint「Charcoal」· Creative Midnight Shadow

#DD3C3C

Vermilion · Crimson · Passion Red

HEX
#DD3C3C
RGB
rgb(221, 60, 60)
HSL
hsl(0, 70%, 55%)
HSB
hsb(0, 73%, 87%)
CMYK
cmyk(0%, 73%, 73%, 13%)
Oklch
oklch(59.8% 0.198 25.5)

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

#FFEACE

Goose Yellow · Bisque · Peach Orange

HEX
#FFEACE
RGB
rgb(255, 234, 206)
HSL
hsl(34, 100%, 90%)
HSB
hsb(34, 19%, 100%)
CMYK
cmyk(0%, 8%, 19%, 0%)
Oklch
oklch(94.7% 0.043 75.1)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#574D3C

Ochre · DarkOliveGreen · Amber Brown

HEX
#574D3C
RGB
rgb(87, 77, 60)
HSL
hsl(38, 18%, 29%)
HSB
hsb(38, 31%, 34%)
CMYK
cmyk(0%, 11%, 31%, 66%)
Oklch
oklch(42.5% 0.030 80.9)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

#30392D

Celadon · DarkSlateGray · Dark Green

HEX
#30392D
RGB
rgb(48, 57, 45)
HSL
hsl(105, 12%, 20%)
HSB
hsb(105, 21%, 22%)
CMYK
cmyk(16%, 0%, 21%, 78%)
Oklch
oklch(33.2% 0.024 137.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

424D40
4C414E

Analogous

494E41
424D40
414E45

Triadic

424D40
41434E
4E4143

Split-Comp.

424D40
45414E
4E4149

Tetradic

424D40
41494E
4C414E
4E4541

Contrast Matrix WCAG 2.1 Contrast

424D40
DD3C3C
FFEACE
574D3C
30392D
—
2.0
Fail
7.6
AAA
1.1
Fail
1.4
Fail
2.0
Fail
—
3.7
AA Large
1.9
Fail
2.7
Fail
7.6
AAA
3.7
AA Large
—
7.1
AAA
10.2
AAA
1.1
Fail
1.9
Fail
7.1
AAA
—
1.4
Fail
1.4
Fail
2.7
Fail
10.2
AAA
1.4
Fail
—
White BG
8.9AAA
4.4AA Large
1.2Fail
8.3AAA
12.0AAA
Black BG
2.4Fail
4.8AA
17.9AAA
2.5Fail
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

474743
97963C
F6F6D5
535340
343430

Deuteranopia

464544
A1AD3C
F7F9D6
535441
333331

Tritanopia

434646
D53C3C
FEDADB
564344
303233

Achromatopsia

484848
6C6C6C
EDEDED
4E4E4E
353535

Shades & Tints Shades & Tints

#424D40

Dark
Light

#DD3C3C

Dark
Light

#FFEACE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #424d40;
  --color-2: #dd3c3c;
  --color-3: #ffeace;
  --color-4: #574d3c;
  --color-5: #30392d;
}

SCSS

$color-1: #424d40;
$color-2: #dd3c3c;
$color-3: #ffeace;
$color-4: #574d3c;
$color-5: #30392d;

TAILWIND

colors: {
  'brand-1': '#424d40',
  'brand-2': '#dd3c3c',
  'brand-3': '#ffeace',
  'brand-4': '#574d3c',
  'brand-5': '#30392d',
}

RGB Array

[66, 77, 64], [221, 60, 60], [255, 234, 206], [87, 77, 60], [48, 57, 45]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #424D40, #DD3C3C, #FFEACE, #574D3C, #30392D 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: #424d40; --color-2: #dd3c3c; --color-3: #ffeace; --color-4: #574d3c; --color-5: #30392d. 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