← Back to Editor

#596471 · #CDD9DC · #8699A7 · #F7F7F2 · #5B5E63

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#596471

Indigo · DimGray · Prussian Blue

HEX
#596471
RGB
rgb(89, 100, 113)
HSL
hsl(213, 12%, 40%)
HSB
hsb(213, 21%, 44%)
CMYK
cmyk(21%, 12%, 0%, 56%)
Oklch
oklch(49.9% 0.025 252.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#CDD9DC

Sky Blue · LightGray · Glacier Blue

HEX
#CDD9DC
RGB
rgb(205, 217, 220)
HSL
hsl(192, 18%, 83%)
HSB
hsb(192, 7%, 86%)
CMYK
cmyk(7%, 1%, 0%, 14%)
Oklch
oklch(87.7% 0.014 214.4)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#8699A7

Slate Blue · LightSlateGray · Navy Blue

HEX
#8699A7
RGB
rgb(134, 153, 167)
HSL
hsl(205, 16%, 59%)
HSB
hsb(205, 20%, 65%)
CMYK
cmyk(20%, 8%, 0%, 35%)
Oklch
oklch(67.3% 0.030 239.9)

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

#F7F7F2

Fresh Green · SeaShell · Lemon Cream

HEX
#F7F7F2
RGB
rgb(247, 247, 242)
HSL
hsl(60, 24%, 96%)
HSB
hsb(60, 2%, 97%)
CMYK
cmyk(0%, 0%, 2%, 3%)
Oklch
oklch(97.5% 0.007 106.5)

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

#5B5E63

Ink Gray · DimGray · Charcoal

HEX
#5B5E63
RGB
rgb(91, 94, 99)
HSL
hsl(218, 4%, 37%)
HSB
hsb(218, 8%, 39%)
CMYK
cmyk(8%, 5%, 0%, 61%)
Oklch
oklch(48.1% 0.009 260.7)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

596471
72675A

Analogous

5A7172
596471
5B5A72

Triadic

596471
725A65
65725A

Split-Comp.

596471
725B5A
71725A

Tetradic

596471
725A71
72675A
5A725B

Contrast Matrix WCAG 2.1 Contrast

596471
CDD9DC
8699A7
F7F7F2
5B5E63
—
4.2
AA Large
2.0
Fail
5.6
AA
1.1
Fail
4.2
AA Large
—
2.0
Fail
1.3
Fail
4.5
AA
2.0
Fail
2.0
Fail
—
2.7
Fail
2.2
Fail
5.6
AA
1.3
Fail
2.7
Fail
—
6.1
AA
1.1
Fail
4.5
AA
2.2
Fail
6.1
AA
—
White BG
6.0AA
1.4Fail
2.9Fail
1.1Fail
6.5AA
Black BG
3.5AA Large
14.6AAA
7.1AAA
19.5AAA
3.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

5E5E6E
D2D2DB
8E8EA4
F7F7F3
5C5C62

Deuteranopia

5D5C6D
D2D1DB
8D8CA3
F7F7F3
5C5C62

Tritanopia

5A6B6B
CEDBDB
87A1A0
F7F4F4
5B6161

Achromatopsia

626262
D6D6D6
959595
F6F6F6
5E5E5E

Shades & Tints Shades & Tints

#596471

Dark
Light

#CDD9DC

Dark
Light

#8699A7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #596471;
  --color-2: #cdd9dc;
  --color-3: #8699a7;
  --color-4: #f7f7f2;
  --color-5: #5b5e63;
}

SCSS

$color-1: #596471;
$color-2: #cdd9dc;
$color-3: #8699a7;
$color-4: #f7f7f2;
$color-5: #5b5e63;

TAILWIND

colors: {
  'brand-1': '#596471',
  'brand-2': '#cdd9dc',
  'brand-3': '#8699a7',
  'brand-4': '#f7f7f2',
  'brand-5': '#5b5e63',
}

RGB Array

[89, 100, 113], [205, 217, 220], [134, 153, 167], [247, 247, 242], [91, 94, 99]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #596471, #CDD9DC, #8699A7, #F7F7F2, #5B5E63 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: #596471; --color-2: #cdd9dc; --color-3: #8699a7; --color-4: #f7f7f2; --color-5: #5b5e63. 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