← Back to Editor

#84B2A3 · #658895 · #634871 · #5F2154 · #3C1536

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

#84B2A3

Jade · DarkSeaGreen · Lake Green

HEX
#84B2A3
RGB
rgb(132, 178, 163)
HSL
hsl(160, 23%, 61%)
HSB
hsb(160, 26%, 70%)
CMYK
cmyk(26%, 0%, 8%, 30%)
Oklch
oklch(72.6% 0.054 172.6)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#658895

Slate Blue · SlateGray · Mint Ice

HEX
#658895
RGB
rgb(101, 136, 149)
HSL
hsl(196, 19%, 49%)
HSB
hsb(196, 32%, 58%)
CMYK
cmyk(32%, 9%, 0%, 42%)
Oklch
oklch(60.5% 0.044 222.8)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#634871

Dark Plum · DimGray · Eggplant

HEX
#634871
RGB
rgb(99, 72, 113)
HSL
hsl(280, 22%, 36%)
HSB
hsb(280, 36%, 44%)
CMYK
cmyk(12%, 36%, 0%, 56%)
Oklch
oklch(44.7% 0.073 313.7)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#5F2154

Rose Purple · Purple · Eggplant

HEX
#5F2154
RGB
rgb(95, 33, 84)
HSL
hsl(311, 48%, 25%)
HSB
hsb(311, 65%, 37%)
CMYK
cmyk(0%, 65%, 12%, 63%)
Oklch
oklch(36.1% 0.112 335.2)

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

#3C1536

Rose Purple · DarkSlateGray · Dark Purple

HEX
#3C1536
RGB
rgb(60, 21, 54)
HSL
hsl(309, 48%, 16%)
HSB
hsb(309, 65%, 24%)
CMYK
cmyk(0%, 65%, 10%, 76%)
Oklch
oklch(27.0% 0.078 333.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

84B2A3
B28594

Analogous

85B28C
84B2A3
85ABB2

Triadic

84B2A3
A385B2
B2A385

Split-Comp.

84B2A3
B285AB
B28C85

Tetradic

84B2A3
8C85B2
B28594
ABB285

Contrast Matrix WCAG 2.1 Contrast

84B2A3
658895
634871
5F2154
3C1536
—
1.6
Fail
3.3
AA Large
4.8
AA
6.6
AA
1.6
Fail
—
2.0
Fail
3.0
AA Large
4.1
AA Large
3.3
AA Large
2.0
Fail
—
1.5
Fail
2.0
Fail
4.8
AA
3.0
AA Large
1.5
Fail
—
1.4
Fail
6.6
AA
4.1
AA Large
2.0
Fail
1.4
Fail
—
White BG
2.4Fail
3.8AA Large
7.8AAA
11.5AAA
15.5AAA
Black BG
8.9AAA
5.5AA
2.7Fail
1.8Fail
1.4Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9898A7
747492
575767
444448
2B2B2E

Deuteranopia

9592A8
726F91
595B65
484C45
2D302C

Tritanopia

86A9AA
678F8F
625F5E
5C3E3C
3A2826

Achromatopsia

A3A3A3
7F7F7F
555555
393939
242424

Shades & Tints Shades & Tints

#84B2A3

Dark
Light

#658895

Dark
Light

#634871

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #84b2a3;
  --color-2: #658895;
  --color-3: #634871;
  --color-4: #5f2154;
  --color-5: #3c1536;
}

SCSS

$color-1: #84b2a3;
$color-2: #658895;
$color-3: #634871;
$color-4: #5f2154;
$color-5: #3c1536;

TAILWIND

colors: {
  'brand-1': '#84b2a3',
  'brand-2': '#658895',
  'brand-3': '#634871',
  'brand-4': '#5f2154',
  'brand-5': '#3c1536',
}

RGB Array

[132, 178, 163], [101, 136, 149], [99, 72, 113], [95, 33, 84], [60, 21, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #84B2A3, #658895, #634871, #5F2154, #3C1536 is ideal for: tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #84b2a3; --color-2: #658895; --color-3: #634871; --color-4: #5f2154; --color-5: #3c1536. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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. 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