← Back to Editor

#B0BFB6 · #FAFCB4 · #FF6517 · #B5542C · #663156

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

#B0BFB6

Celadon · Silver · Apple Green

HEX
#B0BFB6
RGB
rgb(176, 191, 182)
HSL
hsl(144, 10%, 72%)
HSB
hsb(144, 8%, 75%)
CMYK
cmyk(8%, 0%, 5%, 25%)
Oklch
oklch(79.0% 0.021 159.6)

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

#FAFCB4

Fresh Green · Bisque · Lemon Cream

HEX
#FAFCB4
RGB
rgb(250, 252, 180)
HSL
hsl(62, 92%, 85%)
HSB
hsb(62, 29%, 99%)
CMYK
cmyk(1%, 0%, 29%, 1%)
Oklch
oklch(97.3% 0.091 109.3)

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

#FF6517

Tangerine · OrangeRed · Warm Sun

HEX
#FF6517
RGB
rgb(255, 101, 23)
HSL
hsl(20, 100%, 55%)
HSB
hsb(20, 91%, 100%)
CMYK
cmyk(0%, 60%, 91%, 0%)
Oklch
oklch(69.5% 0.203 41.7)

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

#B5542C

Tangerine · Sienna · Amber Brown

HEX
#B5542C
RGB
rgb(181, 84, 44)
HSL
hsl(18, 61%, 44%)
HSB
hsb(18, 76%, 71%)
CMYK
cmyk(0%, 54%, 76%, 29%)
Oklch
oklch(56.1% 0.137 41.6)

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

#663156

Rose Purple · DimGray · Eggplant

HEX
#663156
RGB
rgb(102, 49, 86)
HSL
hsl(318, 35%, 30%)
HSB
hsb(318, 52%, 40%)
CMYK
cmyk(0%, 52%, 16%, 60%)
Oklch
oklch(39.6% 0.091 340.0)

Traditional「Rose Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0BFB6
BFB0B9

Analogous

B2BFB0
B0BFB6
B0BFBD

Triadic

B0BFB6
B6B0BF
BFB6B0

Split-Comp.

B0BFB6
BDB0BF
BFB0B2

Tetradic

B0BFB6
B0B2BF
BFB0B9
BFBDB0

Contrast Matrix WCAG 2.1 Contrast

B0BFB6
FAFCB4
FF6517
B5542C
663156
—
1.8
Fail
1.5
Fail
2.6
Fail
5.1
AA
1.8
Fail
—
2.8
Fail
4.6
AA
9.2
AAA
1.5
Fail
2.8
Fail
—
1.7
Fail
3.3
AA Large
2.6
Fail
4.6
AA
1.7
Fail
—
2.0
Fail
5.1
AA
9.2
AAA
3.3
AA Large
2.0
Fail
—
White BG
1.9Fail
1.1Fail
2.9Fail
4.9AA
9.8AAA
Black BG
11.0AAA
19.6AAA
7.1AAA
4.3AA Large
2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

B6B7B8
FBFBC5
BCBB2A
8B8A36
4F4F4D

Deuteranopia

B6B5B9
FBFBCA
C5D12E
919838
52564B

Tritanopia

B1BABA
FAD3D6
F7393C
B03D3F
634644

Achromatopsia

B9B9B9
F3F3F3
8A8A8A
6C6C6C
454545

Shades & Tints Shades & Tints

#B0BFB6

Dark
Light

#FAFCB4

Dark
Light

#FF6517

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0bfb6;
  --color-2: #fafcb4;
  --color-3: #ff6517;
  --color-4: #b5542c;
  --color-5: #663156;
}

SCSS

$color-1: #b0bfb6;
$color-2: #fafcb4;
$color-3: #ff6517;
$color-4: #b5542c;
$color-5: #663156;

TAILWIND

colors: {
  'brand-1': '#b0bfb6',
  'brand-2': '#fafcb4',
  'brand-3': '#ff6517',
  'brand-4': '#b5542c',
  'brand-5': '#663156',
}

RGB Array

[176, 191, 182], [250, 252, 180], [255, 101, 23], [181, 84, 44], [102, 49, 86]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0BFB6, #FAFCB4, #FF6517, #B5542C, #663156 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: #b0bfb6; --color-2: #fafcb4; --color-3: #ff6517; --color-4: #b5542c; --color-5: #663156. 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