#F7160A + #C41818 + #912024 + #452025 + #242222 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F7160A

Vermilion · Red · Passion Red

HEX

#F7160A

RGB

rgb(247, 22, 10)

HSL

hsl(3, 94%, 50%)

HSB

hsb(3, 96%, 97%)

CMYK

cmyk(0%, 91%, 96%, 3%)

Oklch

oklch(61.8% 0.247 29.5)

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

#C41818

Vermilion · FireBrick · Passion Red

HEX

#C41818

RGB

rgb(196, 24, 24)

HSL

hsl(0, 78%, 43%)

HSB

hsb(0, 88%, 77%)

CMYK

cmyk(0%, 88%, 88%, 23%)

Oklch

oklch(52.4% 0.203 28.0)

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

#912024

Vermilion · Brown · Wine Red

HEX

#912024

RGB

rgb(145, 32, 36)

HSL

hsl(358, 64%, 35%)

HSB

hsb(358, 78%, 57%)

CMYK

cmyk(0%, 78%, 75%, 43%)

Oklch

oklch(43.4% 0.148 24.3)

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

#452025

Crimson · DarkSlateGray · Deep Berry

HEX

#452025

RGB

rgb(69, 32, 37)

HSL

hsl(352, 37%, 20%)

HSB

hsb(352, 54%, 27%)

CMYK

cmyk(0%, 54%, 46%, 73%)

Oklch

oklch(29.7% 0.057 12.6)

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

#242222

Ink Black · Black · Dark Stone

HEX

#242222

RGB

rgb(36, 34, 34)

HSL

hsl(0, 3%, 14%)

HSB

hsb(0, 6%, 14%)

CMYK

cmyk(0%, 6%, 6%, 86%)

Oklch

oklch(25.4% 0.003 17.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F7160A

08EBF7

Analogous

F70874

F7160A

F78B08

Triadic

F7160A

08F714

1408F7

Split-Comp.

F7160A

08F78B

0874F7

Tetradic

F7160A

74F708

08EBF7

8B08F7

Contrast Matrix WCAG 2.1 Contrast

F7160A	C41818	912024	452025	242222
—	1.5 Fail	2.1 Fail	3.4 AA Large	3.8 AA Large
1.5 Fail	—	1.4 Fail	2.3 Fail	2.6 Fail
2.1 Fail	1.4 Fail	—	1.6 Fail	1.8 Fail
3.4 AA Large	2.3 Fail	1.6 Fail	—	1.1 Fail
3.8 AA Large	2.6 Fail	1.8 Fail	1.1 Fail	—

White BG

4.1AA Large

6.0AA

8.6AAA

14.1AAA

15.8AAA

Black BG

5.1AA

3.5AA Large

2.4Fail

1.5Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

96940D

7A7818

605F23

353524

232322

Deuteranopia

A3B30E

849018

676F23

373A24

232322

Tritanopia

EC0F10

BB1818

8B2222

432323

242222

Achromatopsia

585858

4B4B4B

424242

2C2C2C

232323

Shades & Tints Shades & Tints

#F7160A

Dark

Light

#C41818

Dark

Light

#912024

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f7160a;
  --color-2: #c41818;
  --color-3: #912024;
  --color-4: #452025;
  --color-5: #242222;
}

SCSS

$color-1: #f7160a;
$color-2: #c41818;
$color-3: #912024;
$color-4: #452025;
$color-5: #242222;

TAILWIND

colors: {
  'brand-1': '#f7160a',
  'brand-2': '#c41818',
  'brand-3': '#912024',
  'brand-4': '#452025',
  'brand-5': '#242222',
}

RGB Array

[247, 22, 10], [196, 24, 24], [145, 32, 36], [69, 32, 37], [36, 34, 34]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F7160A, #C41818, #912024, #452025, #242222 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: #f7160a; --color-2: #c41818; --color-3: #912024; --color-4: #452025; --color-5: #242222. 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