#571E30 + #68424E + #A86C3E + #E66F14 + #E6A214 · 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

#571E30

Dark Violet · Maroon · Raspberry

HEX

#571E30

RGB

rgb(87, 30, 48)

HSL

hsl(341, 49%, 23%)

HSB

hsb(341, 66%, 34%)

CMYK

cmyk(0%, 66%, 45%, 66%)

Oklch

oklch(32.8% 0.086 3.5)

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

#68424E

Dark Violet · DimGray · Camellia

HEX

#68424E

RGB

rgb(104, 66, 78)

HSL

hsl(341, 22%, 33%)

HSB

hsb(341, 37%, 41%)

CMYK

cmyk(0%, 37%, 25%, 59%)

Oklch

oklch(42.7% 0.055 359.2)

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

#A86C3E

Tangerine · Sienna · Amber Brown

HEX

#A86C3E

RGB

rgb(168, 108, 62)

HSL

hsl(26, 46%, 45%)

HSB

hsb(26, 63%, 66%)

CMYK

cmyk(0%, 36%, 63%, 34%)

Oklch

oklch(58.6% 0.098 56.8)

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

#E66F14

Tangerine · Chocolate · Amber Brown

HEX

#E66F14

RGB

rgb(230, 111, 20)

HSL

hsl(26, 84%, 49%)

HSB

hsb(26, 91%, 90%)

CMYK

cmyk(0%, 52%, 91%, 10%)

Oklch

oklch(67.2% 0.172 49.9)

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

#E6A214

Ochre · GoldenRod · Honey Gold

HEX

#E6A214

RGB

rgb(230, 162, 20)

HSL

hsl(41, 84%, 49%)

HSB

hsb(41, 91%, 90%)

CMYK

cmyk(0%, 30%, 91%, 10%)

Oklch

oklch(75.9% 0.155 77.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

571E30

1E5745

Analogous

571E4D

571E30

57281E

Triadic

571E30

30571E

1E3057

Split-Comp.

571E30

1E5728

1E4D57

Tetradic

571E30

4D571E

1E5745

281E57

Contrast Matrix WCAG 2.1 Contrast

571E30	68424E	A86C3E	E66F14	E6A214
—	1.5 Fail	3.0 Fail	4.1 AA Large	5.8 AA
1.5 Fail	—	2.0 Fail	2.7 Fail	3.9 AA Large
3.0 Fail	2.0 Fail	—	1.4 Fail	2.0 Fail
4.1 AA Large	2.7 Fail	1.4 Fail	—	1.4 Fail
5.8 AA	3.9 AA Large	2.0 Fail	1.4 Fail	—

White BG

12.9AAA

8.5AAA

4.3AA Large

3.2AA Large

2.2Fail

Black BG

1.6Fail

2.5Fail

4.9AA

6.6AA

9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3E3E2C

58574B

8E8D49

B2B12A

C9C836

Deuteranopia

42462B

5A5D4A

92964C

B9C22F

CDD23F

Tritanopia

542827

664948

A55254

E03B3F

E35157

Achromatopsia

313131

4F4F4F

797979

888888

A6A6A6

Shades & Tints Shades & Tints

#571E30

Dark

Light

#68424E

Dark

Light

#A86C3E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #571e30;
  --color-2: #68424e;
  --color-3: #a86c3e;
  --color-4: #e66f14;
  --color-5: #e6a214;
}

SCSS

$color-1: #571e30;
$color-2: #68424e;
$color-3: #a86c3e;
$color-4: #e66f14;
$color-5: #e6a214;

TAILWIND

colors: {
  'brand-1': '#571e30',
  'brand-2': '#68424e',
  'brand-3': '#a86c3e',
  'brand-4': '#e66f14',
  'brand-5': '#e6a214',
}

RGB Array

[87, 30, 48], [104, 66, 78], [168, 108, 62], [230, 111, 20], [230, 162, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #571E30, #68424E, #A86C3E, #E66F14, #E6A214 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: #571e30; --color-2: #68424e; --color-3: #a86c3e; --color-4: #e66f14; --color-5: #e6a214. 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