← Back to Editor

#8DA5BF · #22252C · #74665D · #A99687 · #E6D1C0

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

#8DA5BF

Azure · DarkGray · Cobalt Blue

HEX
#8DA5BF
RGB
rgb(141, 165, 191)
HSL
hsl(211, 28%, 65%)
HSB
hsb(211, 26%, 75%)
CMYK
cmyk(26%, 14%, 0%, 25%)
Oklch
oklch(71.2% 0.047 250.6)

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

#22252C

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#22252C
RGB
rgb(34, 37, 44)
HSL
hsl(222, 13%, 15%)
HSB
hsb(222, 23%, 17%)
CMYK
cmyk(23%, 16%, 0%, 83%)
Oklch
oklch(26.4% 0.014 267.0)

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

#74665D

Tangerine · DimGray · Amber Brown

HEX
#74665D
RGB
rgb(116, 102, 93)
HSL
hsl(23, 11%, 41%)
HSB
hsb(23, 20%, 45%)
CMYK
cmyk(0%, 12%, 20%, 55%)
Oklch
oklch(52.1% 0.023 54.8)

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

#A99687

Tangerine · DarkGray · Warm Sun

HEX
#A99687
RGB
rgb(169, 150, 135)
HSL
hsl(26, 17%, 60%)
HSB
hsb(26, 20%, 66%)
CMYK
cmyk(0%, 11%, 20%, 34%)
Oklch
oklch(68.6% 0.031 60.5)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#E6D1C0

Apricot · Wheat · Peach Orange

HEX
#E6D1C0
RGB
rgb(230, 209, 192)
HSL
hsl(27, 43%, 83%)
HSB
hsb(27, 17%, 90%)
CMYK
cmyk(0%, 9%, 17%, 10%)
Oklch
oklch(87.3% 0.033 61.4)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

8DA5BF
BFA78D

Analogous

8DBEBF
8DA5BF
8E8DBF

Triadic

8DA5BF
BF8DA5
A5BF8D

Split-Comp.

8DA5BF
BF8E8D
BEBF8D

Tetradic

8DA5BF
BF8DBE
BFA78D
8DBF8E

Contrast Matrix WCAG 2.1 Contrast

8DA5BF
22252C
74665D
A99687
E6D1C0
—
6.0
AA
2.2
Fail
1.1
Fail
1.7
Fail
6.0
AA
—
2.8
Fail
5.4
AA
10.4
AAA
2.2
Fail
2.8
Fail
—
1.9
Fail
3.7
AA Large
1.1
Fail
5.4
AA
1.9
Fail
—
1.9
Fail
1.7
Fail
10.4
AAA
3.7
AA Large
1.9
Fail
—
White BG
2.5Fail
15.3AAA
5.5AA
2.8Fail
1.5Fail
Black BG
8.3AAA
1.4Fail
3.8AA Large
7.4AAA
14.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9798B9
23232A
6E6E5F
A1A18B
DDDDC4

Deuteranopia

9694B7
23232A
6F7060
A2A38C
DEE0C5

Tritanopia

8EB4B3
222929
736161
A88D8E
E5C7C8

Achromatopsia

A1A1A1
252525
696969
9A9A9A
D5D5D5

Shades & Tints Shades & Tints

#8DA5BF

Dark
Light

#22252C

Dark
Light

#74665D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #8da5bf;
  --color-2: #22252c;
  --color-3: #74665d;
  --color-4: #a99687;
  --color-5: #e6d1c0;
}

SCSS

$color-1: #8da5bf;
$color-2: #22252c;
$color-3: #74665d;
$color-4: #a99687;
$color-5: #e6d1c0;

TAILWIND

colors: {
  'brand-1': '#8da5bf',
  'brand-2': '#22252c',
  'brand-3': '#74665d',
  'brand-4': '#a99687',
  'brand-5': '#e6d1c0',
}

RGB Array

[141, 165, 191], [34, 37, 44], [116, 102, 93], [169, 150, 135], [230, 209, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #8DA5BF, #22252C, #74665D, #A99687, #E6D1C0 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: #8da5bf; --color-2: #22252c; --color-3: #74665d; --color-4: #a99687; --color-5: #e6d1c0. 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