← Back to Editor

#D2542E · #E1A834 · #24151C · #8A9843 · #526E62

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 LibraryData Visualization

Color Details Color Details

#D2542E

Vermilion · Chocolate · Passion Red

HEX
#D2542E
RGB
rgb(210, 84, 46)
HSL
hsl(14, 65%, 50%)
HSB
hsb(14, 78%, 82%)
CMYK
cmyk(0%, 60%, 78%, 18%)
Oklch
oklch(60.5% 0.168 37.0)

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

#E1A834

Ginger · GoldenRod · Sunflower

HEX
#E1A834
RGB
rgb(225, 168, 52)
HSL
hsl(40, 74%, 54%)
HSB
hsb(40, 77%, 88%)
CMYK
cmyk(0%, 25%, 77%, 12%)
Oklch
oklch(76.6% 0.142 80.7)

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

#24151C

Dark Violet · Black · Raspberry

HEX
#24151C
RGB
rgb(36, 21, 28)
HSL
hsl(332, 26%, 11%)
HSB
hsb(332, 42%, 14%)
CMYK
cmyk(0%, 42%, 22%, 86%)
Oklch
oklch(21.9% 0.027 350.1)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#8A9843

Grass Green · Gray · Olive Green

HEX
#8A9843
RGB
rgb(138, 152, 67)
HSL
hsl(70, 39%, 43%)
HSB
hsb(70, 56%, 60%)
CMYK
cmyk(9%, 0%, 56%, 40%)
Oklch
oklch(65.0% 0.111 117.4)

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

#526E62

Mineral Blue · DimGray · Forest Green

HEX
#526E62
RGB
rgb(82, 110, 98)
HSL
hsl(154, 15%, 38%)
HSB
hsb(154, 25%, 43%)
CMYK
cmyk(25%, 0%, 11%, 57%)
Oklch
oklch(51.2% 0.038 166.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2542E
2DACD2

Analogous

D22D59
D2542E
D2A62D

Triadic

D2542E
2DD253
532DD2

Split-Comp.

D2542E
2DD2A6
2D59D2

Tetradic

D2542E
59D22D
2DACD2
A62DD2

Contrast Matrix WCAG 2.1 Contrast

D2542E
E1A834
24151C
8A9843
526E62
—
2.0
Fail
4.2
AA Large
1.3
Fail
1.3
Fail
2.0
Fail
—
8.2
AAA
1.5
Fail
2.6
Fail
4.2
AA Large
8.2
AAA
—
5.5
AA
3.1
AA Large
1.3
Fail
1.5
Fail
5.5
AA
—
1.8
Fail
1.3
Fail
2.6
Fail
3.1
AA Large
1.8
Fail
—
White BG
4.2AA Large
2.1Fail
17.5AAA
3.2AA Large
5.6AA
Black BG
5.0AA
9.9AAA
1.2Fail
6.7AA
3.8AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9A37
C8C850
1E1D1A
909058
5E5E65

Deuteranopia

A3AC39
CCD057
1E201A
8F8E5D
5D5A66

Tritanopia

CC3E40
DE666B
231919
8B686B
536768

Achromatopsia

757575
ACACAC
1A1A1A
8A8A8A
646464

Shades & Tints Shades & Tints

#D2542E

Dark
Light

#E1A834

Dark
Light

#24151C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2542e;
  --color-2: #e1a834;
  --color-3: #24151c;
  --color-4: #8a9843;
  --color-5: #526e62;
}

SCSS

$color-1: #d2542e;
$color-2: #e1a834;
$color-3: #24151c;
$color-4: #8a9843;
$color-5: #526e62;

TAILWIND

colors: {
  'brand-1': '#d2542e',
  'brand-2': '#e1a834',
  'brand-3': '#24151c',
  'brand-4': '#8a9843',
  'brand-5': '#526e62',
}

RGB Array

[210, 84, 46], [225, 168, 52], [36, 21, 28], [138, 152, 67], [82, 110, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2542E, #E1A834, #24151C, #8A9843, #526E62 is ideal for: tech websites, dark mode UIs, game UIs, 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: #d2542e; --color-2: #e1a834; --color-3: #24151c; --color-4: #8a9843; --color-5: #526e62. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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