← Back to Editor

#CD3E02 · #FF660A · #202C38 · #2F405E · #080C0F

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

#CD3E02

Tangerine · FireBrick · Amber Brown

HEX
#CD3E02
RGB
rgb(205, 62, 2)
HSL
hsl(18, 98%, 41%)
HSB
hsb(18, 99%, 80%)
CMYK
cmyk(0%, 70%, 99%, 20%)
Oklch
oklch(56.8% 0.188 37.3)

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

#FF660A

Tangerine · OrangeRed · Warm Sun

HEX
#FF660A
RGB
rgb(255, 102, 10)
HSL
hsl(23, 100%, 52%)
HSB
hsb(23, 96%, 100%)
CMYK
cmyk(0%, 60%, 96%, 0%)
Oklch
oklch(69.6% 0.204 43.0)

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

#202C38

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#202C38
RGB
rgb(32, 44, 56)
HSL
hsl(210, 27%, 17%)
HSB
hsb(210, 43%, 22%)
CMYK
cmyk(43%, 21%, 0%, 78%)
Oklch
oklch(28.8% 0.028 248.8)

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

#2F405E

Indigo · DarkSlateGray · Prussian Blue

HEX
#2F405E
RGB
rgb(47, 64, 94)
HSL
hsl(218, 33%, 28%)
HSB
hsb(218, 50%, 37%)
CMYK
cmyk(50%, 32%, 0%, 63%)
Oklch
oklch(37.1% 0.056 261.4)

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

#080C0F

Slate Blue · Black · Deep Sea Blue

HEX
#080C0F
RGB
rgb(8, 12, 15)
HSL
hsl(206, 30%, 5%)
HSB
hsb(206, 47%, 6%)
CMYK
cmyk(47%, 20%, 0%, 94%)
Oklch
oklch(15.1% 0.009 239.8)

Traditional「Slate Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CD3E02
0292CF

Analogous

CF022B
CD3E02
CFA602

Triadic

CD3E02
02CF40
4002CF

Split-Comp.

CD3E02
02CFA6
022BCF

Tetradic

CD3E02
2BCF02
0292CF
A602CF

Contrast Matrix WCAG 2.1 Contrast

CD3E02
FF660A
202C38
2F405E
080C0F
—
1.7
Fail
2.9
Fail
2.1
Fail
4.0
AA Large
1.7
Fail
—
4.8
AA
3.6
AA Large
6.7
AA
2.9
Fail
4.8
AA
—
1.4
Fail
1.4
Fail
2.1
Fail
3.6
AA Large
1.4
Fail
—
1.9
Fail
4.0
AA Large
6.7
AA
1.4
Fail
1.9
Fail
—
White BG
4.9AA
2.9Fail
14.2AAA
10.4AAA
19.6AAA
Black BG
4.3AA Large
7.2AAA
1.5Fail
2.0Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8F8E11
BDBB20
252535
363757
0A0A0E

Deuteranopia

97A214
C6D126
252434
353455
0A090E

Tritanopia

C61C1F
F73236
213332
305150
080E0E

Achromatopsia

626262
898989
2A2A2A
3E3E3E
0B0B0B

Shades & Tints Shades & Tints

#CD3E02

Dark
Light

#FF660A

Dark
Light

#202C38

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cd3e02;
  --color-2: #ff660a;
  --color-3: #202c38;
  --color-4: #2f405e;
  --color-5: #080c0f;
}

SCSS

$color-1: #cd3e02;
$color-2: #ff660a;
$color-3: #202c38;
$color-4: #2f405e;
$color-5: #080c0f;

TAILWIND

colors: {
  'brand-1': '#cd3e02',
  'brand-2': '#ff660a',
  'brand-3': '#202c38',
  'brand-4': '#2f405e',
  'brand-5': '#080c0f',
}

RGB Array

[205, 62, 2], [255, 102, 10], [32, 44, 56], [47, 64, 94], [8, 12, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CD3E02, #FF660A, #202C38, #2F405E, #080C0F 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: #cd3e02; --color-2: #ff660a; --color-3: #202c38; --color-4: #2f405e; --color-5: #080c0f. 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