← Back to Editor

#CBC7C4 · #B0A585 · #BD8A37 · #B1370E · #2C2220

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

#CBC7C4

Silver Gray · Silver · Pearl Gray

HEX
#CBC7C4
RGB
rgb(203, 199, 196)
HSL
hsl(26, 6%, 78%)
HSB
hsb(26, 3%, 80%)
CMYK
cmyk(0%, 2%, 3%, 20%)
Oklch
oklch(83.2% 0.006 59.6)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#B0A585

Ginger · DarkGray · Sunflower

HEX
#B0A585
RGB
rgb(176, 165, 133)
HSL
hsl(45, 21%, 61%)
HSB
hsb(45, 24%, 69%)
CMYK
cmyk(0%, 6%, 24%, 31%)
Oklch
oklch(72.3% 0.046 91.3)

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

#BD8A37

Ochre · DarkGoldenRod · Amber Brown

HEX
#BD8A37
RGB
rgb(189, 138, 55)
HSL
hsl(37, 55%, 48%)
HSB
hsb(37, 71%, 74%)
CMYK
cmyk(0%, 27%, 71%, 26%)
Oklch
oklch(66.8% 0.116 76.3)

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

#B1370E

Tangerine · FireBrick · Amber Brown

HEX
#B1370E
RGB
rgb(177, 55, 14)
HSL
hsl(15, 85%, 37%)
HSB
hsb(15, 92%, 69%)
CMYK
cmyk(0%, 69%, 92%, 31%)
Oklch
oklch(51.3% 0.165 36.6)

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

#2C2220

Crimson · Black · Deep Berry

HEX
#2C2220
RGB
rgb(44, 34, 32)
HSL
hsl(10, 16%, 15%)
HSB
hsb(10, 27%, 17%)
CMYK
cmyk(0%, 23%, 27%, 83%)
Oklch
oklch(26.3% 0.016 31.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

CBC7C4
C4C7CA

Analogous

CAC4C4
CBC7C4
CACAC4

Triadic

CBC7C4
C4CAC6
C6C4CA

Split-Comp.

CBC7C4
C4CACA
C4C4CA

Tetradic

CBC7C4
C4CAC4
C4C7CA
CAC4CA

Contrast Matrix WCAG 2.1 Contrast

CBC7C4
B0A585
BD8A37
B1370E
2C2220
—
1.5
Fail
1.8
Fail
3.7
AA Large
9.2
AAA
1.5
Fail
—
1.2
Fail
2.5
Fail
6.3
AA
1.8
Fail
1.2
Fail
—
2.0
Fail
5.1
AA
3.7
AA Large
2.5
Fail
2.0
Fail
—
2.5
Fail
9.2
AAA
6.3
AA
5.1
AA
2.5
Fail
—
White BG
1.7Fail
2.5Fail
3.1AA Large
6.1AA
15.5AAA
Black BG
12.5AAA
8.6AAA
6.9AA
3.4AA Large
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9C9C5
ABAB8D
A7A64B
7C7B18
282820

Deuteranopia

CACAC5
ACAD8F
AAAE50
838C1A
282921

Tritanopia

CBC5C5
AF9394
BA5B5E
AB2021
2C2121

Achromatopsia

C8C8C8
A5A5A5
909090
575757
252525

Shades & Tints Shades & Tints

#CBC7C4

Dark
Light

#B0A585

Dark
Light

#BD8A37

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #cbc7c4;
  --color-2: #b0a585;
  --color-3: #bd8a37;
  --color-4: #b1370e;
  --color-5: #2c2220;
}

SCSS

$color-1: #cbc7c4;
$color-2: #b0a585;
$color-3: #bd8a37;
$color-4: #b1370e;
$color-5: #2c2220;

TAILWIND

colors: {
  'brand-1': '#cbc7c4',
  'brand-2': '#b0a585',
  'brand-3': '#bd8a37',
  'brand-4': '#b1370e',
  'brand-5': '#2c2220',
}

RGB Array

[203, 199, 196], [176, 165, 133], [189, 138, 55], [177, 55, 14], [44, 34, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #CBC7C4, #B0A585, #BD8A37, #B1370E, #2C2220 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: #cbc7c4; --color-2: #b0a585; --color-3: #bd8a37; --color-4: #b1370e; --color-5: #2c2220. 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