← Back to Editor

#9DB6BD · #858A8D · #72635E · #524036 · #210D04

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

ProfoundPremiumWarmCool

Industry INDUSTRY

FinanceLuxury

UI Context UI CONTEXT

Dark ThemeCorporateData Visualization

Color Details Color Details

#9DB6BD

Sky Blue · DarkGray · Lake Green

HEX
#9DB6BD
RGB
rgb(157, 182, 189)
HSL
hsl(193, 20%, 68%)
HSB
hsb(193, 17%, 74%)
CMYK
cmyk(17%, 4%, 0%, 26%)
Oklch
oklch(76.0% 0.029 216.5)

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

#858A8D

Ash · Gray · Warm Gray

HEX
#858A8D
RGB
rgb(133, 138, 141)
HSL
hsl(203, 3%, 54%)
HSB
hsb(203, 6%, 55%)
CMYK
cmyk(6%, 2%, 0%, 45%)
Oklch
oklch(63.0% 0.007 233.7)

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

#72635E

Tangerine · DimGray · Amber Brown

HEX
#72635E
RGB
rgb(114, 99, 94)
HSL
hsl(15, 10%, 41%)
HSB
hsb(15, 18%, 45%)
CMYK
cmyk(0%, 13%, 18%, 55%)
Oklch
oklch(51.2% 0.021 39.3)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#524036

Tangerine · DarkOliveGreen · Amber Brown

HEX
#524036
RGB
rgb(82, 64, 54)
HSL
hsl(21, 21%, 27%)
HSB
hsb(21, 34%, 32%)
CMYK
cmyk(0%, 22%, 34%, 68%)
Oklch
oklch(38.8% 0.030 50.5)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#210D04

Tangerine · Black · Cinnamon

HEX
#210D04
RGB
rgb(33, 13, 4)
HSL
hsl(19, 78%, 7%)
HSB
hsb(19, 88%, 13%)
CMYK
cmyk(0%, 61%, 88%, 87%)
Oklch
oklch(18.7% 0.039 47.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9DB6BD
BEA49D

Analogous

9DBEB4
9DB6BD
9DA6BE

Triadic

9DB6BD
BE9DB7
B7BE9D

Split-Comp.

9DB6BD
BE9DA6
BEB49D

Tetradic

9DB6BD
B49DBE
BEA49D
A6BE9D

Contrast Matrix WCAG 2.1 Contrast

9DB6BD
858A8D
72635E
524036
210D04
—
1.6
Fail
2.7
Fail
4.6
AA
8.8
AAA
1.6
Fail
—
1.6
Fail
2.8
Fail
5.4
AA
2.7
Fail
1.6
Fail
—
1.7
Fail
3.3
AA Large
4.6
AA
2.8
Fail
1.7
Fail
—
1.9
Fail
8.8
AAA
5.4
AA
3.3
AA Large
1.9
Fail
—
White BG
2.1Fail
3.5AA Large
5.7AA
9.8AAA
18.7AAA
Black BG
9.9AAA
6.0AA
3.7AA Large
2.1Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A8BB
87878C
6C6B5F
4A4A38
181806

Deuteranopia

A6A5BB
87878C
6C6E60
4B4D39
1A1B07

Tritanopia

9EBABA
858C8C
716060
513A3B
200808

Achromatopsia

AFAFAF
898989
676767
444444
121212

Shades & Tints Shades & Tints

#9DB6BD

Dark
Light

#858A8D

Dark
Light

#72635E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9db6bd;
  --color-2: #858a8d;
  --color-3: #72635e;
  --color-4: #524036;
  --color-5: #210d04;
}

SCSS

$color-1: #9db6bd;
$color-2: #858a8d;
$color-3: #72635e;
$color-4: #524036;
$color-5: #210d04;

TAILWIND

colors: {
  'brand-1': '#9db6bd',
  'brand-2': '#858a8d',
  'brand-3': '#72635e',
  'brand-4': '#524036',
  'brand-5': '#210d04',
}

RGB Array

[157, 182, 189], [133, 138, 141], [114, 99, 94], [82, 64, 54], [33, 13, 4]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9DB6BD, #858A8D, #72635E, #524036, #210D04 is ideal for: brand design, premium product pages, magazine layouts, tech websites, dark mode UIs, game UIs, 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: #9db6bd; --color-2: #858a8d; --color-3: #72635e; --color-4: #524036; --color-5: #210d04. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 finance, legal, luxury 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