← Back to Editor

#B6BAAE · #80A295 · #846D7E · #216260 · #649075

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 LibraryData Visualization

Color Details Color Details

#B6BAAE

Willow Green · Silver · Pearl Gray

HEX
#B6BAAE
RGB
rgb(182, 186, 174)
HSL
hsl(80, 8%, 71%)
HSB
hsb(80, 6%, 73%)
CMYK
cmyk(2%, 0%, 6%, 27%)
Oklch
oklch(78.2% 0.017 121.8)

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

#80A295

Mineral Blue · LightSlateGray · Olive Green

HEX
#80A295
RGB
rgb(128, 162, 149)
HSL
hsl(157, 15%, 57%)
HSB
hsb(157, 21%, 64%)
CMYK
cmyk(21%, 0%, 8%, 36%)
Oklch
oklch(68.3% 0.042 169.7)

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

#846D7E

Rose Purple · Gray · Violet

HEX
#846D7E
RGB
rgb(132, 109, 126)
HSL
hsl(316, 10%, 47%)
HSB
hsb(316, 17%, 52%)
CMYK
cmyk(0%, 17%, 5%, 48%)
Oklch
oklch(56.2% 0.038 335.4)

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

#216260

Mineral Blue · DarkSlateGray · Mint Ice

HEX
#216260
RGB
rgb(33, 98, 96)
HSL
hsl(178, 50%, 26%)
HSB
hsb(178, 66%, 38%)
CMYK
cmyk(66%, 0%, 2%, 62%)
Oklch
oklch(45.5% 0.065 192.2)

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

#649075

Celadon · SlateGray · Olive Green

HEX
#649075
RGB
rgb(100, 144, 117)
HSL
hsl(143, 18%, 48%)
HSB
hsb(143, 31%, 56%)
CMYK
cmyk(31%, 0%, 19%, 44%)
Oklch
oklch(61.3% 0.063 157.0)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B6BAAE
B3AFBB

Analogous

BBB9AF
B6BAAE
B1BBAF

Triadic

B6BAAE
AFB7BB
BBAFB7

Split-Comp.

B6BAAE
AFB1BB
B9AFBB

Tetradic

B6BAAE
AFBBB9
B3AFBB
BBAFB1

Contrast Matrix WCAG 2.1 Contrast

B6BAAE
80A295
846D7E
216260
649075
—
1.4
Fail
2.4
Fail
3.6
AA Large
1.8
Fail
1.4
Fail
—
1.7
Fail
2.5
Fail
1.3
Fail
2.4
Fail
1.7
Fail
—
1.5
Fail
1.3
Fail
3.6
AA Large
2.5
Fail
1.5
Fail
—
1.9
Fail
1.8
Fail
1.3
Fail
1.3
Fail
1.9
Fail
—
White BG
2.0Fail
2.8Fail
4.7AA
7.0AAA
3.6AA Large
Black BG
10.6AAA
7.5AAA
4.5AA Large
3.0Fail
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B8B8B1
8F8F98
7A7A7A
3D3E60
77777C

Deuteranopia

B8B7B2
8D8A99
7B7D79
393561
75717D

Tritanopia

B6B3B4
829B9B
837776
246161
668182

Achromatopsia

B7B7B7
969696
767676
4E4E4E
808080

Shades & Tints Shades & Tints

#B6BAAE

Dark
Light

#80A295

Dark
Light

#846D7E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b6baae;
  --color-2: #80a295;
  --color-3: #846d7e;
  --color-4: #216260;
  --color-5: #649075;
}

SCSS

$color-1: #b6baae;
$color-2: #80a295;
$color-3: #846d7e;
$color-4: #216260;
$color-5: #649075;

TAILWIND

colors: {
  'brand-1': '#b6baae',
  'brand-2': '#80a295',
  'brand-3': '#846d7e',
  'brand-4': '#216260',
  'brand-5': '#649075',
}

RGB Array

[182, 186, 174], [128, 162, 149], [132, 109, 126], [33, 98, 96], [100, 144, 117]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B6BAAE, #80A295, #846D7E, #216260, #649075 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #b6baae; --color-2: #80a295; --color-3: #846d7e; --color-4: #216260; --color-5: #649075. 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. Restrained colors convey professionalism and trust. 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