#8F1402 + #8F3C01 + #996139 + #5E4D4B + #383231 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#8F1402

Vermilion · DarkRed · Wine Red

HEX

#8F1402

RGB

rgb(143, 20, 2)

HSL

hsl(8, 97%, 28%)

HSB

hsb(8, 99%, 56%)

CMYK

cmyk(0%, 86%, 99%, 44%)

Oklch

oklch(41.8% 0.159 31.4)

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

#8F3C01

Tangerine · Brown · Amber Brown

HEX

#8F3C01

RGB

rgb(143, 60, 1)

HSL

hsl(25, 99%, 28%)

HSB

hsb(25, 99%, 56%)

CMYK

cmyk(0%, 58%, 99%, 44%)

Oklch

oklch(46.2% 0.127 46.9)

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

#996139

Tangerine · Sienna · Amber Brown

HEX

#996139

RGB

rgb(153, 97, 57)

HSL

hsl(25, 46%, 41%)

HSB

hsb(25, 63%, 60%)

CMYK

cmyk(0%, 37%, 63%, 40%)

Oklch

oklch(54.5% 0.091 55.0)

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

#5E4D4B

Crimson · DarkOliveGreen · Wine Red

HEX

#5E4D4B

RGB

rgb(94, 77, 75)

HSL

hsl(6, 11%, 33%)

HSB

hsb(6, 20%, 37%)

CMYK

cmyk(0%, 18%, 20%, 63%)

Oklch

oklch(43.7% 0.023 25.9)

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

#383231

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#383231

RGB

rgb(56, 50, 49)

HSL

hsl(9, 7%, 21%)

HSB

hsb(9, 12%, 22%)

CMYK

cmyk(0%, 11%, 13%, 78%)

Oklch

oklch(32.3% 0.009 28.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8F1402

027A8D

Analogous

8D0235

8F1402

8D5A02

Triadic

8F1402

028D15

15028D

Split-Comp.

8F1402

028D5A

02358D

Tetradic

8F1402

358D02

027A8D

5A028D

Contrast Matrix WCAG 2.1 Contrast

8F1402	8F3C01	996139	5E4D4B	383231
—	1.2 Fail	1.8 Fail	1.2 Fail	1.4 Fail
1.2 Fail	—	1.5 Fail	1.1 Fail	1.7 Fail
1.8 Fail	1.5 Fail	—	1.6 Fail	2.5 Fail
1.2 Fail	1.1 Fail	1.6 Fail	—	1.6 Fail
1.4 Fail	1.7 Fail	2.5 Fail	1.6 Fail	—

White BG

9.3AAA

7.5AAA

5.1AA

8.0AAA

12.6AAA

Black BG

2.3Fail

2.8Fail

4.1AA Large

2.6Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5A5906

6B6A0F

818043

57564B

353531

Deuteranopia

616A07

707613

848845

58594C

363631

Tritanopia

890A0B

8B1B1D

964A4C

5D4C4C

383131

Achromatopsia

373737

4E4E4E

6D6D6D

525252

343434

Shades & Tints Shades & Tints

#8F1402

Dark

Light

#8F3C01

Dark

Light

#996139

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8f1402;
  --color-2: #8f3c01;
  --color-3: #996139;
  --color-4: #5e4d4b;
  --color-5: #383231;
}

SCSS

$color-1: #8f1402;
$color-2: #8f3c01;
$color-3: #996139;
$color-4: #5e4d4b;
$color-5: #383231;

TAILWIND

colors: {
  'brand-1': '#8f1402',
  'brand-2': '#8f3c01',
  'brand-3': '#996139',
  'brand-4': '#5e4d4b',
  'brand-5': '#383231',
}

RGB Array

[143, 20, 2], [143, 60, 1], [153, 97, 57], [94, 77, 75], [56, 50, 49]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #8F1402, #8F3C01, #996139, #5E4D4B, #383231 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: #8f1402; --color-2: #8f3c01; --color-3: #996139; --color-4: #5e4d4b; --color-5: #383231. 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 warm-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