#AB0E0E + #8C4919 + #5E5E5E + #7D5E02 + #6B5F39 · 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

#AB0E0E

Vermilion · FireBrick · Wine Red

HEX

#AB0E0E

RGB

rgb(171, 14, 14)

HSL

hsl(0, 85%, 36%)

HSB

hsb(0, 92%, 67%)

CMYK

cmyk(0%, 92%, 92%, 33%)

Oklch

oklch(47.1% 0.186 28.4)

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

#8C4919

Tangerine · Sienna · Amber Brown

HEX

#8C4919

RGB

rgb(140, 73, 25)

HSL

hsl(25, 70%, 32%)

HSB

hsb(25, 82%, 55%)

CMYK

cmyk(0%, 48%, 82%, 45%)

Oklch

oklch(48.0% 0.108 51.9)

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

#5E5E5E

Ink Gray · DimGray · Charcoal

HEX

#5E5E5E

RGB

rgb(94, 94, 94)

HSL

hsl(0, 0%, 37%)

HSB

hsb(0, 0%, 37%)

CMYK

cmyk(0%, 0%, 0%, 63%)

Oklch

oklch(48.2% 0.000 89.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#7D5E02

Ochre · Olive · Amber Gold

HEX

#7D5E02

RGB

rgb(125, 94, 2)

HSL

hsl(45, 97%, 25%)

HSB

hsb(45, 98%, 49%)

CMYK

cmyk(0%, 25%, 98%, 51%)

Oklch

oklch(50.0% 0.102 85.9)

Traditional「Ochre」· Paint「Amber Gold」· Creative Blush Sunrise

#6B5F39

Ochre · DarkOliveGreen · Honey Gold

HEX

#6B5F39

RGB

rgb(107, 95, 57)

HSL

hsl(46, 30%, 32%)

HSB

hsb(46, 47%, 42%)

CMYK

cmyk(0%, 11%, 47%, 58%)

Oklch

oklch(48.7% 0.057 92.5)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AB0E0E

0EAAAA

Analogous

AA0E5C

AB0E0E

AA5C0E

Triadic

AB0E0E

0EAA0E

0E0EAA

Split-Comp.

AB0E0E

0EAA5C

0E5CAA

Tetradic

AB0E0E

5CAA0E

0EAAAA

5C0EAA

Contrast Matrix WCAG 2.1 Contrast

AB0E0E	8C4919	5E5E5E	7D5E02	6B5F39
—	1.1 Fail	1.2 Fail	1.2 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.1 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.0 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.0 Fail
1.2 Fail	1.1 Fail	1.0 Fail	1.0 Fail	—

White BG

7.5AAA

6.8AA

6.5AA

6.0AA

6.3AA

Black BG

2.8Fail

3.1AA Large

3.2AA Large

3.5AA Large

3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

67660E

6F6E25

5E5E5E

706F18

666642

Deuteranopia

707C0E

737827

5E5E5E

71741E

676744

Tritanopia

A30E0E

892E30

5E5E5E

7B2A2E

6A494B

Achromatopsia

3D3D3D

585858

5E5E5E

5D5D5D

5E5E5E

Shades & Tints Shades & Tints

#AB0E0E

Dark

Light

#8C4919

Dark

Light

#5E5E5E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ab0e0e;
  --color-2: #8c4919;
  --color-3: #5e5e5e;
  --color-4: #7d5e02;
  --color-5: #6b5f39;
}

SCSS

$color-1: #ab0e0e;
$color-2: #8c4919;
$color-3: #5e5e5e;
$color-4: #7d5e02;
$color-5: #6b5f39;

TAILWIND

colors: {
  'brand-1': '#ab0e0e',
  'brand-2': '#8c4919',
  'brand-3': '#5e5e5e',
  'brand-4': '#7d5e02',
  'brand-5': '#6b5f39',
}

RGB Array

[171, 14, 14], [140, 73, 25], [94, 94, 94], [125, 94, 2], [107, 95, 57]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #AB0E0E, #8C4919, #5E5E5E, #7D5E02, #6B5F39 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: #ab0e0e; --color-2: #8c4919; --color-3: #5e5e5e; --color-4: #7d5e02; --color-5: #6b5f39. 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