#580A18 + #340000 + #6F410F + #83684D + #808368 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#580A18

Vermilion · Maroon · Deep Berry

HEX

#580A18

RGB

rgb(88, 10, 24)

HSL

hsl(349, 80%, 19%)

HSB

hsb(349, 89%, 35%)

CMYK

cmyk(0%, 89%, 73%, 65%)

Oklch

oklch(30.0% 0.108 18.0)

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

#340000

Vermilion · Black · Deep Berry

HEX

#340000

RGB

rgb(52, 0, 0)

HSL

hsl(0, 100%, 10%)

HSB

hsb(0, 100%, 20%)

CMYK

cmyk(0%, 100%, 100%, 80%)

Oklch

oklch(20.4% 0.084 29.2)

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

#6F410F

Ochre · DarkOliveGreen · Cinnamon

HEX

#6F410F

RGB

rgb(111, 65, 15)

HSL

hsl(31, 76%, 25%)

HSB

hsb(31, 86%, 44%)

CMYK

cmyk(0%, 41%, 86%, 56%)

Oklch

oklch(42.2% 0.088 62.3)

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

#83684D

Ochre · DimGray · Amber Brown

HEX

#83684D

RGB

rgb(131, 104, 77)

HSL

hsl(30, 26%, 41%)

HSB

hsb(30, 41%, 51%)

CMYK

cmyk(0%, 21%, 41%, 49%)

Oklch

oklch(53.7% 0.053 66.3)

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

#808368

Autumn Sage · Gray · Honey Gold

HEX

#808368

RGB

rgb(128, 131, 104)

HSL

hsl(67, 11%, 46%)

HSB

hsb(67, 21%, 51%)

CMYK

cmyk(2%, 0%, 21%, 49%)

Oklch

oklch(60.0% 0.040 112.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

580A18

0A5749

Analogous

570A3F

580A18

57220A

Triadic

580A18

18570A

0A1857

Split-Comp.

580A18

0A5722

0A3F57

Tetradic

580A18

3F570A

0A5749

220A57

Contrast Matrix WCAG 2.1 Contrast

580A18	340000	6F410F	83684D	808368
—	1.3 Fail	1.7 Fail	2.8 Fail	3.6 AA Large
1.3 Fail	—	2.1 Fail	3.5 AA Large	4.7 AA
1.7 Fail	2.1 Fail	—	1.7 Fail	2.2 Fail
2.8 Fail	3.5 AA Large	1.7 Fail	—	1.3 Fail
3.6 AA Large	4.7 AA	2.2 Fail	1.3 Fail	—

White BG

14.3AAA

18.3AAA

8.6AAA

5.2AA

3.9AA Large

Black BG

1.5Fail

1.1Fail

2.4Fail

4.1AA Large

5.4AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

363615

1D1D00

5B5B1B

777754

81816F

Deuteranopia

3B4114

212400

5E611E

797B55

818170

Tritanopia

541211

310000

6D2527

82595A

807475

Achromatopsia

232323

101010

494949

6D6D6D

7F7F7F

Shades & Tints Shades & Tints

#580A18

Dark

Light

#340000

Dark

Light

#6F410F

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #580a18;
  --color-2: #340000;
  --color-3: #6f410f;
  --color-4: #83684d;
  --color-5: #808368;
}

SCSS

$color-1: #580a18;
$color-2: #340000;
$color-3: #6f410f;
$color-4: #83684d;
$color-5: #808368;

TAILWIND

colors: {
  'brand-1': '#580a18',
  'brand-2': '#340000',
  'brand-3': '#6f410f',
  'brand-4': '#83684d',
  'brand-5': '#808368',
}

RGB Array

[88, 10, 24], [52, 0, 0], [111, 65, 15], [131, 104, 77], [128, 131, 104]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #580A18, #340000, #6F410F, #83684D, #808368 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: #580a18; --color-2: #340000; --color-3: #6f410f; --color-4: #83684d; --color-5: #808368. 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