#282220 + #8F0011 + #C23219 + #C86312 + #667479 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#282220

Tangerine · Black · Cinnamon

HEX

#282220

RGB

rgb(40, 34, 32)

HSL

hsl(15, 11%, 14%)

HSB

hsb(15, 20%, 16%)

CMYK

cmyk(0%, 15%, 20%, 84%)

Oklch

oklch(25.8% 0.010 39.3)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#8F0011

Vermilion · DarkRed · Wine Red

HEX

#8F0011

RGB

rgb(143, 0, 17)

HSL

hsl(353, 100%, 28%)

HSB

hsb(353, 100%, 56%)

CMYK

cmyk(0%, 100%, 88%, 44%)

Oklch

oklch(40.9% 0.166 25.7)

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

#C23219

Vermilion · FireBrick · Passion Red

HEX

#C23219

RGB

rgb(194, 50, 25)

HSL

hsl(9, 77%, 43%)

HSB

hsb(9, 87%, 76%)

CMYK

cmyk(0%, 74%, 87%, 24%)

Oklch

oklch(53.8% 0.184 32.2)

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

#C86312

Tangerine · Chocolate · Amber Brown

HEX

#C86312

RGB

rgb(200, 99, 18)

HSL

hsl(27, 83%, 43%)

HSB

hsb(27, 91%, 78%)

CMYK

cmyk(0%, 51%, 91%, 22%)

Oklch

oklch(61.0% 0.152 51.4)

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

#667479

Slate Blue · DimGray · Warm Gray

HEX

#667479

RGB

rgb(102, 116, 121)

HSL

hsl(196, 9%, 44%)

HSB

hsb(196, 16%, 47%)

CMYK

cmyk(16%, 4%, 0%, 53%)

Oklch

oklch(54.9% 0.018 221.3)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

282220

202628

Analogous

282022

282220

282620

Triadic

282220

202822

222028

Split-Comp.

282220

202826

202228

Tetradic

282220

222820

202628

262028

Contrast Matrix WCAG 2.1 Contrast

282220	8F0011	C23219	C86312	667479
—	1.6 Fail	2.8 Fail	3.9 AA Large	3.2 AA Large
1.6 Fail	—	1.7 Fail	2.4 Fail	2.0 Fail
2.8 Fail	1.7 Fail	—	1.4 Fail	1.2 Fail
3.9 AA Large	2.4 Fail	1.4 Fail	—	1.2 Fail
3.2 AA Large	2.0 Fail	1.2 Fail	1.2 Fail	—

White BG

15.7AAA

9.7AAA

5.6AA

4.0AA Large

4.8AA

Black BG

1.3Fail

2.2Fail

3.8AA Large

5.2AA

4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

252520

51500D

84821F

9C9B26

6C6C78

Deuteranopia

262621

59640C

8C9721

A2AA2A

6B6A77

Tritanopia

282121

880A09

BB2425

C33538

677777

Achromatopsia

242424

2D2D2D

5A5A5A

787878

707070

Shades & Tints Shades & Tints

#282220

Dark

Light

#8F0011

Dark

Light

#C23219

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #282220;
  --color-2: #8f0011;
  --color-3: #c23219;
  --color-4: #c86312;
  --color-5: #667479;
}

SCSS

$color-1: #282220;
$color-2: #8f0011;
$color-3: #c23219;
$color-4: #c86312;
$color-5: #667479;

TAILWIND

colors: {
  'brand-1': '#282220',
  'brand-2': '#8f0011',
  'brand-3': '#c23219',
  'brand-4': '#c86312',
  'brand-5': '#667479',
}

RGB Array

[40, 34, 32], [143, 0, 17], [194, 50, 25], [200, 99, 18], [102, 116, 121]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #282220, #8F0011, #C23219, #C86312, #667479 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: #282220; --color-2: #8f0011; --color-3: #c23219; --color-4: #c86312; --color-5: #667479. 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