← Back to Editor

#B8B5B4 · #F77517 · #B8B0B0 · #E09765 · #A6A1A3

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

#B8B5B4

Silver Gray · Silver · Pearl Gray

HEX
#B8B5B4
RGB
rgb(184, 181, 180)
HSL
hsl(15, 3%, 71%)
HSB
hsb(15, 2%, 72%)
CMYK
cmyk(0%, 2%, 2%, 28%)
Oklch
oklch(77.5% 0.004 39.5)

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

#F77517

Tangerine · Chocolate · Warm Sun

HEX
#F77517
RGB
rgb(247, 117, 23)
HSL
hsl(25, 93%, 53%)
HSB
hsb(25, 91%, 97%)
CMYK
cmyk(0%, 53%, 91%, 3%)
Oklch
oklch(70.5% 0.183 48.7)

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

#B8B0B0

Silver Gray · DarkGray · Pearl Gray

HEX
#B8B0B0
RGB
rgb(184, 176, 176)
HSL
hsl(0, 5%, 71%)
HSB
hsb(0, 4%, 72%)
CMYK
cmyk(0%, 4%, 4%, 28%)
Oklch
oklch(76.4% 0.009 17.4)

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

#E09765

Apricot · DarkSalmon · Warm Sun

HEX
#E09765
RGB
rgb(224, 151, 101)
HSL
hsl(24, 66%, 64%)
HSB
hsb(24, 55%, 88%)
CMYK
cmyk(0%, 33%, 55%, 12%)
Oklch
oklch(73.8% 0.110 54.6)

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

#A6A1A3

Ash · DarkGray · Silver Sand

HEX
#A6A1A3
RGB
rgb(166, 161, 163)
HSL
hsl(336, 3%, 64%)
HSB
hsb(336, 3%, 65%)
CMYK
cmyk(0%, 3%, 2%, 35%)
Oklch
oklch(71.4% 0.006 350.9)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8B5B4
B3B6B7

Analogous

B7B3B4
B8B5B4
B7B6B3

Triadic

B8B5B4
B3B7B4
B4B3B7

Split-Comp.

B8B5B4
B3B7B6
B3B4B7

Tetradic

B8B5B4
B4B7B3
B3B6B7
B6B3B7

Contrast Matrix WCAG 2.1 Contrast

B8B5B4
F77517
B8B0B0
E09765
A6A1A3
—
1.4
Fail
1.0
Fail
1.2
Fail
1.2
Fail
1.4
Fail
—
1.3
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.3
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.1
Fail
—
White BG
2.0Fail
2.8Fail
2.1Fail
2.4Fail
2.5Fail
Black BG
10.3AAA
7.5AAA
9.9AAA
8.8AAA
8.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7B4
BFBE2E
B5B4B0
C0C071
A4A4A3

Deuteranopia

B7B7B4
C6D033
B5B6B0
C5CA74
A4A5A2

Tritanopia

B8B4B4
F04044
B8B0B0
DC7B7D
A6A2A2

Achromatopsia

B6B6B6
919191
B2B2B2
A7A7A7
A3A3A3

Shades & Tints Shades & Tints

#B8B5B4

Dark
Light

#F77517

Dark
Light

#B8B0B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8b5b4;
  --color-2: #f77517;
  --color-3: #b8b0b0;
  --color-4: #e09765;
  --color-5: #a6a1a3;
}

SCSS

$color-1: #b8b5b4;
$color-2: #f77517;
$color-3: #b8b0b0;
$color-4: #e09765;
$color-5: #a6a1a3;

TAILWIND

colors: {
  'brand-1': '#b8b5b4',
  'brand-2': '#f77517',
  'brand-3': '#b8b0b0',
  'brand-4': '#e09765',
  'brand-5': '#a6a1a3',
}

RGB Array

[184, 181, 180], [247, 117, 23], [184, 176, 176], [224, 151, 101], [166, 161, 163]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8B5B4, #F77517, #B8B0B0, #E09765, #A6A1A3 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: #b8b5b4; --color-2: #f77517; --color-3: #b8b0b0; --color-4: #e09765; --color-5: #a6a1a3. 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