#A81533 + #B8401F + #BA7F20 + #A8A454 + #212529 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A81533

Vermilion · Brown · Wine Red

HEX

#A81533

RGB

rgb(168, 21, 51)

HSL

hsl(348, 78%, 37%)

HSB

hsb(348, 87%, 66%)

CMYK

cmyk(0%, 87%, 70%, 34%)

Oklch

oklch(47.2% 0.177 18.1)

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

#B8401F

Vermilion · FireBrick · Passion Red

HEX

#B8401F

RGB

rgb(184, 64, 31)

HSL

hsl(13, 71%, 42%)

HSB

hsb(13, 83%, 72%)

CMYK

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

Oklch

oklch(53.7% 0.162 35.7)

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

#BA7F20

Ochre · DarkGoldenRod · Amber Brown

HEX

#BA7F20

RGB

rgb(186, 127, 32)

HSL

hsl(37, 71%, 43%)

HSB

hsb(37, 83%, 73%)

CMYK

cmyk(0%, 32%, 83%, 27%)

Oklch

oklch(64.2% 0.126 73.4)

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

#A8A454

Autumn Sage · DarkSeaGreen · Honey Gold

HEX

#A8A454

RGB

rgb(168, 164, 84)

HSL

hsl(57, 33%, 49%)

HSB

hsb(57, 50%, 66%)

CMYK

cmyk(0%, 2%, 50%, 34%)

Oklch

oklch(70.5% 0.103 106.2)

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

#212529

Indigo · DarkSlateGray · Deep Sea Blue

HEX

#212529

RGB

rgb(33, 37, 41)

HSL

hsl(210, 11%, 15%)

HSB

hsb(210, 20%, 16%)

CMYK

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

Oklch

oklch(26.2% 0.009 248.2)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A81533

15A88B

Analogous

A8157C

A81533

A84115

Triadic

A81533

32A815

1532A8

Split-Comp.

A81533

15A841

157CA8

Tetradic

A81533

7CA815

15A88B

4115A8

Contrast Matrix WCAG 2.1 Contrast

A81533	B8401F	BA7F20	A8A454	212529
—	1.3 Fail	2.2 Fail	2.9 Fail	2.1 Fail
1.3 Fail	—	1.6 Fail	2.1 Fail	2.8 Fail
2.2 Fail	1.6 Fail	—	1.3 Fail	4.5 AA
2.9 Fail	2.1 Fail	1.3 Fail	—	6.0 AA
2.1 Fail	2.8 Fail	4.5 AA	6.0 AA	—

White BG

7.4AAA

5.5AA

3.4AA Large

2.6Fail

15.4AAA

Black BG

2.8Fail

3.8AA Large

6.1AA

8.1AAA

1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

68672C

848327

A0A037

A6A667

232328

Deuteranopia

717C2A

8B9429

A4A83D

A7A76C

232228

Tritanopia

A12625

B22D2F

B7494D

A8777A

212727

Achromatopsia

444444

606060

868686

9C9C9C

242424

Shades & Tints Shades & Tints

#A81533

Dark

Light

#B8401F

Dark

Light

#BA7F20

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a81533;
  --color-2: #b8401f;
  --color-3: #ba7f20;
  --color-4: #a8a454;
  --color-5: #212529;
}

SCSS

$color-1: #a81533;
$color-2: #b8401f;
$color-3: #ba7f20;
$color-4: #a8a454;
$color-5: #212529;

TAILWIND

colors: {
  'brand-1': '#a81533',
  'brand-2': '#b8401f',
  'brand-3': '#ba7f20',
  'brand-4': '#a8a454',
  'brand-5': '#212529',
}

RGB Array

[168, 21, 51], [184, 64, 31], [186, 127, 32], [168, 164, 84], [33, 37, 41]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A81533, #B8401F, #BA7F20, #A8A454, #212529 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: #a81533; --color-2: #b8401f; --color-3: #ba7f20; --color-4: #a8a454; --color-5: #212529. 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