#570023 + #8E754B + #7A4B3D + #6B2831 + #A8AD5E - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#570023

Dark Violet · Maroon · Raspberry

HEX

#570023

RGB

rgb(87, 0, 35)

HSL

hsl(336, 100%, 17%)

HSB

hsb(336, 100%, 34%)

CMYK

cmyk(0%, 100%, 60%, 66%)

Oklch

oklch(29.3% 0.118 6.0)

Traditional「Dark Violet」· Paint「Raspberry」· Creative Blush Sunrise

#8E754B

Ochre · DimGray · Amber Brown

HEX

#8E754B

RGB

rgb(142, 117, 75)

HSL

hsl(38, 31%, 43%)

HSB

hsb(38, 47%, 56%)

CMYK

cmyk(0%, 18%, 47%, 44%)

Oklch

oklch(57.6% 0.066 79.8)

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

#7A4B3D

Crimson · Sienna · Wine Red

HEX

#7A4B3D

RGB

rgb(122, 75, 61)

HSL

hsl(14, 33%, 36%)

HSB

hsb(14, 50%, 48%)

CMYK

cmyk(0%, 39%, 50%, 52%)

Oklch

oklch(46.3% 0.068 37.3)

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

#6B2831

Crimson · Brown · Wine Red

HEX

#6B2831

RGB

rgb(107, 40, 49)

HSL

hsl(352, 46%, 29%)

HSB

hsb(352, 63%, 42%)

CMYK

cmyk(0%, 63%, 54%, 58%)

Oklch

oklch(37.7% 0.096 14.8)

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

#A8AD5E

Autumn Sage · DarkSeaGreen · Sunflower

HEX

#A8AD5E

RGB

rgb(168, 173, 94)

HSL

hsl(64, 33%, 52%)

HSB

hsb(64, 46%, 68%)

CMYK

cmyk(3%, 0%, 46%, 32%)

Oklch

oklch(72.6% 0.103 111.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

570023

005734

Analogous

57004E

570023

570900

Triadic

570023

235700

002357

Split-Comp.

570023

005709

004E57

Tetradic

570023

4E5700

005734

090057

Contrast Matrix WCAG 2.1 Contrast

570023	8E754B	7A4B3D	6B2831	A8AD5E
—	3.4 AA Large	2.0 Fail	1.4 Fail	6.2 AA
3.4 AA Large	—	1.7 Fail	2.4 Fail	1.8 Fail
2.0 Fail	1.7 Fail	—	1.5 Fail	3.0 AA Large
1.4 Fail	2.4 Fail	1.5 Fail	—	4.5 AA Large
6.2 AA	1.8 Fail	3.0 AA Large	4.5 AA Large	—

White BG

14.7AAA

4.4AA Large

7.2AAA

10.6AAA

2.4Fail

Black BG

1.4Fail

4.8AA

2.9Fail

2.0Fail

8.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

31311B

838355

666540

4E4D2F

AAAA71

Deuteranopia

363D19

858758

686C41

52572E

AAAA76

Tritanopia

531412

8D5D5F

784344

682D2D

A88084

Achromatopsia

1E1E1E

787878

575757

3D3D3D

A2A2A2

Shades & Tints Shades & Tints

#570023

Dark

Light

#8E754B

Dark

Light

#7A4B3D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #570023;
  --color-2: #8e754b;
  --color-3: #7a4b3d;
  --color-4: #6b2831;
  --color-5: #a8ad5e;
}

SCSS

$color-1: #570023;
$color-2: #8e754b;
$color-3: #7a4b3d;
$color-4: #6b2831;
$color-5: #a8ad5e;

TAILWIND

colors: {
  'brand-1': '#570023',
  'brand-2': '#8e754b',
  'brand-3': '#7a4b3d',
  'brand-4': '#6b2831',
  'brand-5': '#a8ad5e',
}

RGB Array

[87, 0, 35], [142, 117, 75], [122, 75, 61], [107, 40, 49], [168, 173, 94]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #570023, #8E754B, #7A4B3D, #6B2831, #A8AD5E 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: #570023; --color-2: #8e754b; --color-3: #7a4b3d; --color-4: #6b2831; --color-5: #a8ad5e. 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