← Back to Editor

#FFAF7D · #E64B1F · #8E0000 · #3D2475 · #22003D

dark

A 5-color dark 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

#FFAF7D

Apricot · LightSalmon · Warm Sun

HEX
#FFAF7D
RGB
rgb(255, 175, 125)
HSL
hsl(23, 100%, 75%)
HSB
hsb(23, 51%, 100%)
CMYK
cmyk(0%, 31%, 51%, 0%)
Oklch
oklch(82.0% 0.114 52.5)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#E64B1F

Vermilion · Chocolate · Passion Red

HEX
#E64B1F
RGB
rgb(230, 75, 31)
HSL
hsl(13, 80%, 51%)
HSB
hsb(13, 87%, 90%)
CMYK
cmyk(0%, 67%, 87%, 10%)
Oklch
oklch(62.5% 0.199 35.6)

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

#8E0000

Vermilion · DarkRed · Wine Red

HEX
#8E0000
RGB
rgb(142, 0, 0)
HSL
hsl(0, 100%, 28%)
HSB
hsb(0, 100%, 56%)
CMYK
cmyk(0%, 100%, 100%, 44%)
Oklch
oklch(40.6% 0.167 29.2)

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

#3D2475

Deep Indigo · DarkSlateBlue · Prussian Blue

HEX
#3D2475
RGB
rgb(61, 36, 117)
HSL
hsl(259, 53%, 30%)
HSB
hsb(259, 69%, 46%)
CMYK
cmyk(48%, 69%, 0%, 54%)
Oklch
oklch(34.2% 0.131 292.2)

Traditional「Deep Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#22003D

Royal Purple · MidnightBlue · Dark Purple

HEX
#22003D
RGB
rgb(34, 0, 61)
HSL
hsl(273, 100%, 12%)
HSB
hsb(273, 100%, 24%)
CMYK
cmyk(44%, 100%, 0%, 76%)
Oklch
oklch(20.4% 0.107 303.5)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFAF7D
80CEFF

Analogous

FF808E
FFAF7D
FFF080

Triadic

FFAF7D
80FFB0
B080FF

Split-Comp.

FFAF7D
80FFF0
808EFF

Tetradic

FFAF7D
8EFF80
80CEFF
F080FF

Contrast Matrix WCAG 2.1 Contrast

FFAF7D
E64B1F
8E0000
3D2475
22003D
—
2.2
Fail
5.4
AA
6.8
AA
10.3
AAA
2.2
Fail
—
2.5
Fail
3.2
AA Large
4.7
AA
5.4
AA
2.5
Fail
—
1.3
Fail
1.9
Fail
6.8
AA
3.2
AA Large
1.3
Fail
—
1.5
Fail
10.3
AAA
4.7
AA
1.9
Fail
1.5
Fail
—
White BG
1.8Fail
3.9AA Large
9.8AAA
12.3AAA
18.5AAA
Black BG
11.7AAA
5.4AA
2.2Fail
1.7Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDC89
A3A12A
514F00
323261
13132E

Deuteranopia

E1E78C
ACB82C
596300
34355D
15182B

Tritanopia

FB9395
DE3234
870000
3C524F
202320

Achromatopsia

C1C1C1
747474
2A2A2A
353535
111111

Shades & Tints Shades & Tints

#FFAF7D

Dark
Light

#E64B1F

Dark
Light

#8E0000

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffaf7d;
  --color-2: #e64b1f;
  --color-3: #8e0000;
  --color-4: #3d2475;
  --color-5: #22003d;
}

SCSS

$color-1: #ffaf7d;
$color-2: #e64b1f;
$color-3: #8e0000;
$color-4: #3d2475;
$color-5: #22003d;

TAILWIND

colors: {
  'brand-1': '#ffaf7d',
  'brand-2': '#e64b1f',
  'brand-3': '#8e0000',
  'brand-4': '#3d2475',
  'brand-5': '#22003d',
}

RGB Array

[255, 175, 125], [230, 75, 31], [142, 0, 0], [61, 36, 117], [34, 0, 61]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This dark-style palette of #FFAF7D, #E64B1F, #8E0000, #3D2475, #22003D is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, 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: #ffaf7d; --color-2: #e64b1f; --color-3: #8e0000; --color-4: #3d2475; --color-5: #22003d. 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 dark-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