← Back to Editor

#853D54 · #876276 · #8490A0 · #70C6CC · #DBD0BD

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

#853D54

Dark Violet · Sienna · Camellia

HEX
#853D54
RGB
rgb(133, 61, 84)
HSL
hsl(341, 37%, 38%)
HSB
hsb(341, 54%, 52%)
CMYK
cmyk(0%, 54%, 37%, 48%)
Oklch
oklch(46.1% 0.102 1.7)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#876276

Rose Purple · Gray · Camellia

HEX
#876276
RGB
rgb(135, 98, 118)
HSL
hsl(328, 16%, 46%)
HSB
hsb(328, 27%, 53%)
CMYK
cmyk(0%, 27%, 13%, 47%)
Oklch
oklch(54.1% 0.056 345.5)

Traditional「Rose Purple」· Paint「Camellia」· Creative Blush Sunrise

#8490A0

Azure · LightSlateGray · Navy Blue

HEX
#8490A0
RGB
rgb(132, 144, 160)
HSL
hsl(214, 13%, 57%)
HSB
hsb(214, 17%, 63%)
CMYK
cmyk(17%, 10%, 0%, 37%)
Oklch
oklch(64.9% 0.028 255.6)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#70C6CC

Sky Blue · MediumAquaMarine · Lake Green

HEX
#70C6CC
RGB
rgb(112, 198, 204)
HSL
hsl(184, 47%, 62%)
HSB
hsb(184, 45%, 80%)
CMYK
cmyk(45%, 3%, 0%, 20%)
Oklch
oklch(77.5% 0.084 201.4)

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

#DBD0BD

Goose Yellow · LightGray · Peach Orange

HEX
#DBD0BD
RGB
rgb(219, 208, 189)
HSL
hsl(38, 29%, 80%)
HSB
hsb(38, 14%, 86%)
CMYK
cmyk(0%, 5%, 14%, 14%)
Oklch
oklch(86.1% 0.028 81.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

853D54
3D856E

Analogous

853D78
853D54
854A3D

Triadic

853D54
54853D
3D5485

Split-Comp.

853D54
3D854A
3D7885

Tetradic

853D54
78853D
3D856E
4A3D85

Contrast Matrix WCAG 2.1 Contrast

853D54
876276
8490A0
70C6CC
DBD0BD
—
1.4
Fail
2.3
Fail
3.8
AA Large
4.9
AA
1.4
Fail
—
1.6
Fail
2.6
Fail
3.4
AA Large
2.3
Fail
1.6
Fail
—
1.6
Fail
2.1
Fail
3.8
AA Large
2.6
Fail
1.6
Fail
—
1.3
Fail
4.9
AA
3.4
AA Large
2.1
Fail
1.3
Fail
—
White BG
7.5AAA
5.2AA
3.2AA Large
2.0Fail
1.5Fail
Black BG
2.8Fail
4.0AA Large
6.5AA
10.6AAA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

66654E
777771
89899C
9596CB
D6D6C2

Deuteranopia

6A6F4D
797C70
89889B
908ACA
D7D8C3

Tritanopia

814A49
856D6D
859998
74C9C9
DAC5C6

Achromatopsia

555555
6F6F6F
8E8E8E
ADADAD
D1D1D1

Shades & Tints Shades & Tints

#853D54

Dark
Light

#876276

Dark
Light

#8490A0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #853d54;
  --color-2: #876276;
  --color-3: #8490a0;
  --color-4: #70c6cc;
  --color-5: #dbd0bd;
}

SCSS

$color-1: #853d54;
$color-2: #876276;
$color-3: #8490a0;
$color-4: #70c6cc;
$color-5: #dbd0bd;

TAILWIND

colors: {
  'brand-1': '#853d54',
  'brand-2': '#876276',
  'brand-3': '#8490a0',
  'brand-4': '#70c6cc',
  'brand-5': '#dbd0bd',
}

RGB Array

[133, 61, 84], [135, 98, 118], [132, 144, 160], [112, 198, 204], [219, 208, 189]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #853D54, #876276, #8490A0, #70C6CC, #DBD0BD 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: #853d54; --color-2: #876276; --color-3: #8490a0; --color-4: #70c6cc; --color-5: #dbd0bd. 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