← Back to Editor

#C5D3D1 · #8D9C9D · #708185 · #632540 · #1D0025

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

#C5D3D1

Jade · LightGray · Glacier Blue

HEX
#C5D3D1
RGB
rgb(197, 211, 209)
HSL
hsl(171, 14%, 80%)
HSB
hsb(171, 7%, 83%)
CMYK
cmyk(7%, 0%, 1%, 17%)
Oklch
oklch(85.6% 0.015 186.6)

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

#8D9C9D

Slate Blue · LightSlateGray · Silver Sand

HEX
#8D9C9D
RGB
rgb(141, 156, 157)
HSL
hsl(184, 8%, 58%)
HSB
hsb(184, 10%, 62%)
CMYK
cmyk(10%, 1%, 0%, 38%)
Oklch
oklch(68.1% 0.017 201.6)

Traditional「Slate Blue」· Paint「Silver Sand」· Creative Urban Concrete

#708185

Slate Blue · SlateGray · Warm Gray

HEX
#708185
RGB
rgb(112, 129, 133)
HSL
hsl(191, 9%, 48%)
HSB
hsb(191, 16%, 52%)
CMYK
cmyk(16%, 3%, 0%, 48%)
Oklch
oklch(59.1% 0.021 213.5)

Traditional「Slate Blue」· Paint「Warm Gray」· Creative Urban Concrete

#632540

Dark Violet · DarkSlateGray · Camellia

HEX
#632540
RGB
rgb(99, 37, 64)
HSL
hsl(334, 46%, 27%)
HSB
hsb(334, 63%, 39%)
CMYK
cmyk(0%, 63%, 35%, 61%)
Oklch
oklch(36.4% 0.095 355.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#1D0025

Royal Purple · Black · Dark Purple

HEX
#1D0025
RGB
rgb(29, 0, 37)
HSL
hsl(287, 100%, 7%)
HSB
hsb(287, 100%, 15%)
CMYK
cmyk(22%, 100%, 0%, 85%)
Oklch
oklch(16.9% 0.082 318.6)

Traditional「Royal Purple」· Paint「Dark Purple」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5D3D1
D3C5C7

Analogous

C5D3CA
C5D3D1
C5CED3

Triadic

C5D3D1
D1C5D3
D3D1C5

Split-Comp.

C5D3D1
D3C5CE
D3CAC5

Tetradic

C5D3D1
CAC5D3
D3C5C7
CED3C5

Contrast Matrix WCAG 2.1 Contrast

C5D3D1
8D9C9D
708185
632540
1D0025
—
1.8
Fail
2.6
Fail
7.3
AAA
12.6
AAA
1.8
Fail
—
1.4
Fail
3.9
AA Large
6.8
AA
2.6
Fail
1.4
Fail
—
2.8
Fail
4.8
AA
7.3
AAA
3.9
AA Large
2.8
Fail
—
1.7
Fail
12.6
AAA
6.8
AA
4.8
AA
1.7
Fail
—
White BG
1.5Fail
2.8Fail
4.1AA Large
11.2AAA
19.5AAA
Black BG
13.6AAA
7.4AAA
5.2AA
1.9Fail
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBD1
93949D
777884
484839
10101C

Deuteranopia

CAC9D2
93929D
767584
4C5038
12141A

Tritanopia

C6D2D2
8E9D9D
718383
603433
1C1513

Achromatopsia

CFCFCF
989898
7C7C7C
3B3B3B
0D0D0D

Shades & Tints Shades & Tints

#C5D3D1

Dark
Light

#8D9C9D

Dark
Light

#708185

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5d3d1;
  --color-2: #8d9c9d;
  --color-3: #708185;
  --color-4: #632540;
  --color-5: #1d0025;
}

SCSS

$color-1: #c5d3d1;
$color-2: #8d9c9d;
$color-3: #708185;
$color-4: #632540;
$color-5: #1d0025;

TAILWIND

colors: {
  'brand-1': '#c5d3d1',
  'brand-2': '#8d9c9d',
  'brand-3': '#708185',
  'brand-4': '#632540',
  'brand-5': '#1d0025',
}

RGB Array

[197, 211, 209], [141, 156, 157], [112, 129, 133], [99, 37, 64], [29, 0, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C5D3D1, #8D9C9D, #708185, #632540, #1D0025 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c5d3d1; --color-2: #8d9c9d; --color-3: #708185; --color-4: #632540; --color-5: #1d0025. 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. 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