← Back to Editor

#B4DAB5 · #A0BCAA · #8D9D9F · #797F93 · #656088

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#B4DAB5

Celadon · Silver · Apple Green

HEX
#B4DAB5
RGB
rgb(180, 218, 181)
HSL
hsl(122, 34%, 78%)
HSB
hsb(122, 17%, 85%)
CMYK
cmyk(17%, 0%, 17%, 15%)
Oklch
oklch(85.1% 0.065 145.7)

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

#A0BCAA

Celadon · DarkGray · Apple Green

HEX
#A0BCAA
RGB
rgb(160, 188, 170)
HSL
hsl(141, 17%, 68%)
HSB
hsb(141, 15%, 74%)
CMYK
cmyk(15%, 0%, 10%, 26%)
Oklch
oklch(76.9% 0.040 157.1)

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

#8D9D9F

Slate Blue · LightSlateGray · Silver Sand

HEX
#8D9D9F
RGB
rgb(141, 157, 159)
HSL
hsl(187, 9%, 59%)
HSB
hsb(187, 11%, 62%)
CMYK
cmyk(11%, 1%, 0%, 38%)
Oklch
oklch(68.4% 0.018 205.8)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

#797F93

Azure · SlateGray · Navy Blue

HEX
#797F93
RGB
rgb(121, 127, 147)
HSL
hsl(226, 11%, 53%)
HSB
hsb(226, 18%, 58%)
CMYK
cmyk(18%, 14%, 0%, 42%)
Oklch
oklch(59.8% 0.031 272.2)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#656088

Deep Indigo · DimGray · Navy Blue

HEX
#656088
RGB
rgb(101, 96, 136)
HSL
hsl(248, 17%, 45%)
HSB
hsb(248, 29%, 53%)
CMYK
cmyk(26%, 29%, 0%, 47%)
Oklch
oklch(51.0% 0.063 289.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4DAB5
DAB4D9

Analogous

C6DAB4
B4DAB5
B4DAC8

Triadic

B4DAB5
B5B4DA
DAB5B4

Split-Comp.

B4DAB5
C8B4DA
DAB4C6

Tetradic

B4DAB5
B4C6DA
DAB4D9
DAC8B4

Contrast Matrix WCAG 2.1 Contrast

B4DAB5
A0BCAA
8D9D9F
797F93
656088
—
1.3
Fail
1.8
Fail
2.6
Fail
3.8
AA Large
1.3
Fail
—
1.4
Fail
1.9
Fail
2.9
Fail
1.8
Fail
1.4
Fail
—
1.4
Fail
2.1
Fail
2.6
Fail
1.9
Fail
1.4
Fail
—
1.5
Fail
3.8
AA Large
2.9
Fail
2.1
Fail
1.5
Fail
—
White BG
1.5Fail
2.0Fail
2.8Fail
4.0AA Large
5.9AA
Black BG
13.6AAA
10.3AAA
7.5AAA
5.3AA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C5BE
ACACAE
94949F
7C7C8E
63637E

Deuteranopia

C2BFC0
ABA8AF
93929E
7B7B8D
63637C

Tritanopia

B6C5C7
A1B2B3
8E9E9E
798A8A
657775

Achromatopsia

CACACA
B2B2B2
989898
7F7F7F
666666

Shades & Tints Shades & Tints

#B4DAB5

Dark
Light

#A0BCAA

Dark
Light

#8D9D9F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4dab5;
  --color-2: #a0bcaa;
  --color-3: #8d9d9f;
  --color-4: #797f93;
  --color-5: #656088;
}

SCSS

$color-1: #b4dab5;
$color-2: #a0bcaa;
$color-3: #8d9d9f;
$color-4: #797f93;
$color-5: #656088;

TAILWIND

colors: {
  'brand-1': '#b4dab5',
  'brand-2': '#a0bcaa',
  'brand-3': '#8d9d9f',
  'brand-4': '#797f93',
  'brand-5': '#656088',
}

RGB Array

[180, 218, 181], [160, 188, 170], [141, 157, 159], [121, 127, 147], [101, 96, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4DAB5, #A0BCAA, #8D9D9F, #797F93, #656088 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #b4dab5; --color-2: #a0bcaa; --color-3: #8d9d9f; --color-4: #797f93; --color-5: #656088. 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. 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