#D41402 + #383535 + #D11717 + #FF1A05 + #242121 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#D41402

Vermilion · Red · Passion Red

HEX

#D41402

RGB

rgb(212, 20, 2)

HSL

hsl(5, 98%, 42%)

HSB

hsb(5, 99%, 83%)

CMYK

cmyk(0%, 91%, 99%, 17%)

Oklch

oklch(55.2% 0.219 30.1)

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

#383535

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#383535

RGB

rgb(56, 53, 53)

HSL

hsl(0, 3%, 21%)

HSB

hsb(0, 5%, 22%)

CMYK

cmyk(0%, 5%, 5%, 78%)

Oklch

oklch(33.2% 0.004 17.4)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#D11717

Vermilion · FireBrick · Passion Red

HEX

#D11717

RGB

rgb(209, 23, 23)

HSL

hsl(0, 80%, 45%)

HSB

hsb(0, 89%, 82%)

CMYK

cmyk(0%, 89%, 89%, 18%)

Oklch

oklch(54.8% 0.214 28.2)

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

#FF1A05

Vermilion · Red · Passion Red

HEX

#FF1A05

RGB

rgb(255, 26, 5)

HSL

hsl(5, 100%, 51%)

HSB

hsb(5, 98%, 100%)

CMYK

cmyk(0%, 90%, 98%, 0%)

Oklch

oklch(63.4% 0.252 30.0)

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

#242121

Ink Black · Black · Dark Stone

HEX

#242121

RGB

rgb(36, 33, 33)

HSL

hsl(0, 4%, 14%)

HSB

hsb(0, 8%, 14%)

CMYK

cmyk(0%, 8%, 8%, 86%)

Oklch

oklch(25.1% 0.005 17.5)

Traditional「Ink Black」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D41402

02C3D4

Analogous

D4025A

D41402

D47D02

Triadic

D41402

02D414

1402D4

Split-Comp.

D41402

02D47D

025AD4

Tetradic

D41402

5AD402

02C3D4

7D02D4

Contrast Matrix WCAG 2.1 Contrast

D41402	383535	D11717	FF1A05	242121
—	2.3 Fail	1.0 Fail	1.4 Fail	3.0 Fail
2.3 Fail	—	2.2 Fail	3.1 AA Large	1.3 Fail
1.0 Fail	2.2 Fail	—	1.4 Fail	2.9 Fail
1.4 Fail	3.1 AA Large	1.4 Fail	—	4.1 AA Large
3.0 Fail	1.3 Fail	2.9 Fail	4.1 AA Large	—

White BG

5.4AA

12.1AAA

5.5AA

3.9AA Large

16.0AAA

Black BG

3.9AA Large

1.7Fail

3.8AA Large

5.4AA

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

817F06

373735

807F17

9C9A0A

232321

Deuteranopia

8C9A07

373735

8B9917

A9BA0B

232321

Tritanopia

CA0A0B

383535

C81717

F40E0F

242121

Achromatopsia

4B4B4B

363636

4F4F4F

5C5C5C

222222

Shades & Tints Shades & Tints

#D41402

Dark

Light

#383535

Dark

Light

#D11717

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d41402;
  --color-2: #383535;
  --color-3: #d11717;
  --color-4: #ff1a05;
  --color-5: #242121;
}

SCSS

$color-1: #d41402;
$color-2: #383535;
$color-3: #d11717;
$color-4: #ff1a05;
$color-5: #242121;

TAILWIND

colors: {
  'brand-1': '#d41402',
  'brand-2': '#383535',
  'brand-3': '#d11717',
  'brand-4': '#ff1a05',
  'brand-5': '#242121',
}

RGB Array

[212, 20, 2], [56, 53, 53], [209, 23, 23], [255, 26, 5], [36, 33, 33]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D41402, #383535, #D11717, #FF1A05, #242121 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: #d41402; --color-2: #383535; --color-3: #d11717; --color-4: #ff1a05; --color-5: #242121. 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 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