← Back to Editor

#847C73 · #A5B6BA · #D8E7D3 · #CACFD1 · #C0BED3

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#847C73

Ink Gray · Gray · Warm Gray

HEX
#847C73
RGB
rgb(132, 124, 115)
HSL
hsl(32, 7%, 48%)
HSB
hsb(32, 13%, 52%)
CMYK
cmyk(0%, 6%, 13%, 48%)
Oklch
oklch(59.1% 0.017 70.8)

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

#A5B6BA

Sky Blue · DarkGray · Lake Green

HEX
#A5B6BA
RGB
rgb(165, 182, 186)
HSL
hsl(191, 13%, 69%)
HSB
hsb(191, 11%, 73%)
CMYK
cmyk(11%, 2%, 0%, 27%)
Oklch
oklch(76.4% 0.020 213.4)

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

#D8E7D3

Celadon · LightGray · Mint Green

HEX
#D8E7D3
RGB
rgb(216, 231, 211)
HSL
hsl(105, 29%, 87%)
HSB
hsb(105, 9%, 91%)
CMYK
cmyk(6%, 0%, 9%, 9%)
Oklch
oklch(91.1% 0.031 137.8)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#CACFD1

Silver Gray · LightGray · Pearl Gray

HEX
#CACFD1
RGB
rgb(202, 207, 209)
HSL
hsl(197, 7%, 81%)
HSB
hsb(197, 3%, 82%)
CMYK
cmyk(3%, 1%, 0%, 18%)
Oklch
oklch(85.1% 0.006 223.5)

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

#C0BED3

Wisteria · Silver · Cobalt Blue

HEX
#C0BED3
RGB
rgb(192, 190, 211)
HSL
hsl(246, 19%, 79%)
HSB
hsb(246, 10%, 83%)
CMYK
cmyk(9%, 10%, 0%, 17%)
Oklch
oklch(81.0% 0.029 290.1)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

847C73
727A83

Analogous

837272
847C73
828372

Triadic

847C73
72837B
7B7283

Split-Comp.

847C73
728283
727283

Tetradic

847C73
728372
727A83
837282

Contrast Matrix WCAG 2.1 Contrast

847C73
A5B6BA
D8E7D3
CACFD1
C0BED3
—
2.0
Fail
3.2
AA Large
2.6
Fail
2.3
Fail
2.0
Fail
—
1.6
Fail
1.3
Fail
1.2
Fail
3.2
AA Large
1.6
Fail
—
1.2
Fail
1.4
Fail
2.6
Fail
1.3
Fail
1.2
Fail
—
1.2
Fail
2.3
Fail
1.2
Fail
1.4
Fail
1.2
Fail
—
White BG
4.1AA Large
2.1Fail
1.3Fail
1.6Fail
1.8Fail
Black BG
5.1AA
10.0AAA
16.3AAA
13.4AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

818075
ACADB9
DEDFD8
CCCCD1
BFBFCE

Deuteranopia

818276
ABAAB9
DEDDD9
CCCBD0
BFBFCD

Tritanopia

847777
A6B8B8
D9DCDD
CAD0D0
C0CAC9

Achromatopsia

7D7D7D
B1B1B1
E0E0E0
CECECE
C1C1C1

Shades & Tints Shades & Tints

#847C73

Dark
Light

#A5B6BA

Dark
Light

#D8E7D3

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #847c73;
  --color-2: #a5b6ba;
  --color-3: #d8e7d3;
  --color-4: #cacfd1;
  --color-5: #c0bed3;
}

SCSS

$color-1: #847c73;
$color-2: #a5b6ba;
$color-3: #d8e7d3;
$color-4: #cacfd1;
$color-5: #c0bed3;

TAILWIND

colors: {
  'brand-1': '#847c73',
  'brand-2': '#a5b6ba',
  'brand-3': '#d8e7d3',
  'brand-4': '#cacfd1',
  'brand-5': '#c0bed3',
}

RGB Array

[132, 124, 115], [165, 182, 186], [216, 231, 211], [202, 207, 209], [192, 190, 211]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #847C73, #A5B6BA, #D8E7D3, #CACFD1, #C0BED3 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. 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: #847c73; --color-2: #a5b6ba; --color-3: #d8e7d3; --color-4: #cacfd1; --color-5: #c0bed3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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 beauty, lifestyle, arts 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