← Back to Editor

#BBB699 · #C5977D · #D47C4E · #5F4C2C · #120E0D

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

#BBB699

Fresh Green · Tan · Sunflower

HEX
#BBB699
RGB
rgb(187, 182, 153)
HSL
hsl(51, 20%, 67%)
HSB
hsb(51, 18%, 73%)
CMYK
cmyk(0%, 3%, 18%, 27%)
Oklch
oklch(77.3% 0.040 99.2)

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

#C5977D

Apricot · Tan · Warm Sun

HEX
#C5977D
RGB
rgb(197, 151, 125)
HSL
hsl(22, 38%, 63%)
HSB
hsb(22, 37%, 77%)
CMYK
cmyk(0%, 23%, 37%, 23%)
Oklch
oklch(71.3% 0.066 50.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#D47C4E

Tangerine · Coral · Warm Sun

HEX
#D47C4E
RGB
rgb(212, 124, 78)
HSL
hsl(21, 61%, 57%)
HSB
hsb(21, 63%, 83%)
CMYK
cmyk(0%, 42%, 63%, 17%)
Oklch
oklch(67.3% 0.125 47.3)

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

#5F4C2C

Ochre · DarkOliveGreen · Amber Brown

HEX
#5F4C2C
RGB
rgb(95, 76, 44)
HSL
hsl(38, 37%, 27%)
HSB
hsb(38, 54%, 37%)
CMYK
cmyk(0%, 20%, 54%, 63%)
Oklch
oklch(42.8% 0.054 79.6)

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

#120E0D

Crimson · Black · Deep Berry

HEX
#120E0D
RGB
rgb(18, 14, 13)
HSL
hsl(12, 16%, 6%)
HSB
hsb(12, 28%, 7%)
CMYK
cmyk(0%, 22%, 28%, 93%)
Oklch
oklch(16.8% 0.007 34.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBB699
9A9FBC

Analogous

BCA69A
BBB699
B0BC9A

Triadic

BBB699
9ABCB7
B79ABC

Split-Comp.

BBB699
9AB0BC
A69ABC

Tetradic

BBB699
9ABCA6
9A9FBC
BC9AB0

Contrast Matrix WCAG 2.1 Contrast

BBB699
C5977D
D47C4E
5F4C2C
120E0D
—
1.3
Fail
1.5
Fail
4.0
AA Large
9.4
AAA
1.3
Fail
—
1.2
Fail
3.2
AA Large
7.4
AAA
1.5
Fail
1.2
Fail
—
2.7
Fail
6.2
AA
4.0
AA Large
3.2
AA Large
2.7
Fail
—
2.3
Fail
9.4
AAA
7.4
AAA
6.2
AA
2.3
Fail
—
White BG
2.0Fail
2.6Fail
3.1AA Large
8.2AAA
19.2AAA
Black BG
10.3AAA
8.1AAA
6.8AA
2.6Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B9B9A0
B1B183
AEAD59
575734
10100D

Deuteranopia

B9BAA2
B4B785
B3BA5C
585936
11110D

Tritanopia

BBA6A7
C38889
D06264
5E3A3B
120D0D

Achromatopsia

B4B4B4
A2A2A2
919191
4E4E4E
0F0F0F

Shades & Tints Shades & Tints

#BBB699

Dark
Light

#C5977D

Dark
Light

#D47C4E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbb699;
  --color-2: #c5977d;
  --color-3: #d47c4e;
  --color-4: #5f4c2c;
  --color-5: #120e0d;
}

SCSS

$color-1: #bbb699;
$color-2: #c5977d;
$color-3: #d47c4e;
$color-4: #5f4c2c;
$color-5: #120e0d;

TAILWIND

colors: {
  'brand-1': '#bbb699',
  'brand-2': '#c5977d',
  'brand-3': '#d47c4e',
  'brand-4': '#5f4c2c',
  'brand-5': '#120e0d',
}

RGB Array

[187, 182, 153], [197, 151, 125], [212, 124, 78], [95, 76, 44], [18, 14, 13]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBB699, #C5977D, #D47C4E, #5F4C2C, #120E0D 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: #bbb699; --color-2: #c5977d; --color-3: #d47c4e; --color-4: #5f4c2c; --color-5: #120e0d. 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