← Back to Editor

#85858F · #ACB4C1 · #C7CED6 · #D7D7E1

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#85858F

Ash · Gray · Warm Gray

HEX
#85858F
RGB
rgb(133, 133, 143)
HSL
hsl(240, 4%, 54%)
HSB
hsb(240, 7%, 56%)
CMYK
cmyk(7%, 7%, 0%, 44%)
Oklch
oklch(62.0% 0.015 286.0)

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

#ACB4C1

Azure · Silver · Cobalt Blue

HEX
#ACB4C1
RGB
rgb(172, 180, 193)
HSL
hsl(217, 14%, 72%)
HSB
hsb(217, 11%, 76%)
CMYK
cmyk(11%, 7%, 0%, 24%)
Oklch
oklch(76.8% 0.021 260.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#C7CED6

Azure · LightGray · Sky Blue

HEX
#C7CED6
RGB
rgb(199, 206, 214)
HSL
hsl(212, 15%, 81%)
HSB
hsb(212, 7%, 84%)
CMYK
cmyk(7%, 4%, 0%, 16%)
Oklch
oklch(84.8% 0.014 251.6)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#D7D7E1

Wisteria · LightGray · Sky Blue

HEX
#D7D7E1
RGB
rgb(215, 215, 225)
HSL
hsl(240, 14%, 86%)
HSB
hsb(240, 4%, 88%)
CMYK
cmyk(4%, 4%, 0%, 12%)
Oklch
oklch(88.2% 0.014 286.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

85858F
8E8E85

Analogous

858A8E
85858F
8A858E

Triadic

85858F
8E8585
858E85

Split-Comp.

85858F
8E8A85
8A8E85

Tetradic

85858F
8E858A
8E8E85
858E8A

Contrast Matrix WCAG 2.1 Contrast

85858F
ACB4C1
C7CED6
D7D7E1
—
1.7
Fail
2.3
Fail
2.6
Fail
1.7
Fail
—
1.3
Fail
1.5
Fail
2.3
Fail
1.3
Fail
—
1.1
Fail
2.6
Fail
1.5
Fail
1.1
Fail
—
White BG
3.7AA Large
2.1Fail
1.6Fail
1.4Fail
Black BG
5.7AA
10.1AAA
13.2AAA
14.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

85858D
AFB0BE
CACAD4
D7D7DF

Deuteranopia

85858C
AFAEBD
CAC9D4
D7D7DE

Tritanopia

858B8A
ACBBBB
C7D3D2
D7DDDC

Achromatopsia

868686
B3B3B3
CDCDCD
D8D8D8

Shades & Tints Shades & Tints

#85858F

Dark
Light

#ACB4C1

Dark
Light

#C7CED6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #85858f;
  --color-2: #acb4c1;
  --color-3: #c7ced6;
  --color-4: #d7d7e1;
}

SCSS

$color-1: #85858f;
$color-2: #acb4c1;
$color-3: #c7ced6;
$color-4: #d7d7e1;

TAILWIND

colors: {
  'brand-1': '#85858f',
  'brand-2': '#acb4c1',
  'brand-3': '#c7ced6',
  'brand-4': '#d7d7e1',
}

RGB Array

[133, 133, 143], [172, 180, 193], [199, 206, 214], [215, 215, 225]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This cool-style palette of #85858F, #ACB4C1, #C7CED6, #D7D7E1 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 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #85858f; --color-2: #acb4c1; --color-3: #c7ced6; --color-4: #d7d7e1. 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 4-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