#CC4215 + #A6342A + #802D2F + #5E222A + #381B1A · neon - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

FuturisticEnergeticRebelliousWarm

Industry INDUSTRY

GamingWeb3 / CryptoDeep Tech

UI Context UI CONTEXT

Dark Mode UIDashboardCampaign Page

Color Details Color Details

#CC4215

Tangerine · Chocolate · Amber Brown

HEX

#CC4215

RGB

rgb(204, 66, 21)

HSL

hsl(15, 81%, 44%)

HSB

hsb(15, 90%, 80%)

CMYK

cmyk(0%, 68%, 90%, 20%)

Oklch

oklch(57.2% 0.182 36.6)

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

#A6342A

Crimson · Brown · Passion Red

HEX

#A6342A

RGB

rgb(166, 52, 42)

HSL

hsl(5, 60%, 41%)

HSB

hsb(5, 75%, 65%)

CMYK

cmyk(0%, 69%, 75%, 35%)

Oklch

oklch(49.3% 0.151 28.8)

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

#802D2F

Crimson · Brown · Wine Red

HEX

#802D2F

RGB

rgb(128, 45, 47)

HSL

hsl(359, 48%, 34%)

HSB

hsb(359, 65%, 50%)

CMYK

cmyk(0%, 65%, 63%, 50%)

Oklch

oklch(41.9% 0.115 22.1)

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

#5E222A

Crimson · Maroon · Wine Red

HEX

#5E222A

RGB

rgb(94, 34, 42)

HSL

hsl(352, 47%, 25%)

HSB

hsb(352, 64%, 37%)

CMYK

cmyk(0%, 64%, 55%, 63%)

Oklch

oklch(34.4% 0.088 14.9)

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

#381B1A

Crimson · Black · Deep Berry

HEX

#381B1A

RGB

rgb(56, 27, 26)

HSL

hsl(2, 37%, 16%)

HSB

hsb(2, 54%, 22%)

CMYK

cmyk(0%, 52%, 54%, 78%)

Oklch

oklch(26.3% 0.046 22.8)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CC4215

159ECB

Analogous

CB1543

CC4215

CB9E15

Triadic

CC4215

15CB43

4315CB

Split-Comp.

CC4215

15CB9E

1543CB

Tetradic

CC4215

43CB15

159ECB

9E15CB

Contrast Matrix WCAG 2.1 Contrast

CC4215	A6342A	802D2F	5E222A	381B1A
—	1.4 Fail	1.9 Fail	2.5 Fail	3.3 AA Large
1.4 Fail	—	1.3 Fail	1.8 Fail	2.3 Fail
1.9 Fail	1.3 Fail	—	1.3 Fail	1.7 Fail
2.5 Fail	1.8 Fail	1.3 Fail	—	1.3 Fail
3.3 AA Large	2.3 Fail	1.7 Fail	1.3 Fail	—

White BG

4.8AA

6.7AA

9.0AAA

12.1AAA

15.7AAA

Black BG

4.4AA Large

3.1AA Large

2.3Fail

1.7Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

908F20

75742C

5C5B2F

444328

2B2B1A

Deuteranopia

98A323

7B842D

61672E

484C28

2D2F1A

Tritanopia

C5282A

A02E2F

7C2E2E

5B2726

371A1A

Achromatopsia

666666

555555

464646

353535

242424

Shades & Tints Shades & Tints

#CC4215

Dark

Light

#A6342A

Dark

Light

#802D2F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cc4215;
  --color-2: #a6342a;
  --color-3: #802d2f;
  --color-4: #5e222a;
  --color-5: #381b1a;
}

SCSS

$color-1: #cc4215;
$color-2: #a6342a;
$color-3: #802d2f;
$color-4: #5e222a;
$color-5: #381b1a;

TAILWIND

colors: {
  'brand-1': '#cc4215',
  'brand-2': '#a6342a',
  'brand-3': '#802d2f',
  'brand-4': '#5e222a',
  'brand-5': '#381b1a',
}

RGB Array

[204, 66, 21], [166, 52, 42], [128, 45, 47], [94, 34, 42], [56, 27, 26]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This neon-style palette of #CC4215, #A6342A, #802D2F, #5E222A, #381B1A is ideal for: tech websites, dark mode UIs, game UIs. 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: #cc4215; --color-2: #a6342a; --color-3: #802d2f; --color-4: #5e222a; --color-5: #381b1a. 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. 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 neon-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