← Back to Editor

#C4BF7D · #B1AB89 · #332C22 · #AC4C22 · #D8CCA6

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

#C4BF7D

Fresh Green · Tan · Sunflower

HEX
#C4BF7D
RGB
rgb(196, 191, 125)
HSL
hsl(56, 38%, 63%)
HSB
hsb(56, 36%, 77%)
CMYK
cmyk(0%, 3%, 36%, 23%)
Oklch
oklch(79.3% 0.086 104.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#B1AB89

Fresh Green · DarkGray · Sunflower

HEX
#B1AB89
RGB
rgb(177, 171, 137)
HSL
hsl(51, 20%, 62%)
HSB
hsb(51, 23%, 69%)
CMYK
cmyk(0%, 3%, 23%, 31%)
Oklch
oklch(73.7% 0.047 99.1)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#332C22

Ochre · DarkSlateGray · Cinnamon

HEX
#332C22
RGB
rgb(51, 44, 34)
HSL
hsl(35, 20%, 17%)
HSB
hsb(35, 33%, 20%)
CMYK
cmyk(0%, 14%, 33%, 80%)
Oklch
oklch(29.8% 0.020 76.6)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#AC4C22

Tangerine · Sienna · Amber Brown

HEX
#AC4C22
RGB
rgb(172, 76, 34)
HSL
hsl(18, 67%, 40%)
HSB
hsb(18, 80%, 67%)
CMYK
cmyk(0%, 56%, 80%, 33%)
Oklch
oklch(53.4% 0.137 42.1)

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

#D8CCA6

Goose Yellow · Tan · Sunflower

HEX
#D8CCA6
RGB
rgb(216, 204, 166)
HSL
hsl(46, 39%, 75%)
HSB
hsb(46, 23%, 85%)
CMYK
cmyk(0%, 6%, 23%, 15%)
Oklch
oklch(84.5% 0.052 92.6)

Traditional「Goose Yellow」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4BF7D
7D82C5

Analogous

C59C7D
C4BF7D
A5C57D

Triadic

C4BF7D
7DC5C0
C07DC5

Split-Comp.

C4BF7D
7DA5C5
9C7DC5

Tetradic

C4BF7D
7DC59C
7D82C5
C57DA5

Contrast Matrix WCAG 2.1 Contrast

C4BF7D
B1AB89
332C22
AC4C22
D8CCA6
—
1.2
Fail
7.3
AAA
2.9
Fail
1.2
Fail
1.2
Fail
—
5.9
AA
2.4
Fail
1.4
Fail
7.3
AAA
5.9
AA
—
2.5
Fail
8.6
AAA
2.9
Fail
2.4
Fail
2.5
Fail
—
3.4
AA Large
1.2
Fail
1.4
Fail
8.6
AAA
3.4
AA Large
—
White BG
1.9Fail
2.3Fail
13.8AAA
5.5AA
1.6Fail
Black BG
11.1AAA
9.1AAA
1.5Fail
3.8AA Large
13.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C2C28D
AEAE91
303024
82822C
D3D3AF

Deuteranopia

C2C391
AFAF93
303125
888F2F
D4D4B1

Tritanopia

C49A9C
B19899
332627
A73436
D7B6B8

Achromatopsia

B9B9B9
A9A9A9
2D2D2D
646464
CBCBCB

Shades & Tints Shades & Tints

#C4BF7D

Dark
Light

#B1AB89

Dark
Light

#332C22

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4bf7d;
  --color-2: #b1ab89;
  --color-3: #332c22;
  --color-4: #ac4c22;
  --color-5: #d8cca6;
}

SCSS

$color-1: #c4bf7d;
$color-2: #b1ab89;
$color-3: #332c22;
$color-4: #ac4c22;
$color-5: #d8cca6;

TAILWIND

colors: {
  'brand-1': '#c4bf7d',
  'brand-2': '#b1ab89',
  'brand-3': '#332c22',
  'brand-4': '#ac4c22',
  'brand-5': '#d8cca6',
}

RGB Array

[196, 191, 125], [177, 171, 137], [51, 44, 34], [172, 76, 34], [216, 204, 166]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4BF7D, #B1AB89, #332C22, #AC4C22, #D8CCA6 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: #c4bf7d; --color-2: #b1ab89; --color-3: #332c22; --color-4: #ac4c22; --color-5: #d8cca6. 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