← Back to Editor

#9BA9BD · #6E8196 · #676D77 · #EEEEE9 · #D9D5CA

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#9BA9BD

Azure · DarkGray · Cobalt Blue

HEX
#9BA9BD
RGB
rgb(155, 169, 189)
HSL
hsl(215, 20%, 67%)
HSB
hsb(215, 18%, 74%)
CMYK
cmyk(18%, 11%, 0%, 26%)
Oklch
oklch(73.0% 0.033 257.3)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#6E8196

Azure · SlateGray · Navy Blue

HEX
#6E8196
RGB
rgb(110, 129, 150)
HSL
hsl(212, 16%, 51%)
HSB
hsb(212, 27%, 59%)
CMYK
cmyk(27%, 14%, 0%, 41%)
Oklch
oklch(59.6% 0.039 251.1)

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

#676D77

Ink Gray · DimGray · Warm Gray

HEX
#676D77
RGB
rgb(103, 109, 119)
HSL
hsl(218, 7%, 44%)
HSB
hsb(218, 13%, 47%)
CMYK
cmyk(13%, 8%, 0%, 53%)
Oklch
oklch(53.3% 0.017 260.7)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#EEEEE9

Fresh Green · Linen · Lemon Cream

HEX
#EEEEE9
RGB
rgb(238, 238, 233)
HSL
hsl(60, 13%, 92%)
HSB
hsb(60, 2%, 93%)
CMYK
cmyk(0%, 0%, 2%, 7%)
Oklch
oklch(94.8% 0.007 106.5)

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

#D9D5CA

Goose Yellow · LightGray · Lemon Cream

HEX
#D9D5CA
RGB
rgb(217, 213, 202)
HSL
hsl(44, 16%, 82%)
HSB
hsb(44, 7%, 85%)
CMYK
cmyk(0%, 2%, 7%, 15%)
Oklch
oklch(87.3% 0.016 90.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9BA9BD
BCAE9A

Analogous

9AB9BC
9BA9BD
9D9ABC

Triadic

9BA9BD
BC9AA8
A8BC9A

Split-Comp.

9BA9BD
BC9D9A
B9BC9A

Tetradic

9BA9BD
BC9AB9
BCAE9A
9ABC9D

Contrast Matrix WCAG 2.1 Contrast

9BA9BD
6E8196
676D77
EEEEE9
D9D5CA
—
1.7
Fail
2.2
Fail
2.0
Fail
1.6
Fail
1.7
Fail
—
1.3
Fail
3.4
AA Large
2.7
Fail
2.2
Fail
1.3
Fail
—
4.5
AA Large
3.6
AA Large
2.0
Fail
3.4
AA Large
4.5
AA Large
—
1.3
Fail
1.6
Fail
2.7
Fail
3.6
AA Large
1.3
Fail
—
White BG
2.4Fail
4.0AA Large
5.2AA
1.2Fail
1.5Fail
Black BG
8.8AAA
5.2AA
4.0AA Large
18.0AAA
14.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A1A1B8
767691
6A6A75
EEEEEA
D7D7CD

Deuteranopia

A09FB7
757490
696974
EEEEEB
D8D8CD

Tritanopia

9CB4B4
6F8D8C
677372
EEEBEB
D9CFCF

Achromatopsia

A7A7A7
7E7E7E
6C6C6C
EDEDED
D5D5D5

Shades & Tints Shades & Tints

#9BA9BD

Dark
Light

#6E8196

Dark
Light

#676D77

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9ba9bd;
  --color-2: #6e8196;
  --color-3: #676d77;
  --color-4: #eeeee9;
  --color-5: #d9d5ca;
}

SCSS

$color-1: #9ba9bd;
$color-2: #6e8196;
$color-3: #676d77;
$color-4: #eeeee9;
$color-5: #d9d5ca;

TAILWIND

colors: {
  'brand-1': '#9ba9bd',
  'brand-2': '#6e8196',
  'brand-3': '#676d77',
  'brand-4': '#eeeee9',
  'brand-5': '#d9d5ca',
}

RGB Array

[155, 169, 189], [110, 129, 150], [103, 109, 119], [238, 238, 233], [217, 213, 202]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9BA9BD, #6E8196, #676D77, #EEEEE9, #D9D5CA is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs, 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: #9ba9bd; --color-2: #6e8196; --color-3: #676d77; --color-4: #eeeee9; --color-5: #d9d5ca. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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