← Back to Editor

#C4B997 · #ABA080 · #8F8567 · #6B0B0B · #450606

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

#C4B997

Ginger · Tan · Sunflower

HEX
#C4B997
RGB
rgb(196, 185, 151)
HSL
hsl(45, 28%, 68%)
HSB
hsb(45, 23%, 77%)
CMYK
cmyk(0%, 6%, 23%, 23%)
Oklch
oklch(78.6% 0.048 92.2)

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

#ABA080

Ginger · DarkGray · Sunflower

HEX
#ABA080
RGB
rgb(171, 160, 128)
HSL
hsl(45, 20%, 59%)
HSB
hsb(45, 25%, 67%)
CMYK
cmyk(0%, 6%, 25%, 33%)
Oklch
oklch(70.7% 0.046 91.3)

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

#8F8567

Ochre · Gray · Honey Gold

HEX
#8F8567
RGB
rgb(143, 133, 103)
HSL
hsl(45, 16%, 48%)
HSB
hsb(45, 28%, 56%)
CMYK
cmyk(0%, 7%, 28%, 44%)
Oklch
oklch(61.8% 0.045 91.8)

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

#6B0B0B

Vermilion · Maroon · Wine Red

HEX
#6B0B0B
RGB
rgb(107, 11, 11)
HSL
hsl(0, 81%, 23%)
HSB
hsb(0, 90%, 42%)
CMYK
cmyk(0%, 90%, 90%, 58%)
Oklch
oklch(33.9% 0.128 27.6)

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

#450606

Vermilion · Maroon · Deep Berry

HEX
#450606
RGB
rgb(69, 6, 6)
HSL
hsl(0, 84%, 15%)
HSB
hsb(0, 91%, 27%)
CMYK
cmyk(0%, 91%, 91%, 73%)
Oklch
oklch(25.3% 0.093 27.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4B997
97A2C4

Analogous

C4A297
C4B997
B9C497

Triadic

C4B997
97C4B9
B997C4

Split-Comp.

C4B997
97B9C4
A297C4

Tetradic

C4B997
97C4A2
97A2C4
C497B9

Contrast Matrix WCAG 2.1 Contrast

C4B997
ABA080
8F8567
6B0B0B
450606
—
1.3
Fail
1.9
Fail
6.4
AA
8.4
AAA
1.3
Fail
—
1.4
Fail
4.8
AA
6.3
AA
1.9
Fail
1.4
Fail
—
3.4
AA Large
4.5
AA Large
6.4
AA
4.8
AA
3.4
AA Large
—
1.3
Fail
8.4
AAA
6.3
AA
4.5
AA Large
1.3
Fail
—
White BG
2.0Fail
2.6Fail
3.7AA Large
12.5AAA
16.4AAA
Black BG
10.7AAA
8.1AAA
5.7AA
1.7Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBF9F
A6A688
8B8B6E
41410B
2A2906

Deuteranopia

C0C1A1
A7A88A
8B8C70
474E0B
2D3206

Tritanopia

C3A6A7
AA8E8F
8F7475
660B0B
420606

Achromatopsia

B8B8B8
A0A0A0
858585
282828
191919

Shades & Tints Shades & Tints

#C4B997

Dark
Light

#ABA080

Dark
Light

#8F8567

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4b997;
  --color-2: #aba080;
  --color-3: #8f8567;
  --color-4: #6b0b0b;
  --color-5: #450606;
}

SCSS

$color-1: #c4b997;
$color-2: #aba080;
$color-3: #8f8567;
$color-4: #6b0b0b;
$color-5: #450606;

TAILWIND

colors: {
  'brand-1': '#c4b997',
  'brand-2': '#aba080',
  'brand-3': '#8f8567',
  'brand-4': '#6b0b0b',
  'brand-5': '#450606',
}

RGB Array

[196, 185, 151], [171, 160, 128], [143, 133, 103], [107, 11, 11], [69, 6, 6]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4B997, #ABA080, #8F8567, #6B0B0B, #450606 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: #c4b997; --color-2: #aba080; --color-3: #8f8567; --color-4: #6b0b0b; --color-5: #450606. 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