← Back to Editor

#9AA7A0 · #41AFC0 · #8EB1B3 · #B7BABF · #D2BDA8

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

#9AA7A0

Ash · DarkGray · Silver Sand

HEX
#9AA7A0
RGB
rgb(154, 167, 160)
HSL
hsl(148, 7%, 63%)
HSB
hsb(148, 8%, 65%)
CMYK
cmyk(8%, 0%, 4%, 35%)
Oklch
oklch(71.6% 0.018 162.6)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#41AFC0

Slate Blue · MediumTurquoise · Mint Ice

HEX
#41AFC0
RGB
rgb(65, 175, 192)
HSL
hsl(188, 50%, 50%)
HSB
hsb(188, 66%, 75%)
CMYK
cmyk(66%, 9%, 0%, 25%)
Oklch
oklch(69.9% 0.101 209.5)

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

#8EB1B3

Sky Blue · DarkGray · Lake Green

HEX
#8EB1B3
RGB
rgb(142, 177, 179)
HSL
hsl(183, 20%, 63%)
HSB
hsb(183, 21%, 70%)
CMYK
cmyk(21%, 1%, 0%, 30%)
Oklch
oklch(73.5% 0.038 200.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#B7BABF

Silver Gray · Silver · Pearl Gray

HEX
#B7BABF
RGB
rgb(183, 186, 191)
HSL
hsl(218, 6%, 73%)
HSB
hsb(218, 4%, 75%)
CMYK
cmyk(4%, 3%, 0%, 25%)
Oklch
oklch(78.8% 0.008 260.7)

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

#D2BDA8

Goose Yellow · Tan · Warm Sun

HEX
#D2BDA8
RGB
rgb(210, 189, 168)
HSL
hsl(30, 32%, 74%)
HSB
hsb(30, 20%, 82%)
CMYK
cmyk(0%, 10%, 20%, 18%)
Oklch
oklch(81.0% 0.037 67.3)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9AA7A0
A79AA1

Analogous

9AA79A
9AA7A0
9AA7A7

Triadic

9AA7A0
A09AA7
A7A09A

Split-Comp.

9AA7A0
A79AA7
A79A9A

Tetradic

9AA7A0
9A9AA7
A79AA1
A7A79A

Contrast Matrix WCAG 2.1 Contrast

9AA7A0
41AFC0
8EB1B3
B7BABF
D2BDA8
—
1.0
Fail
1.1
Fail
1.3
Fail
1.4
Fail
1.0
Fail
—
1.1
Fail
1.3
Fail
1.4
Fail
1.1
Fail
1.1
Fail
—
1.2
Fail
1.3
Fail
1.3
Fail
1.3
Fail
1.2
Fail
—
1.1
Fail
1.4
Fail
1.4
Fail
1.3
Fail
1.1
Fail
—
White BG
2.5Fail
2.6Fail
2.3Fail
1.9Fail
1.8Fail
Black BG
8.4AAA
8.1AAA
9.1AAA
10.8AAA
11.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A0A0A2
7172BC
9D9DB3
B8B8BE
C9C9AD

Deuteranopia

9F9EA2
6A62BB
9B99B2
B8B8BE
CACCAE

Tritanopia

9BA3A3
47B9B8
90B2B2
B7BDBD
D1B1B2

Achromatopsia

A2A2A2
909090
A7A7A7
BABABA
C1C1C1

Shades & Tints Shades & Tints

#9AA7A0

Dark
Light

#41AFC0

Dark
Light

#8EB1B3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9aa7a0;
  --color-2: #41afc0;
  --color-3: #8eb1b3;
  --color-4: #b7babf;
  --color-5: #d2bda8;
}

SCSS

$color-1: #9aa7a0;
$color-2: #41afc0;
$color-3: #8eb1b3;
$color-4: #b7babf;
$color-5: #d2bda8;

TAILWIND

colors: {
  'brand-1': '#9aa7a0',
  'brand-2': '#41afc0',
  'brand-3': '#8eb1b3',
  'brand-4': '#b7babf',
  'brand-5': '#d2bda8',
}

RGB Array

[154, 167, 160], [65, 175, 192], [142, 177, 179], [183, 186, 191], [210, 189, 168]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9AA7A0, #41AFC0, #8EB1B3, #B7BABF, #D2BDA8 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: #9aa7a0; --color-2: #41afc0; --color-3: #8eb1b3; --color-4: #b7babf; --color-5: #d2bda8. 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