← Back to Editor

#AA1F26 · #9A9381 · #764E46 · #B19156 · #E4D4BD

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 LibraryData Visualization

Color Details Color Details

#AA1F26

Vermilion · FireBrick · Wine Red

HEX
#AA1F26
RGB
rgb(170, 31, 38)
HSL
hsl(357, 69%, 39%)
HSB
hsb(357, 82%, 67%)
CMYK
cmyk(0%, 82%, 78%, 33%)
Oklch
oklch(48.0% 0.174 24.7)

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

#9A9381

Ginger · Gray · Sunflower

HEX
#9A9381
RGB
rgb(154, 147, 129)
HSL
hsl(43, 11%, 55%)
HSB
hsb(43, 16%, 60%)
CMYK
cmyk(0%, 5%, 16%, 40%)
Oklch
oklch(66.4% 0.027 89.3)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#764E46

Crimson · DimGray · Wine Red

HEX
#764E46
RGB
rgb(118, 78, 70)
HSL
hsl(10, 26%, 37%)
HSB
hsb(10, 41%, 46%)
CMYK
cmyk(0%, 34%, 41%, 54%)
Oklch
oklch(46.6% 0.056 31.8)

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

#B19156

Ginger · Gray · Warm Sun

HEX
#B19156
RGB
rgb(177, 145, 86)
HSL
hsl(39, 37%, 52%)
HSB
hsb(39, 51%, 69%)
CMYK
cmyk(0%, 18%, 51%, 31%)
Oklch
oklch(67.3% 0.086 81.7)

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

#E4D4BD

Goose Yellow · Wheat · Peach Orange

HEX
#E4D4BD
RGB
rgb(228, 212, 189)
HSL
hsl(35, 42%, 82%)
HSB
hsb(35, 17%, 89%)
CMYK
cmyk(0%, 7%, 17%, 11%)
Oklch
oklch(87.7% 0.036 77.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

AA1F26
1FA8A1

Analogous

A81F6A
AA1F26
A85D1F

Triadic

AA1F26
26A81F
1F26A8

Split-Comp.

AA1F26
1FA85D
1F6AA8

Tetradic

AA1F26
6AA81F
1FA8A1
5D1FA8

Contrast Matrix WCAG 2.1 Contrast

AA1F26
9A9381
764E46
B19156
E4D4BD
—
2.3
Fail
1.0
Fail
2.4
Fail
4.9
AA
2.3
Fail
—
2.3
Fail
1.0
Fail
2.1
Fail
1.0
Fail
2.3
Fail
—
2.4
Fail
4.9
AA
2.4
Fail
1.0
Fail
2.4
Fail
—
2.0
Fail
4.9
AA
2.1
Fail
4.9
AA
2.0
Fail
—
White BG
7.2AAA
3.1AA Large
7.1AAA
3.0Fail
1.5Fail
Black BG
2.9Fail
6.9AA
2.9Fail
7.1AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6E6D24
979785
656448
A3A364
DDDDC3

Deuteranopia

768024
979886
676A48
A5A768
DEDFC4

Tritanopia

A32323
9A898A
74494A
AF7072
E3C7C8

Achromatopsia

494949
939393
595959
949494
D6D6D6

Shades & Tints Shades & Tints

#AA1F26

Dark
Light

#9A9381

Dark
Light

#764E46

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #aa1f26;
  --color-2: #9a9381;
  --color-3: #764e46;
  --color-4: #b19156;
  --color-5: #e4d4bd;
}

SCSS

$color-1: #aa1f26;
$color-2: #9a9381;
$color-3: #764e46;
$color-4: #b19156;
$color-5: #e4d4bd;

TAILWIND

colors: {
  'brand-1': '#aa1f26',
  'brand-2': '#9a9381',
  'brand-3': '#764e46',
  'brand-4': '#b19156',
  'brand-5': '#e4d4bd',
}

RGB Array

[170, 31, 38], [154, 147, 129], [118, 78, 70], [177, 145, 86], [228, 212, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #AA1F26, #9A9381, #764E46, #B19156, #E4D4BD is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #aa1f26; --color-2: #9a9381; --color-3: #764e46; --color-4: #b19156; --color-5: #e4d4bd. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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