← Back to Editor

#A32A19 · #DAC2AA · #A89B88 · #CF4C1E · #AF2018

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

#A32A19

Vermilion · Brown · Wine Red

HEX
#A32A19
RGB
rgb(163, 42, 25)
HSL
hsl(7, 73%, 37%)
HSB
hsb(7, 85%, 64%)
CMYK
cmyk(0%, 74%, 85%, 36%)
Oklch
oklch(47.5% 0.160 31.2)

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

#DAC2AA

Goose Yellow · Tan · Peach Orange

HEX
#DAC2AA
RGB
rgb(218, 194, 170)
HSL
hsl(30, 39%, 76%)
HSB
hsb(30, 22%, 85%)
CMYK
cmyk(0%, 11%, 22%, 15%)
Oklch
oklch(82.8% 0.043 67.2)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#A89B88

Ginger · DarkGray · Warm Sun

HEX
#A89B88
RGB
rgb(168, 155, 136)
HSL
hsl(36, 16%, 60%)
HSB
hsb(36, 19%, 66%)
CMYK
cmyk(0%, 8%, 19%, 34%)
Oklch
oklch(69.5% 0.031 77.4)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#CF4C1E

Tangerine · Chocolate · Amber Brown

HEX
#CF4C1E
RGB
rgb(207, 76, 30)
HSL
hsl(16, 75%, 46%)
HSB
hsb(16, 86%, 81%)
CMYK
cmyk(0%, 63%, 86%, 19%)
Oklch
oklch(58.9% 0.175 38.0)

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

#AF2018

Vermilion · FireBrick · Wine Red

HEX
#AF2018
RGB
rgb(175, 32, 24)
HSL
hsl(3, 76%, 39%)
HSB
hsb(3, 86%, 69%)
CMYK
cmyk(0%, 82%, 86%, 31%)
Oklch
oklch(48.9% 0.179 29.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A32A19
1993A3

Analogous

A3194E
A32A19
A36E19

Triadic

A32A19
19A32A
2A19A3

Split-Comp.

A32A19
19A36E
194EA3

Tetradic

A32A19
4EA319
1993A3
6E19A3

Contrast Matrix WCAG 2.1 Contrast

A32A19
DAC2AA
A89B88
CF4C1E
AF2018
—
4.2
AA Large
2.7
Fail
1.6
Fail
1.0
Fail
4.2
AA Large
—
1.6
Fail
2.6
Fail
4.0
AA Large
2.7
Fail
1.6
Fail
—
1.6
Fail
2.5
Fail
1.6
Fail
2.6
Fail
1.6
Fail
—
1.5
Fail
1.0
Fail
4.0
AA Large
2.5
Fail
1.5
Fail
—
White BG
7.2AAA
1.7Fail
2.7Fail
4.5AA Large
6.9AA
Black BG
2.9Fail
12.3AAA
7.7AAA
4.7AA
3.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F6E1D
D0CFB0
A2A28D
969529
71701A

Deuteranopia

767F1E
D1D3B1
A3A48E
9EA82C
79841A

Tritanopia

9D2021
D9B4B5
A79091
C83234
A81B1C

Achromatopsia

4C4C4C
C6C6C6
9D9D9D
6E6E6E
4A4A4A

Shades & Tints Shades & Tints

#A32A19

Dark
Light

#DAC2AA

Dark
Light

#A89B88

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a32a19;
  --color-2: #dac2aa;
  --color-3: #a89b88;
  --color-4: #cf4c1e;
  --color-5: #af2018;
}

SCSS

$color-1: #a32a19;
$color-2: #dac2aa;
$color-3: #a89b88;
$color-4: #cf4c1e;
$color-5: #af2018;

TAILWIND

colors: {
  'brand-1': '#a32a19',
  'brand-2': '#dac2aa',
  'brand-3': '#a89b88',
  'brand-4': '#cf4c1e',
  'brand-5': '#af2018',
}

RGB Array

[163, 42, 25], [218, 194, 170], [168, 155, 136], [207, 76, 30], [175, 32, 24]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A32A19, #DAC2AA, #A89B88, #CF4C1E, #AF2018 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: #a32a19; --color-2: #dac2aa; --color-3: #a89b88; --color-4: #cf4c1e; --color-5: #af2018. 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