← Back to Editor

#B8B6A6 · #170707 · #8F7E30 · #B88630 · #FF520F

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

#B8B6A6

Fresh Green · DarkGray · Sunflower

HEX
#B8B6A6
RGB
rgb(184, 182, 166)
HSL
hsl(53, 11%, 69%)
HSB
hsb(53, 10%, 72%)
CMYK
cmyk(0%, 1%, 10%, 28%)
Oklch
oklch(77.3% 0.022 101.1)

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

#170707

Crimson · Black · Deep Berry

HEX
#170707
RGB
rgb(23, 7, 7)
HSL
hsl(0, 53%, 6%)
HSB
hsb(0, 70%, 9%)
CMYK
cmyk(0%, 70%, 70%, 91%)
Oklch
oklch(15.5% 0.029 21.0)

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

#8F7E30

Ochre · Sienna · Honey Gold

HEX
#8F7E30
RGB
rgb(143, 126, 48)
HSL
hsl(49, 50%, 37%)
HSB
hsb(49, 66%, 56%)
CMYK
cmyk(0%, 12%, 66%, 44%)
Oklch
oklch(59.3% 0.099 96.9)

Traditional「Ochre」· Paint「Honey Gold」· Creative Blush Sunrise

#B88630

Ochre · DarkGoldenRod · Amber Brown

HEX
#B88630
RGB
rgb(184, 134, 48)
HSL
hsl(38, 59%, 45%)
HSB
hsb(38, 74%, 72%)
CMYK
cmyk(0%, 27%, 74%, 28%)
Oklch
oklch(65.4% 0.117 77.2)

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

#FF520F

Tangerine · OrangeRed · Warm Sun

HEX
#FF520F
RGB
rgb(255, 82, 15)
HSL
hsl(17, 100%, 53%)
HSB
hsb(17, 94%, 100%)
CMYK
cmyk(0%, 68%, 94%, 0%)
Oklch
oklch(67.3% 0.219 37.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8B6A6
A7A9B9

Analogous

B9AEA7
B8B6A6
B2B9A7

Triadic

B8B6A6
A7B9B7
B7A7B9

Split-Comp.

B8B6A6
A7B2B9
AEA7B9

Tetradic

B8B6A6
A7B9AE
A7A9B9
B9A7B2

Contrast Matrix WCAG 2.1 Contrast

B8B6A6
170707
8F7E30
B88630
FF520F
—
9.6
AAA
2.0
Fail
1.6
Fail
1.6
Fail
9.6
AAA
—
4.9
AA
6.1
AA
6.0
AA
2.0
Fail
4.9
AA
—
1.2
Fail
1.2
Fail
1.6
Fail
6.1
AA
1.2
Fail
—
1.0
Fail
1.6
Fail
6.0
AA
1.2
Fail
1.0
Fail
—
White BG
2.0Fail
19.6AAA
4.0AA Large
3.2AA Large
3.2AA Large
Black BG
10.3AAA
1.1Fail
5.2AA
6.5AA
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B7B7AA
101007
888743
A2A245
B4B31F

Deuteranopia

B7B7AB
111207
898A47
A5A94A
BECB23

Tritanopia

B8ADAE
160707
8E5255
B55559
F62C2F

Achromatopsia

B5B5B5
0C0C0C
7A7A7A
8B8B8B
7E7E7E

Shades & Tints Shades & Tints

#B8B6A6

Dark
Light

#170707

Dark
Light

#8F7E30

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8b6a6;
  --color-2: #170707;
  --color-3: #8f7e30;
  --color-4: #b88630;
  --color-5: #ff520f;
}

SCSS

$color-1: #b8b6a6;
$color-2: #170707;
$color-3: #8f7e30;
$color-4: #b88630;
$color-5: #ff520f;

TAILWIND

colors: {
  'brand-1': '#b8b6a6',
  'brand-2': '#170707',
  'brand-3': '#8f7e30',
  'brand-4': '#b88630',
  'brand-5': '#ff520f',
}

RGB Array

[184, 182, 166], [23, 7, 7], [143, 126, 48], [184, 134, 48], [255, 82, 15]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8B6A6, #170707, #8F7E30, #B88630, #FF520F 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: #b8b6a6; --color-2: #170707; --color-3: #8f7e30; --color-4: #b88630; --color-5: #ff520f. 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