← Back to Editor

#5B737E · #163143 · #B17C9A · #59415E · #B9B39B

cool

A 5-color cool 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

#5B737E

Slate Blue · DimGray · Mint Ice

HEX
#5B737E
RGB
rgb(91, 115, 126)
HSL
hsl(199, 16%, 43%)
HSB
hsb(199, 28%, 49%)
CMYK
cmyk(28%, 9%, 0%, 51%)
Oklch
oklch(54.0% 0.033 227.5)

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

#163143

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX
#163143
RGB
rgb(22, 49, 67)
HSL
hsl(204, 51%, 17%)
HSB
hsb(204, 67%, 26%)
CMYK
cmyk(67%, 27%, 0%, 74%)
Oklch
oklch(30.1% 0.046 240.0)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#B17C9A

Rose Purple · DarkGray · Rose Pink

HEX
#B17C9A
RGB
rgb(177, 124, 154)
HSL
hsl(326, 25%, 59%)
HSB
hsb(326, 30%, 69%)
CMYK
cmyk(0%, 30%, 13%, 31%)
Oklch
oklch(64.9% 0.077 344.5)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

#59415E

Dark Plum · DimGray · Eggplant

HEX
#59415E
RGB
rgb(89, 65, 94)
HSL
hsl(290, 18%, 31%)
HSB
hsb(290, 31%, 37%)
CMYK
cmyk(5%, 31%, 0%, 63%)
Oklch
oklch(41.3% 0.056 320.5)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#B9B39B

Ginger · DarkGray · Sunflower

HEX
#B9B39B
RGB
rgb(185, 179, 155)
HSL
hsl(48, 18%, 67%)
HSB
hsb(48, 16%, 73%)
CMYK
cmyk(0%, 3%, 16%, 27%)
Oklch
oklch(76.5% 0.034 95.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5B737E
7F675C

Analogous

5C7F79
5B737E
5C637F

Triadic

5B737E
7F5C74
747F5C

Split-Comp.

5B737E
7F5C63
7F795C

Tetradic

5B737E
795C7F
7F675C
637F5C

Contrast Matrix WCAG 2.1 Contrast

5B737E
163143
B17C9A
59415E
B9B39B
—
2.7
Fail
1.5
Fail
1.8
Fail
2.4
Fail
2.7
Fail
—
4.0
AA Large
1.5
Fail
6.4
AA
1.5
Fail
4.0
AA Large
—
2.7
Fail
1.6
Fail
1.8
Fail
1.5
Fail
2.7
Fail
—
4.3
AA Large
2.4
Fail
6.4
AA
1.6
Fail
4.3
AA Large
—
White BG
5.0AA
13.5AAA
3.4AA Large
9.0AAA
2.1Fail
Black BG
4.2AA Large
1.6Fail
6.2AA
2.3Fail
10.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

65667B
22223F
9A9A93
4F4E57
B6B6A1

Deuteranopia

64627B
201E3E
9DA191
505255
B7B7A2

Tritanopia

5C7979
173B3A
AE8D8C
585150
B9A5A6

Achromatopsia

6D6D6D
2B2B2B
8F8F8F
4B4B4B
B2B2B2

Shades & Tints Shades & Tints

#5B737E

Dark
Light

#163143

Dark
Light

#B17C9A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5b737e;
  --color-2: #163143;
  --color-3: #b17c9a;
  --color-4: #59415e;
  --color-5: #b9b39b;
}

SCSS

$color-1: #5b737e;
$color-2: #163143;
$color-3: #b17c9a;
$color-4: #59415e;
$color-5: #b9b39b;

TAILWIND

colors: {
  'brand-1': '#5b737e',
  'brand-2': '#163143',
  'brand-3': '#b17c9a',
  'brand-4': '#59415e',
  'brand-5': '#b9b39b',
}

RGB Array

[91, 115, 126], [22, 49, 67], [177, 124, 154], [89, 65, 94], [185, 179, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5B737E, #163143, #B17C9A, #59415E, #B9B39B 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: #5b737e; --color-2: #163143; --color-3: #b17c9a; --color-4: #59415e; --color-5: #b9b39b. 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 cool-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