← Back to Editor

#B88857 · #C7B168 · #BDD0B0 · #7C92A0 · #364F6E

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#B88857

Ginger · DarkSalmon · Warm Sun

HEX
#B88857
RGB
rgb(184, 136, 87)
HSL
hsl(30, 41%, 53%)
HSB
hsb(30, 53%, 72%)
CMYK
cmyk(0%, 26%, 53%, 28%)
Oklch
oklch(66.3% 0.088 65.9)

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

#C7B168

Ginger · Tan · Sunflower

HEX
#C7B168
RGB
rgb(199, 177, 104)
HSL
hsl(46, 46%, 59%)
HSB
hsb(46, 48%, 78%)
CMYK
cmyk(0%, 11%, 48%, 22%)
Oklch
oklch(76.3% 0.096 93.1)

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

#BDD0B0

Celadon · Silver · Apple Green

HEX
#BDD0B0
RGB
rgb(189, 208, 176)
HSL
hsl(96, 25%, 75%)
HSB
hsb(96, 15%, 82%)
CMYK
cmyk(9%, 0%, 15%, 18%)
Oklch
oklch(83.5% 0.048 132.6)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#7C92A0

Slate Blue · LightSlateGray · Navy Blue

HEX
#7C92A0
RGB
rgb(124, 146, 160)
HSL
hsl(203, 16%, 56%)
HSB
hsb(203, 23%, 63%)
CMYK
cmyk(22%, 9%, 0%, 37%)
Oklch
oklch(64.8% 0.033 235.9)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#364F6E

Indigo · DarkSlateGray · Prussian Blue

HEX
#364F6E
RGB
rgb(54, 79, 110)
HSL
hsl(213, 34%, 32%)
HSB
hsb(213, 51%, 43%)
CMYK
cmyk(51%, 28%, 0%, 57%)
Oklch
oklch(42.1% 0.060 254.3)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B88857
5687B8

Analogous

B85656
B88857
B8B856

Triadic

B88857
56B887
8756B8

Split-Comp.

B88857
56B8B8
5656B8

Tetradic

B88857
56B856
5687B8
B856B8

Contrast Matrix WCAG 2.1 Contrast

B88857
C7B168
BDD0B0
7C92A0
364F6E
—
1.5
Fail
1.9
Fail
1.0
Fail
2.7
Fail
1.5
Fail
—
1.3
Fail
1.5
Fail
4.0
AA Large
1.9
Fail
1.3
Fail
—
2.0
Fail
5.1
AA
1.0
Fail
1.5
Fail
2.0
Fail
—
2.6
Fail
2.7
Fail
4.0
AA Large
5.1
AA
2.6
Fail
—
White BG
3.1AA Large
2.1Fail
1.6Fail
3.2AA Large
8.4AAA
Black BG
6.7AA
9.9AAA
12.8AAA
6.5AA
2.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A3A363
BDBD7A
C5C5B8
86869D
414166

Deuteranopia

A6AA66
BFC07E
C4C3BA
84839C
3F3E65

Tritanopia

B66C6E
C6888B
BEBEBF
7D9A99
37615F

Achromatopsia

919191
AFAFAF
C7C7C7
8D8D8D
4B4B4B

Shades & Tints Shades & Tints

#B88857

Dark
Light

#C7B168

Dark
Light

#BDD0B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b88857;
  --color-2: #c7b168;
  --color-3: #bdd0b0;
  --color-4: #7c92a0;
  --color-5: #364f6e;
}

SCSS

$color-1: #b88857;
$color-2: #c7b168;
$color-3: #bdd0b0;
$color-4: #7c92a0;
$color-5: #364f6e;

TAILWIND

colors: {
  'brand-1': '#b88857',
  'brand-2': '#c7b168',
  'brand-3': '#bdd0b0',
  'brand-4': '#7c92a0',
  'brand-5': '#364f6e',
}

RGB Array

[184, 136, 87], [199, 177, 104], [189, 208, 176], [124, 146, 160], [54, 79, 110]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B88857, #C7B168, #BDD0B0, #7C92A0, #364F6E 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: #b88857; --color-2: #c7b168; --color-3: #bdd0b0; --color-4: #7c92a0; --color-5: #364f6e. 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