#421D22 + #E3172F + #A67530 + #979C1C + #ABA241 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#421D22

Crimson · DarkSlateGray · Deep Berry

HEX

#421D22

RGB

rgb(66, 29, 34)

HSL

hsl(352, 39%, 19%)

HSB

hsb(352, 56%, 26%)

CMYK

cmyk(0%, 56%, 48%, 74%)

Oklch

oklch(28.5% 0.057 12.9)

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

#E3172F

Vermilion · Crimson · Passion Red

HEX

#E3172F

RGB

rgb(227, 23, 47)

HSL

hsl(353, 82%, 49%)

HSB

hsb(353, 90%, 89%)

CMYK

cmyk(0%, 90%, 79%, 11%)

Oklch

oklch(58.4% 0.227 24.1)

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

#A67530

Ochre · Sienna · Amber Brown

HEX

#A67530

RGB

rgb(166, 117, 48)

HSL

hsl(35, 55%, 42%)

HSB

hsb(35, 71%, 65%)

CMYK

cmyk(0%, 30%, 71%, 35%)

Oklch

oklch(59.9% 0.105 72.4)

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

#979C1C

Autumn Sage · DarkGoldenRod · Honey Gold

HEX

#979C1C

RGB

rgb(151, 156, 28)

HSL

hsl(62, 70%, 36%)

HSB

hsb(62, 82%, 61%)

CMYK

cmyk(3%, 0%, 82%, 39%)

Oklch

oklch(66.7% 0.140 112.0)

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

#ABA241

Autumn Sage · GoldenRod · Honey Gold

HEX

#ABA241

RGB

rgb(171, 162, 65)

HSL

hsl(55, 45%, 46%)

HSB

hsb(55, 62%, 67%)

CMYK

cmyk(0%, 5%, 62%, 33%)

Oklch

oklch(70.1% 0.118 104.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

421D22

1E433E

Analogous

431E35

421D22

432B1E

Triadic

421D22

23431E

1E2343

Split-Comp.

421D22

1E432B

1E3543

Tetradic

421D22

35431E

1E433E

2B1E43

Contrast Matrix WCAG 2.1 Contrast

421D22	E3172F	A67530	979C1C	ABA241
—	3.1 AA Large	3.6 AA Large	5.0 AA	5.6 AA
3.1 AA Large	—	1.2 Fail	1.6 Fail	1.8 Fail
3.6 AA Large	1.2 Fail	—	1.4 Fail	1.5 Fail
5.0 AA	1.6 Fail	1.4 Fail	—	1.1 Fail
5.6 AA	1.8 Fail	1.5 Fail	1.1 Fail	—

White BG

14.7AAA

4.7AA

4.0AA Large

3.0Fail

2.6Fail

Black BG

1.4Fail

4.4AA Large

5.2AA

7.1AAA

8.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

323221

8B8929

919041

99993B

A7A758

Deuteranopia

343721

97A628

949745

999942

A8A85E

Tritanopia

402020

D92524

A44E51

975359

AB6B6F

Achromatopsia

292929

575757

7C7C7C

8C8C8C

9A9A9A

Shades & Tints Shades & Tints

#421D22

Dark

Light

#E3172F

Dark

Light

#A67530

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #421d22;
  --color-2: #e3172f;
  --color-3: #a67530;
  --color-4: #979c1c;
  --color-5: #aba241;
}

SCSS

$color-1: #421d22;
$color-2: #e3172f;
$color-3: #a67530;
$color-4: #979c1c;
$color-5: #aba241;

TAILWIND

colors: {
  'brand-1': '#421d22',
  'brand-2': '#e3172f',
  'brand-3': '#a67530',
  'brand-4': '#979c1c',
  'brand-5': '#aba241',
}

RGB Array

[66, 29, 34], [227, 23, 47], [166, 117, 48], [151, 156, 28], [171, 162, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #421D22, #E3172F, #A67530, #979C1C, #ABA241 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: #421d22; --color-2: #e3172f; --color-3: #a67530; --color-4: #979c1c; --color-5: #aba241. 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 cool-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