← Back to Editor

#CF0008 · #DB3F0B · #E07E03 · #F99E2C · #09170D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#CF0008

Vermilion · Red · Passion Red

HEX
#CF0008
RGB
rgb(207, 0, 8)
HSL
hsl(358, 100%, 41%)
HSB
hsb(358, 100%, 81%)
CMYK
cmyk(0%, 100%, 96%, 19%)
Oklch
oklch(53.7% 0.220 28.5)

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

#DB3F0B

Tangerine · OrangeRed · Amber Brown

HEX
#DB3F0B
RGB
rgb(219, 63, 11)
HSL
hsl(15, 90%, 45%)
HSB
hsb(15, 95%, 86%)
CMYK
cmyk(0%, 71%, 95%, 14%)
Oklch
oklch(59.4% 0.200 35.7)

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

#E07E03

Ochre · Chocolate · Amber Brown

HEX
#E07E03
RGB
rgb(224, 126, 3)
HSL
hsl(33, 97%, 45%)
HSB
hsb(33, 99%, 88%)
CMYK
cmyk(0%, 44%, 99%, 12%)
Oklch
oklch(68.7% 0.160 60.1)

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

#F99E2C

Ginger · GoldenRod · Warm Sun

HEX
#F99E2C
RGB
rgb(249, 158, 44)
HSL
hsl(33, 94%, 57%)
HSB
hsb(33, 82%, 98%)
CMYK
cmyk(0%, 37%, 82%, 2%)
Oklch
oklch(77.5% 0.159 66.0)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#09170D

Celadon · Black · Dark Green

HEX
#09170D
RGB
rgb(9, 23, 13)
HSL
hsl(137, 44%, 6%)
HSB
hsb(137, 61%, 9%)
CMYK
cmyk(61%, 0%, 43%, 91%)
Oklch
oklch(18.8% 0.028 152.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CF0008
00D1CA

Analogous

D10070
CF0008
D16200

Triadic

CF0008
07D100
0007D1

Split-Comp.

CF0008
00D162
0070D1

Tetradic

CF0008
70D100
00D1CA
6200D1

Contrast Matrix WCAG 2.1 Contrast

CF0008
DB3F0B
E07E03
F99E2C
09170D
—
1.3
Fail
2.0
Fail
2.7
Fail
3.2
AA Large
1.3
Fail
—
1.5
Fail
2.1
Fail
4.1
AA Large
2.0
Fail
1.5
Fail
—
1.4
Fail
6.3
AA
2.7
Fail
2.1
Fail
1.4
Fail
—
8.7
AAA
3.2
AA Large
4.1
AA Large
6.3
AA
8.7
AAA
—
White BG
5.7AA
4.4AA Large
2.9Fail
2.1Fail
18.4AAA
Black BG
3.7AA Large
4.7AA
7.2AAA
10.0AAA
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

757406
979618
B6B521
D2D148
0F0F0F

Deuteranopia

819106
A1AC1B
BBC328
D7DE4E
0E0D10

Tritanopia

C50504
D32224
DB383D
F45D62
0A1112

Achromatopsia

3F3F3F
686868
8D8D8D
ACACAC
121212

Shades & Tints Shades & Tints

#CF0008

Dark
Light

#DB3F0B

Dark
Light

#E07E03

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cf0008;
  --color-2: #db3f0b;
  --color-3: #e07e03;
  --color-4: #f99e2c;
  --color-5: #09170d;
}

SCSS

$color-1: #cf0008;
$color-2: #db3f0b;
$color-3: #e07e03;
$color-4: #f99e2c;
$color-5: #09170d;

TAILWIND

colors: {
  'brand-1': '#cf0008',
  'brand-2': '#db3f0b',
  'brand-3': '#e07e03',
  'brand-4': '#f99e2c',
  'brand-5': '#09170d',
}

RGB Array

[207, 0, 8], [219, 63, 11], [224, 126, 3], [249, 158, 44], [9, 23, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CF0008, #DB3F0B, #E07E03, #F99E2C, #09170D 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: #cf0008; --color-2: #db3f0b; --color-3: #e07e03; --color-4: #f99e2c; --color-5: #09170d. 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