← Back to Editor

#A21B22 · #A03D1E · #9F5F22 · #A39041 · #C1B696

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#A21B22

Vermilion · Brown · Wine Red

HEX
#A21B22
RGB
rgb(162, 27, 34)
HSL
hsl(357, 71%, 37%)
HSB
hsb(357, 83%, 64%)
CMYK
cmyk(0%, 83%, 79%, 36%)
Oklch
oklch(46.2% 0.169 24.9)

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

#A03D1E

Vermilion · Brown · Wine Red

HEX
#A03D1E
RGB
rgb(160, 61, 30)
HSL
hsl(14, 68%, 37%)
HSB
hsb(14, 81%, 63%)
CMYK
cmyk(0%, 62%, 81%, 37%)
Oklch
oklch(49.3% 0.139 37.3)

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

#9F5F22

Tangerine · Sienna · Amber Brown

HEX
#9F5F22
RGB
rgb(159, 95, 34)
HSL
hsl(29, 65%, 38%)
HSB
hsb(29, 79%, 62%)
CMYK
cmyk(0%, 40%, 79%, 38%)
Oklch
oklch(54.7% 0.111 60.0)

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

#A39041

Ochre · DarkGoldenRod · Honey Gold

HEX
#A39041
RGB
rgb(163, 144, 65)
HSL
hsl(48, 43%, 45%)
HSB
hsb(48, 60%, 64%)
CMYK
cmyk(0%, 12%, 60%, 36%)
Oklch
oklch(65.4% 0.102 95.9)

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

#C1B696

Ginger · Tan · Sunflower

HEX
#C1B696
RGB
rgb(193, 182, 150)
HSL
hsl(45, 26%, 67%)
HSB
hsb(45, 22%, 76%)
CMYK
cmyk(0%, 6%, 22%, 24%)
Oklch
oklch(77.7% 0.045 91.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A21B22
1BA19B

Analogous

A11B65
A21B22
A1581B

Triadic

A21B22
22A11B
1B22A1

Split-Comp.

A21B22
1BA158
1B65A1

Tetradic

A21B22
65A11B
1BA19B
581BA1

Contrast Matrix WCAG 2.1 Contrast

A21B22
A03D1E
9F5F22
A39041
C1B696
—
1.2
Fail
1.5
Fail
2.4
Fail
3.8
AA Large
1.2
Fail
—
1.3
Fail
2.1
Fail
3.3
AA Large
1.5
Fail
1.3
Fail
—
1.6
Fail
2.5
Fail
2.4
Fail
2.1
Fail
1.6
Fail
—
1.6
Fail
3.8
AA Large
3.3
AA Large
2.5
Fail
1.6
Fail
—
White BG
7.7AAA
6.6AA
5.1AA
3.2AA Large
2.0Fail
Black BG
2.7Fail
3.2AA Large
4.1AA Large
6.6AA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

686620
757426
838331
9B9B54
BCBC9E

Deuteranopia

6F7920
7B8227
878C34
9C9D59
BDBEA0

Tritanopia

9B1F1F
9B2B2D
9C3C3F
A26367
C0A4A5

Achromatopsia

444444
575757
6B6B6B
8D8D8D
B6B6B6

Shades & Tints Shades & Tints

#A21B22

Dark
Light

#A03D1E

Dark
Light

#9F5F22

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a21b22;
  --color-2: #a03d1e;
  --color-3: #9f5f22;
  --color-4: #a39041;
  --color-5: #c1b696;
}

SCSS

$color-1: #a21b22;
$color-2: #a03d1e;
$color-3: #9f5f22;
$color-4: #a39041;
$color-5: #c1b696;

TAILWIND

colors: {
  'brand-1': '#a21b22',
  'brand-2': '#a03d1e',
  'brand-3': '#9f5f22',
  'brand-4': '#a39041',
  'brand-5': '#c1b696',
}

RGB Array

[162, 27, 34], [160, 61, 30], [159, 95, 34], [163, 144, 65], [193, 182, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A21B22, #A03D1E, #9F5F22, #A39041, #C1B696 is ideal for: corporate websites, product showcases, portfolios. 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: #a21b22; --color-2: #a03d1e; --color-3: #9f5f22; --color-4: #a39041; --color-5: #c1b696. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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