← Back to Editor

#BFBEB9 · #A09B87 · #D9A255 · #7D9F8E · #C9821E

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 Library

Color Details Color Details

#BFBEB9

Silver Gray · Silver · Pearl Gray

HEX
#BFBEB9
RGB
rgb(191, 190, 185)
HSL
hsl(50, 4%, 74%)
HSB
hsb(50, 3%, 75%)
CMYK
cmyk(0%, 1%, 3%, 25%)
Oklch
oklch(80.1% 0.007 97.4)

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

#A09B87

Ginger · DarkGray · Sunflower

HEX
#A09B87
RGB
rgb(160, 155, 135)
HSL
hsl(48, 12%, 58%)
HSB
hsb(48, 16%, 63%)
CMYK
cmyk(0%, 3%, 16%, 37%)
Oklch
oklch(68.8% 0.029 95.5)

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

#D9A255

Ginger · SandyBrown · Warm Sun

HEX
#D9A255
RGB
rgb(217, 162, 85)
HSL
hsl(35, 63%, 59%)
HSB
hsb(35, 61%, 85%)
CMYK
cmyk(0%, 25%, 61%, 15%)
Oklch
oklch(74.9% 0.115 73.7)

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

#7D9F8E

Mineral Blue · LightSlateGray · Olive Green

HEX
#7D9F8E
RGB
rgb(125, 159, 142)
HSL
hsl(150, 15%, 56%)
HSB
hsb(150, 21%, 62%)
CMYK
cmyk(21%, 0%, 11%, 38%)
Oklch
oklch(67.2% 0.045 163.2)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#C9821E

Ochre · DarkGoldenRod · Amber Brown

HEX
#C9821E
RGB
rgb(201, 130, 30)
HSL
hsl(35, 74%, 45%)
HSB
hsb(35, 85%, 79%)
CMYK
cmyk(0%, 35%, 85%, 21%)
Oklch
oklch(66.5% 0.136 68.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BFBEB9
BABBBF

Analogous

BFBCBA
BFBEB9
BEBFBA

Triadic

BFBEB9
BABFBE
BEBABF

Split-Comp.

BFBEB9
BABEBF
BCBABF

Tetradic

BFBEB9
BABFBC
BABBBF
BFBABE

Contrast Matrix WCAG 2.1 Contrast

BFBEB9
A09B87
D9A255
7D9F8E
C9821E
—
1.5
Fail
1.2
Fail
1.6
Fail
1.7
Fail
1.5
Fail
—
1.2
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.2
Fail
—
1.3
Fail
1.4
Fail
1.6
Fail
1.0
Fail
1.3
Fail
—
1.1
Fail
1.7
Fail
1.1
Fail
1.4
Fail
1.1
Fail
—
White BG
1.9Fail
2.8Fail
2.3Fail
2.9Fail
3.1AA Large
Black BG
11.3AAA
7.5AAA
9.2AAA
7.2AAA
6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFBA
9E9E8C
C1C168
8C8C92
AAAA36

Deuteranopia

BFBFBB
9E9F8D
C4C86C
8A8793
AEB43C

Tritanopia

BFBBBB
A09091
D6767A
7F9596
C5494E

Achromatopsia

BEBEBE
9A9A9A
AAAAAA
939393
8C8C8C

Shades & Tints Shades & Tints

#BFBEB9

Dark
Light

#A09B87

Dark
Light

#D9A255

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bfbeb9;
  --color-2: #a09b87;
  --color-3: #d9a255;
  --color-4: #7d9f8e;
  --color-5: #c9821e;
}

SCSS

$color-1: #bfbeb9;
$color-2: #a09b87;
$color-3: #d9a255;
$color-4: #7d9f8e;
$color-5: #c9821e;

TAILWIND

colors: {
  'brand-1': '#bfbeb9',
  'brand-2': '#a09b87',
  'brand-3': '#d9a255',
  'brand-4': '#7d9f8e',
  'brand-5': '#c9821e',
}

RGB Array

[191, 190, 185], [160, 155, 135], [217, 162, 85], [125, 159, 142], [201, 130, 30]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BFBEB9, #A09B87, #D9A255, #7D9F8E, #C9821E is ideal for: corporate websites, product showcases, portfolios. 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: #bfbeb9; --color-2: #a09b87; --color-3: #d9a255; --color-4: #7d9f8e; --color-5: #c9821e. 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. 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