← Back to Editor

#656A63 · #A2B4B7 · #D6DDDB · #C09E9B · #53687B

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

#656A63

Ink Gray · DimGray · Charcoal

HEX
#656A63
RGB
rgb(101, 106, 99)
HSL
hsl(103, 3%, 40%)
HSB
hsb(103, 7%, 42%)
CMYK
cmyk(5%, 0%, 7%, 58%)
Oklch
oklch(51.8% 0.012 136.6)

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

#A2B4B7

Sky Blue · DarkGray · Lake Green

HEX
#A2B4B7
RGB
rgb(162, 180, 183)
HSL
hsl(189, 13%, 68%)
HSB
hsb(189, 11%, 72%)
CMYK
cmyk(11%, 2%, 0%, 28%)
Oklch
oklch(75.7% 0.020 208.7)

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

#D6DDDB

Jade · LightGray · Pearl Gray

HEX
#D6DDDB
RGB
rgb(214, 221, 219)
HSL
hsl(163, 9%, 85%)
HSB
hsb(163, 3%, 87%)
CMYK
cmyk(3%, 0%, 1%, 13%)
Oklch
oklch(89.2% 0.008 177.3)

Traditional「Jade」· Paint「Pearl Gray」· Creative Silver Lining

#C09E9B

Peach Pink · DarkGray · Coral Red

HEX
#C09E9B
RGB
rgb(192, 158, 155)
HSL
hsl(5, 23%, 68%)
HSB
hsb(5, 19%, 75%)
CMYK
cmyk(0%, 18%, 19%, 25%)
Oklch
oklch(72.9% 0.041 24.0)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#53687B

Slate Blue · DimGray · Prussian Blue

HEX
#53687B
RGB
rgb(83, 104, 123)
HSL
hsl(209, 19%, 40%)
HSB
hsb(209, 33%, 48%)
CMYK
cmyk(33%, 15%, 0%, 52%)
Oklch
oklch(50.8% 0.039 246.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

656A63
676369

Analogous

686963
656A63
636964

Triadic

656A63
636569
696365

Split-Comp.

656A63
646369
696368

Tetradic

656A63
636869
676369
696463

Contrast Matrix WCAG 2.1 Contrast

656A63
A2B4B7
D6DDDB
C09E9B
53687B
—
2.6
Fail
4.0
AA Large
2.3
Fail
1.0
Fail
2.6
Fail
—
1.6
Fail
1.1
Fail
2.7
Fail
4.0
AA Large
1.6
Fail
—
1.8
Fail
4.2
AA Large
2.3
Fail
1.1
Fail
1.8
Fail
—
2.4
Fail
1.0
Fail
2.7
Fail
4.2
AA Large
2.4
Fail
—
White BG
5.5AA
2.2Fail
1.4Fail
2.4Fail
5.8AA
Black BG
3.8AA Large
9.7AAA
15.2AAA
8.6AAA
3.6AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

676765
AAAAB6
D9D9DB
B1B19C
5C5C76

Deuteranopia

676665
A9A7B6
D9D8DC
B3B69C
5B5975

Tritanopia

656666
A3B6B6
D6DCDC
BE9C9C
547372

Achromatopsia

686868
AFAFAF
DBDBDB
A8A8A8
646464

Shades & Tints Shades & Tints

#656A63

Dark
Light

#A2B4B7

Dark
Light

#D6DDDB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #656a63;
  --color-2: #a2b4b7;
  --color-3: #d6dddb;
  --color-4: #c09e9b;
  --color-5: #53687b;
}

SCSS

$color-1: #656a63;
$color-2: #a2b4b7;
$color-3: #d6dddb;
$color-4: #c09e9b;
$color-5: #53687b;

TAILWIND

colors: {
  'brand-1': '#656a63',
  'brand-2': '#a2b4b7',
  'brand-3': '#d6dddb',
  'brand-4': '#c09e9b',
  'brand-5': '#53687b',
}

RGB Array

[101, 106, 99], [162, 180, 183], [214, 221, 219], [192, 158, 155], [83, 104, 123]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #656A63, #A2B4B7, #D6DDDB, #C09E9B, #53687B 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: #656a63; --color-2: #a2b4b7; --color-3: #d6dddb; --color-4: #c09e9b; --color-5: #53687b. 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