← Back to Editor

#D5D6C4 · #C7C6C1 · #7F828B · #9EA182 · #181520

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

#D5D6C4

Fresh Green · LightGray · Lemon Cream

HEX
#D5D6C4
RGB
rgb(213, 214, 196)
HSL
hsl(63, 18%, 80%)
HSB
hsb(63, 8%, 84%)
CMYK
cmyk(0%, 0%, 8%, 16%)
Oklch
oklch(87.0% 0.024 109.5)

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

#C7C6C1

Silver Gray · Silver · Pearl Gray

HEX
#C7C6C1
RGB
rgb(199, 198, 193)
HSL
hsl(50, 5%, 77%)
HSB
hsb(50, 3%, 78%)
CMYK
cmyk(0%, 1%, 3%, 22%)
Oklch
oklch(82.6% 0.007 97.4)

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

#7F828B

Ash · Gray · Warm Gray

HEX
#7F828B
RGB
rgb(127, 130, 139)
HSL
hsl(225, 5%, 52%)
HSB
hsb(225, 9%, 55%)
CMYK
cmyk(9%, 6%, 0%, 45%)
Oklch
oklch(60.7% 0.014 271.2)

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

#9EA182

Autumn Sage · DarkSeaGreen · Sunflower

HEX
#9EA182
RGB
rgb(158, 161, 130)
HSL
hsl(66, 14%, 57%)
HSB
hsb(66, 19%, 63%)
CMYK
cmyk(2%, 0%, 19%, 37%)
Oklch
oklch(69.8% 0.044 112.0)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#181520

Deep Indigo · Black · Deep Sea Blue

HEX
#181520
RGB
rgb(24, 21, 32)
HSL
hsl(256, 21%, 10%)
HSB
hsb(256, 34%, 13%)
CMYK
cmyk(25%, 34%, 0%, 87%)
Oklch
oklch(20.5% 0.022 296.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D5D6C4
C4C3D5

Analogous

D5CDC3
D5D6C4
CBD5C3

Triadic

D5D6C4
C3D4D5
D5C3D4

Split-Comp.

D5D6C4
C3CBD5
CDC3D5

Tetradic

D5D6C4
C3D5CD
C4C3D5
D5C3CB

Contrast Matrix WCAG 2.1 Contrast

D5D6C4
C7C6C1
7F828B
9EA182
181520
—
1.2
Fail
2.6
Fail
1.8
Fail
12.2
AAA
1.2
Fail
—
2.2
Fail
1.6
Fail
10.5
AAA
2.6
Fail
2.2
Fail
—
1.4
Fail
4.7
AA
1.8
Fail
1.6
Fail
1.4
Fail
—
6.7
AA
12.2
AAA
10.5
AAA
4.7
AA
6.7
AA
—
White BG
1.5Fail
1.7Fail
3.8AA Large
2.7Fail
18.0AAA
Black BG
14.2AAA
12.3AAA
5.5AA
7.9AAA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

D5D5C8
C7C7C2
808089
9F9F8A
17171D

Deuteranopia

D5D5C9
C7C7C3
808088
9F9F8B
17171D

Tritanopia

D5CCCD
C7C3C3
7F8787
9E8F91
181B1B

Achromatopsia

D4D4D4
C6C6C6
828282
9D9D9D
171717

Shades & Tints Shades & Tints

#D5D6C4

Dark
Light

#C7C6C1

Dark
Light

#7F828B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d5d6c4;
  --color-2: #c7c6c1;
  --color-3: #7f828b;
  --color-4: #9ea182;
  --color-5: #181520;
}

SCSS

$color-1: #d5d6c4;
$color-2: #c7c6c1;
$color-3: #7f828b;
$color-4: #9ea182;
$color-5: #181520;

TAILWIND

colors: {
  'brand-1': '#d5d6c4',
  'brand-2': '#c7c6c1',
  'brand-3': '#7f828b',
  'brand-4': '#9ea182',
  'brand-5': '#181520',
}

RGB Array

[213, 214, 196], [199, 198, 193], [127, 130, 139], [158, 161, 130], [24, 21, 32]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D5D6C4, #C7C6C1, #7F828B, #9EA182, #181520 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: #d5d6c4; --color-2: #c7c6c1; --color-3: #7f828b; --color-4: #9ea182; --color-5: #181520. 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