← Back to Editor

#A9C5D1 · #A1B8BE · #8B8D8C · #7D796D · #84694E

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 Library

Color Details Color Details

#A9C5D1

Sky Blue · LightSteelBlue · Lake Green

HEX
#A9C5D1
RGB
rgb(169, 197, 209)
HSL
hsl(198, 30%, 74%)
HSB
hsb(198, 19%, 82%)
CMYK
cmyk(19%, 6%, 0%, 18%)
Oklch
oklch(80.6% 0.035 225.6)

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

#A1B8BE

Sky Blue · DarkGray · Lake Green

HEX
#A1B8BE
RGB
rgb(161, 184, 190)
HSL
hsl(192, 18%, 69%)
HSB
hsb(192, 15%, 75%)
CMYK
cmyk(15%, 3%, 0%, 25%)
Oklch
oklch(76.7% 0.027 215.2)

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

#8B8D8C

Ash · Gray · Warm Gray

HEX
#8B8D8C
RGB
rgb(139, 141, 140)
HSL
hsl(150, 1%, 55%)
HSB
hsb(150, 1%, 55%)
CMYK
cmyk(1%, 0%, 1%, 45%)
Oklch
oklch(64.1% 0.003 165.0)

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

#7D796D

Ink Gray · Gray · Warm Gray

HEX
#7D796D
RGB
rgb(125, 121, 109)
HSL
hsl(45, 7%, 46%)
HSB
hsb(45, 13%, 49%)
CMYK
cmyk(0%, 3%, 13%, 51%)
Oklch
oklch(57.6% 0.019 91.7)

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

#84694E

Ochre · DimGray · Amber Brown

HEX
#84694E
RGB
rgb(132, 105, 78)
HSL
hsl(30, 26%, 41%)
HSB
hsb(30, 41%, 52%)
CMYK
cmyk(0%, 20%, 41%, 48%)
Oklch
oklch(54.0% 0.052 66.3)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A9C5D1
D1B5A9

Analogous

A9D1C9
A9C5D1
A9B1D1

Triadic

A9C5D1
D1A9C5
C5D1A9

Split-Comp.

A9C5D1
D1A9B1
D1C9A9

Tetradic

A9C5D1
C9A9D1
D1B5A9
B1D1A9

Contrast Matrix WCAG 2.1 Contrast

A9C5D1
A1B8BE
8B8D8C
7D796D
84694E
—
1.1
Fail
1.8
Fail
2.4
Fail
2.8
Fail
1.1
Fail
—
1.6
Fail
2.1
Fail
2.5
Fail
1.8
Fail
1.6
Fail
—
1.3
Fail
1.5
Fail
2.4
Fail
2.1
Fail
1.3
Fail
—
1.2
Fail
2.8
Fail
2.5
Fail
1.5
Fail
1.2
Fail
—
White BG
1.8Fail
2.1Fail
3.3AA Large
4.3AA Large
5.1AA
Black BG
11.6AAA
10.1AAA
6.3AA
4.8AA
4.1AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B5B5CE
ABABBD
8C8C8C
7B7B70
787855

Deuteranopia

B4B1CD
AAA8BC
8C8C8C
7C7C71
7A7C56

Tritanopia

AACCCB
A2BBBB
8B8C8C
7D7273
835A5B

Achromatopsia

BEBEBE
B2B2B2
8C8C8C
797979
6E6E6E

Shades & Tints Shades & Tints

#A9C5D1

Dark
Light

#A1B8BE

Dark
Light

#8B8D8C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a9c5d1;
  --color-2: #a1b8be;
  --color-3: #8b8d8c;
  --color-4: #7d796d;
  --color-5: #84694e;
}

SCSS

$color-1: #a9c5d1;
$color-2: #a1b8be;
$color-3: #8b8d8c;
$color-4: #7d796d;
$color-5: #84694e;

TAILWIND

colors: {
  'brand-1': '#a9c5d1',
  'brand-2': '#a1b8be',
  'brand-3': '#8b8d8c',
  'brand-4': '#7d796d',
  'brand-5': '#84694e',
}

RGB Array

[169, 197, 209], [161, 184, 190], [139, 141, 140], [125, 121, 109], [132, 105, 78]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #A9C5D1, #A1B8BE, #8B8D8C, #7D796D, #84694E is ideal for: brand design, premium product pages, magazine layouts. 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: #a9c5d1; --color-2: #a1b8be; --color-3: #8b8d8c; --color-4: #7d796d; --color-5: #84694e. 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. 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