← Back to Editor

#BBBCB6 · #7D4B68 · #E75256 · #B18F2E · #317C82

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

#BBBCB6

Silver Gray · Silver · Pearl Gray

HEX
#BBBCB6
RGB
rgb(187, 188, 182)
HSL
hsl(70, 4%, 73%)
HSB
hsb(70, 3%, 74%)
CMYK
cmyk(1%, 0%, 3%, 26%)
Oklch
oklch(79.3% 0.008 114.3)

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

#7D4B68

Rose Purple · DimGray · Camellia

HEX
#7D4B68
RGB
rgb(125, 75, 104)
HSL
hsl(325, 25%, 39%)
HSB
hsb(325, 40%, 49%)
CMYK
cmyk(0%, 40%, 17%, 51%)
Oklch
oklch(48.0% 0.078 344.7)

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

#E75256

Peach Pink · Tomato · Coral Red

HEX
#E75256
RGB
rgb(231, 82, 86)
HSL
hsl(358, 76%, 61%)
HSB
hsb(358, 65%, 91%)
CMYK
cmyk(0%, 65%, 63%, 9%)
Oklch
oklch(64.1% 0.185 22.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B18F2E

Ochre · DarkGoldenRod · Honey Gold

HEX
#B18F2E
RGB
rgb(177, 143, 46)
HSL
hsl(44, 59%, 44%)
HSB
hsb(44, 74%, 69%)
CMYK
cmyk(0%, 19%, 74%, 31%)
Oklch
oklch(66.4% 0.119 88.8)

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

#317C82

Slate Blue · SeaGreen · Mint Ice

HEX
#317C82
RGB
rgb(49, 124, 130)
HSL
hsl(184, 45%, 35%)
HSB
hsb(184, 62%, 51%)
CMYK
cmyk(62%, 5%, 0%, 49%)
Oklch
oklch(54.2% 0.074 202.5)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BBBCB6
B8B7BD

Analogous

BDBBB7
BBBCB6
B9BDB7

Triadic

BBBCB6
B7BCBD
BDB7BC

Split-Comp.

BBBCB6
B7B9BD
BBB7BD

Tetradic

BBBCB6
B7BDBB
B8B7BD
BDB7B9

Contrast Matrix WCAG 2.1 Contrast

BBBCB6
7D4B68
E75256
B18F2E
317C82
—
3.6
AA Large
1.9
Fail
1.6
Fail
2.5
Fail
3.6
AA Large
—
1.9
Fail
2.2
Fail
1.4
Fail
1.9
Fail
1.9
Fail
—
1.2
Fail
1.3
Fail
1.6
Fail
2.2
Fail
1.2
Fail
—
1.6
Fail
2.5
Fail
1.4
Fail
1.3
Fail
1.6
Fail
—
White BG
1.9Fail
6.8AA
3.7AA Large
3.1AA Large
4.8AA
Black BG
11.0AAA
3.1AA Large
5.7AA
6.8AA
4.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

BBBBB7
676761
A6A555
A2A245
515281

Deuteranopia

BBBBB8
6A6E5F
AFBA55
A4A74B
4D4880

Tritanopia

BBB9B9
7B5B5A
E05454
AF585C
357F7F

Achromatopsia

BBBBBB
5D5D5D
7F7F7F
8E8E8E
666666

Shades & Tints Shades & Tints

#BBBCB6

Dark
Light

#7D4B68

Dark
Light

#E75256

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bbbcb6;
  --color-2: #7d4b68;
  --color-3: #e75256;
  --color-4: #b18f2e;
  --color-5: #317c82;
}

SCSS

$color-1: #bbbcb6;
$color-2: #7d4b68;
$color-3: #e75256;
$color-4: #b18f2e;
$color-5: #317c82;

TAILWIND

colors: {
  'brand-1': '#bbbcb6',
  'brand-2': '#7d4b68',
  'brand-3': '#e75256',
  'brand-4': '#b18f2e',
  'brand-5': '#317c82',
}

RGB Array

[187, 188, 182], [125, 75, 104], [231, 82, 86], [177, 143, 46], [49, 124, 130]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #BBBCB6, #7D4B68, #E75256, #B18F2E, #317C82 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: #bbbcb6; --color-2: #7d4b68; --color-3: #e75256; --color-4: #b18f2e; --color-5: #317c82. 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