#2F2E29 + #4B3425 + #814020 + #B72016 + #E8050E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2F2E29

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2F2E29

RGB

rgb(47, 46, 41)

HSL

hsl(50, 7%, 17%)

HSB

hsb(50, 13%, 18%)

CMYK

cmyk(0%, 2%, 13%, 82%)

Oklch

oklch(30.0% 0.009 97.6)

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

#4B3425

Tangerine · DarkOliveGreen · Cinnamon

HEX

#4B3425

RGB

rgb(75, 52, 37)

HSL

hsl(24, 34%, 22%)

HSB

hsb(24, 51%, 29%)

CMYK

cmyk(0%, 31%, 51%, 71%)

Oklch

oklch(34.7% 0.041 54.0)

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

#814020

Tangerine · Sienna · Amber Brown

HEX

#814020

RGB

rgb(129, 64, 32)

HSL

hsl(20, 60%, 32%)

HSB

hsb(20, 75%, 51%)

CMYK

cmyk(0%, 50%, 75%, 49%)

Oklch

oklch(44.8% 0.100 45.1)

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

#B72016

Vermilion · FireBrick · Wine Red

HEX

#B72016

RGB

rgb(183, 32, 22)

HSL

hsl(4, 79%, 40%)

HSB

hsb(4, 88%, 72%)

CMYK

cmyk(0%, 83%, 88%, 28%)

Oklch

oklch(50.4% 0.187 29.4)

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

#E8050E

Vermilion · Red · Passion Red

HEX

#E8050E

RGB

rgb(232, 5, 14)

HSL

hsl(358, 96%, 46%)

HSB

hsb(358, 98%, 91%)

CMYK

cmyk(0%, 98%, 94%, 9%)

Oklch

oklch(58.6% 0.238 28.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2F2E29

28292E

Analogous

2E2A28

2F2E29

2C2E28

Triadic

2F2E29

282E2D

2D282E

Split-Comp.

2F2E29

282C2E

2A282E

Tetradic

2F2E29

282E2A

28292E

2E282C

Contrast Matrix WCAG 2.1 Contrast

2F2E29	4B3425	814020	B72016	E8050E
—	1.2 Fail	1.7 Fail	2.1 Fail	2.9 Fail
1.2 Fail	—	1.5 Fail	1.8 Fail	2.5 Fail
1.7 Fail	1.5 Fail	—	1.2 Fail	1.7 Fail
2.1 Fail	1.8 Fail	1.2 Fail	—	1.4 Fail
2.9 Fail	2.5 Fail	1.7 Fail	1.4 Fail	—

White BG

13.6AAA

11.6AAA

7.8AAA

6.5AA

4.7AA

Black BG

1.5Fail

1.8Fail

2.7Fail

3.2AA Large

4.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

2F2F2A

414129

656428

767418

86840C

Deuteranopia

2F2F2B

42442A

696E2A

7E8A19

93A40B

Tritanopia

2F2B2B

4A2B2C

7E2E2F

AF1A1B

DD0A0A

Achromatopsia

2E2E2E

393939

505050

4C4C4C

4A4A4A

Shades & Tints Shades & Tints

#2F2E29

Dark

Light

#4B3425

Dark

Light

#814020

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2f2e29;
  --color-2: #4b3425;
  --color-3: #814020;
  --color-4: #b72016;
  --color-5: #e8050e;
}

SCSS

$color-1: #2f2e29;
$color-2: #4b3425;
$color-3: #814020;
$color-4: #b72016;
$color-5: #e8050e;

TAILWIND

colors: {
  'brand-1': '#2f2e29',
  'brand-2': '#4b3425',
  'brand-3': '#814020',
  'brand-4': '#b72016',
  'brand-5': '#e8050e',
}

RGB Array

[47, 46, 41], [75, 52, 37], [129, 64, 32], [183, 32, 22], [232, 5, 14]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2F2E29, #4B3425, #814020, #B72016, #E8050E 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: #2f2e29; --color-2: #4b3425; --color-3: #814020; --color-4: #b72016; --color-5: #e8050e. 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