← Back to Editor

#DE0B0A · #DE5C0A · #DE980A · #6934BF · #070308

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

#DE0B0A

Vermilion · Red · Passion Red

HEX
#DE0B0A
RGB
rgb(222, 11, 10)
HSL
hsl(0, 91%, 45%)
HSB
hsb(0, 95%, 87%)
CMYK
cmyk(0%, 95%, 95%, 13%)
Oklch
oklch(56.8% 0.229 28.9)

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

#DE5C0A

Tangerine · Chocolate · Amber Brown

HEX
#DE5C0A
RGB
rgb(222, 92, 10)
HSL
hsl(23, 91%, 45%)
HSB
hsb(23, 95%, 87%)
CMYK
cmyk(0%, 59%, 95%, 13%)
Oklch
oklch(63.2% 0.180 44.3)

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

#DE980A

Ochre · GoldenRod · Honey Gold

HEX
#DE980A
RGB
rgb(222, 152, 10)
HSL
hsl(40, 91%, 45%)
HSB
hsb(40, 95%, 87%)
CMYK
cmyk(0%, 32%, 95%, 13%)
Oklch
oklch(73.1% 0.152 75.6)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#6934BF

Deep Indigo · SlateBlue · Violet

HEX
#6934BF
RGB
rgb(105, 52, 191)
HSL
hsl(263, 57%, 48%)
HSB
hsb(263, 73%, 75%)
CMYK
cmyk(45%, 73%, 0%, 25%)
Oklch
oklch(47.5% 0.203 294.9)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#070308

Dark Plum · Black · Dark Purple

HEX
#070308
RGB
rgb(7, 3, 8)
HSL
hsl(288, 45%, 2%)
HSB
hsb(288, 63%, 3%)
CMYK
cmyk(12%, 63%, 0%, 97%)
Oklch
oklch(11.1% 0.020 321.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DE0B0A
0ADBDB

Analogous

DB0A73
DE0B0A
DB730A

Triadic

DE0B0A
0ADB0A
0A0ADB

Split-Comp.

DE0B0A
0ADB73
0A73DB

Tetradic

DE0B0A
73DB0A
0ADBDB
730ADB

Contrast Matrix WCAG 2.1 Contrast

DE0B0A
DE5C0A
DE980A
6934BF
070308
—
1.4
Fail
2.1
Fail
1.5
Fail
4.1
AA Large
1.4
Fail
—
1.5
Fail
2.0
Fail
5.5
AA
2.1
Fail
1.5
Fail
—
3.0
AA Large
8.4
AAA
1.5
Fail
2.0
Fail
3.0
AA Large
—
2.8
Fail
4.1
AA Large
5.5
AA
8.4
AAA
2.8
Fail
—
White BG
5.1AA
3.7AA Large
2.4Fail
7.4AAA
20.5AAA
Black BG
4.2AA Large
5.6AA
8.6AAA
2.8Fail
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

83810A
A6A51E
C0BF2C
52529D
050507

Deuteranopia

8F9F0A
ADB723
C4C935
555995
060607

Tritanopia

D30A0A
D72E31
DA474D
66837D
070606

Achromatopsia

4A4A4A
7A7A7A
9D9D9D
545454
050505

Shades & Tints Shades & Tints

#DE0B0A

Dark
Light

#DE5C0A

Dark
Light

#DE980A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #de0b0a;
  --color-2: #de5c0a;
  --color-3: #de980a;
  --color-4: #6934bf;
  --color-5: #070308;
}

SCSS

$color-1: #de0b0a;
$color-2: #de5c0a;
$color-3: #de980a;
$color-4: #6934bf;
$color-5: #070308;

TAILWIND

colors: {
  'brand-1': '#de0b0a',
  'brand-2': '#de5c0a',
  'brand-3': '#de980a',
  'brand-4': '#6934bf',
  'brand-5': '#070308',
}

RGB Array

[222, 11, 10], [222, 92, 10], [222, 152, 10], [105, 52, 191], [7, 3, 8]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DE0B0A, #DE5C0A, #DE980A, #6934BF, #070308 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: #de0b0a; --color-2: #de5c0a; --color-3: #de980a; --color-4: #6934bf; --color-5: #070308. 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 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