← Back to Editor

#9B9BBD · #99A3C7 · #9FC7BE · #4A3426 · #341A1D

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

#9B9BBD

Wisteria · DarkGray · Cobalt Blue

HEX
#9B9BBD
RGB
rgb(155, 155, 189)
HSL
hsl(240, 20%, 67%)
HSB
hsb(240, 18%, 74%)
CMYK
cmyk(18%, 18%, 0%, 26%)
Oklch
oklch(70.1% 0.049 285.1)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#99A3C7

Azure · DarkGray · Cobalt Blue

HEX
#99A3C7
RGB
rgb(153, 163, 199)
HSL
hsl(227, 29%, 69%)
HSB
hsb(227, 23%, 78%)
CMYK
cmyk(23%, 18%, 0%, 22%)
Oklch
oklch(72.0% 0.054 272.8)

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

#9FC7BE

Jade · Silver · Lake Green

HEX
#9FC7BE
RGB
rgb(159, 199, 190)
HSL
hsl(167, 26%, 70%)
HSB
hsb(167, 20%, 78%)
CMYK
cmyk(20%, 0%, 5%, 22%)
Oklch
oklch(79.8% 0.044 179.9)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#4A3426

Tangerine · DarkSlateGray · Cinnamon

HEX
#4A3426
RGB
rgb(74, 52, 38)
HSL
hsl(23, 32%, 22%)
HSB
hsb(23, 49%, 29%)
CMYK
cmyk(0%, 30%, 49%, 71%)
Oklch
oklch(34.6% 0.039 53.5)

Traditional「Tangerine」· Paint「Cinnamon」· Creative Blush Sunrise

#341A1D

Crimson · Black · Deep Berry

HEX
#341A1D
RGB
rgb(52, 26, 29)
HSL
hsl(353, 33%, 15%)
HSB
hsb(353, 50%, 20%)
CMYK
cmyk(0%, 50%, 44%, 80%)
Oklch
oklch(25.5% 0.041 13.0)

Traditional「Crimson」· Paint「Deep Berry」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B9BBD
BCBC9A

Analogous

9AABBC
9B9BBD
AB9ABC

Triadic

9B9BBD
BC9A9A
9ABC9A

Split-Comp.

9B9BBD
BCAB9A
ABBC9A

Tetradic

9B9BBD
BC9AAB
BCBC9A
9ABCAB

Contrast Matrix WCAG 2.1 Contrast

9B9BBD
99A3C7
9FC7BE
4A3426
341A1D
—
1.1
Fail
1.5
Fail
4.3
AA Large
6.0
AA
1.1
Fail
—
1.4
Fail
4.6
AA
6.4
AA
1.5
Fail
1.4
Fail
—
6.3
AA
8.7
AAA
4.3
AA Large
4.6
AA
6.3
AA
—
1.4
Fail
6.0
AA
6.4
AA
8.7
AAA
1.4
Fail
—
White BG
2.7Fail
2.5Fail
1.8Fail
11.6AAA
16.0AAA
Black BG
7.8AAA
8.4AAA
11.4AAA
1.8Fail
1.3Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9BB5
9D9DBE
B0B1C0
404029
29291C

Deuteranopia

9B9BB3
9D9CBC
AEABC1
42432A
2A2C1C

Tritanopia

9BAEAD
9AB7B6
A1C2C2
492C2D
331C1C

Achromatopsia

9F9F9F
A4A4A4
BABABA
393939
222222

Shades & Tints Shades & Tints

#9B9BBD

Dark
Light

#99A3C7

Dark
Light

#9FC7BE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b9bbd;
  --color-2: #99a3c7;
  --color-3: #9fc7be;
  --color-4: #4a3426;
  --color-5: #341a1d;
}

SCSS

$color-1: #9b9bbd;
$color-2: #99a3c7;
$color-3: #9fc7be;
$color-4: #4a3426;
$color-5: #341a1d;

TAILWIND

colors: {
  'brand-1': '#9b9bbd',
  'brand-2': '#99a3c7',
  'brand-3': '#9fc7be',
  'brand-4': '#4a3426',
  'brand-5': '#341a1d',
}

RGB Array

[155, 155, 189], [153, 163, 199], [159, 199, 190], [74, 52, 38], [52, 26, 29]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B9BBD, #99A3C7, #9FC7BE, #4A3426, #341A1D 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: #9b9bbd; --color-2: #99a3c7; --color-3: #9fc7be; --color-4: #4a3426; --color-5: #341a1d. 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