#581D0F + #923317 + #6F3D1A + #5D4732 + #282015 · 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

#581D0F

Vermilion · Maroon · Deep Berry

HEX

#581D0F

RGB

rgb(88, 29, 15)

HSL

hsl(12, 71%, 20%)

HSB

hsb(12, 83%, 35%)

CMYK

cmyk(0%, 67%, 83%, 65%)

Oklch

oklch(32.0% 0.091 34.6)

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

#923317

Vermilion · Brown · Wine Red

HEX

#923317

RGB

rgb(146, 51, 23)

HSL

hsl(14, 73%, 33%)

HSB

hsb(14, 84%, 57%)

CMYK

cmyk(0%, 65%, 84%, 43%)

Oklch

oklch(45.5% 0.134 36.5)

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

#6F3D1A

Tangerine · Sienna · Amber Brown

HEX

#6F3D1A

RGB

rgb(111, 61, 26)

HSL

hsl(25, 62%, 27%)

HSB

hsb(25, 77%, 44%)

CMYK

cmyk(0%, 45%, 77%, 56%)

Oklch

oklch(41.5% 0.085 52.9)

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

#5D4732

Tangerine · DarkOliveGreen · Amber Brown

HEX

#5D4732

RGB

rgb(93, 71, 50)

HSL

hsl(29, 30%, 28%)

HSB

hsb(29, 46%, 36%)

CMYK

cmyk(0%, 24%, 46%, 64%)

Oklch

oklch(41.6% 0.044 64.8)

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

#282015

Ochre · Black · Cinnamon

HEX

#282015

RGB

rgb(40, 32, 21)

HSL

hsl(35, 31%, 12%)

HSB

hsb(35, 48%, 16%)

CMYK

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

Oklch

oklch(24.9% 0.023 75.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

581D0F

0F4957

Analogous

570F25

581D0F

57410F

Triadic

581D0F

0F571D

1D0F57

Split-Comp.

581D0F

0F5741

0F2557

Tetradic

581D0F

25570F

0F4957

410F57

Contrast Matrix WCAG 2.1 Contrast

581D0F	923317	6F3D1A	5D4732	282015
—	1.7 Fail	1.5 Fail	1.5 Fail	1.2 Fail
1.7 Fail	—	1.1 Fail	1.1 Fail	2.1 Fail
1.5 Fail	1.1 Fail	—	1.0 Fail	1.8 Fail
1.5 Fail	1.1 Fail	1.0 Fail	—	1.8 Fail
1.2 Fail	2.1 Fail	1.8 Fail	1.8 Fail	—

White BG

13.1AAA

7.8AAA

8.9AAA

8.7AAA

16.1AAA

Black BG

1.6Fail

2.7Fail

2.4Fail

1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E12

69681E

595922

535337

252418

Deuteranopia

424613

6E751F

5C6025

555638

252618

Tritanopia

551516

8D2324

6C292B

5C3B3C

281A1A

Achromatopsia

2D2D2D

4C4C4C

484848

4B4B4B

212121

Shades & Tints Shades & Tints

#581D0F

Dark

Light

#923317

Dark

Light

#6F3D1A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #581d0f;
  --color-2: #923317;
  --color-3: #6f3d1a;
  --color-4: #5d4732;
  --color-5: #282015;
}

SCSS

$color-1: #581d0f;
$color-2: #923317;
$color-3: #6f3d1a;
$color-4: #5d4732;
$color-5: #282015;

TAILWIND

colors: {
  'brand-1': '#581d0f',
  'brand-2': '#923317',
  'brand-3': '#6f3d1a',
  'brand-4': '#5d4732',
  'brand-5': '#282015',
}

RGB Array

[88, 29, 15], [146, 51, 23], [111, 61, 26], [93, 71, 50], [40, 32, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #581D0F, #923317, #6F3D1A, #5D4732, #282015 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: #581d0f; --color-2: #923317; --color-3: #6f3d1a; --color-4: #5d4732; --color-5: #282015. 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