← Back to Editor

#BBB59D · #B89D96 · #916564 · #3F4249 · #4B4B41

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 Library

Color Details Color Details

#BBB59D

Ginger · DarkGray · Sunflower

HEX
#BBB59D
RGB
rgb(187, 181, 157)
HSL
hsl(48, 18%, 67%)
HSB
hsb(48, 16%, 73%)
CMYK
cmyk(0%, 3%, 16%, 27%)
Oklch
oklch(77.2% 0.034 95.5)

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

#B89D96

Peach Pink · DarkGray · Coral Red

HEX
#B89D96
RGB
rgb(184, 157, 150)
HSL
hsl(12, 19%, 65%)
HSB
hsb(12, 18%, 72%)
CMYK
cmyk(0%, 15%, 18%, 28%)
Oklch
oklch(71.8% 0.034 34.9)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#916564

Crimson · DimGray · Passion Red

HEX
#916564
RGB
rgb(145, 101, 100)
HSL
hsl(1, 18%, 48%)
HSB
hsb(1, 31%, 57%)
CMYK
cmyk(0%, 30%, 31%, 43%)
Oklch
oklch(55.2% 0.057 20.5)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#3F4249

Dark Cyan · DarkSlateGray · Charcoal

HEX
#3F4249
RGB
rgb(63, 66, 73)
HSL
hsl(222, 7%, 27%)
HSB
hsb(222, 14%, 29%)
CMYK
cmyk(14%, 10%, 0%, 71%)
Oklch
oklch(37.9% 0.013 267.2)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#4B4B41

Dark Cyan · DarkSlateGray · Charcoal

HEX
#4B4B41
RGB
rgb(75, 75, 65)
HSL
hsl(60, 7%, 27%)
HSB
hsb(60, 13%, 29%)
CMYK
cmyk(0%, 0%, 13%, 71%)
Oklch
oklch(41.0% 0.016 107.1)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBB59D
9CA2BA

Analogous

BAA59C
BBB59D
B1BA9C

Triadic

BBB59D
9CBAB4
B49CBA

Split-Comp.

BBB59D
9CB1BA
A59CBA

Tetradic

BBB59D
9CBAA5
9CA2BA
BA9CB1

Contrast Matrix WCAG 2.1 Contrast

BBB59D
B89D96
916564
3F4249
4B4B41
—
1.2
Fail
2.4
Fail
4.9
AA
4.3
AA Large
1.2
Fail
—
2.0
Fail
4.0
AA Large
3.5
AA Large
2.4
Fail
2.0
Fail
—
2.0
Fail
1.8
Fail
4.9
AA
4.0
AA Large
2.0
Fail
—
1.1
Fail
4.3
AA Large
3.5
AA Large
1.8
Fail
1.1
Fail
—
White BG
2.1Fail
2.5Fail
4.9AA
10.1AAA
8.8AAA
Black BG
10.2AAA
8.3AAA
4.2AA Large
2.1Fail
2.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8A3
ACAC98
7E7E64
404047
4B4B43

Deuteranopia

B9B9A4
AEB098
818464
404047
4B4B44

Tritanopia

BBA7A8
B79999
8F6464
3F4646
4B4546

Achromatopsia

B4B4B4
A4A4A4
727272
424242
4A4A4A

Shades & Tints Shades & Tints

#BBB59D

Dark
Light

#B89D96

Dark
Light

#916564

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbb59d;
  --color-2: #b89d96;
  --color-3: #916564;
  --color-4: #3f4249;
  --color-5: #4b4b41;
}

SCSS

$color-1: #bbb59d;
$color-2: #b89d96;
$color-3: #916564;
$color-4: #3f4249;
$color-5: #4b4b41;

TAILWIND

colors: {
  'brand-1': '#bbb59d',
  'brand-2': '#b89d96',
  'brand-3': '#916564',
  'brand-4': '#3f4249',
  'brand-5': '#4b4b41',
}

RGB Array

[187, 181, 157], [184, 157, 150], [145, 101, 100], [63, 66, 73], [75, 75, 65]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBB59D, #B89D96, #916564, #3F4249, #4B4B41 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #bbb59d; --color-2: #b89d96; --color-3: #916564; --color-4: #3f4249; --color-5: #4b4b41. 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. 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. Restrained colors convey professionalism and trust. 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