← Back to Editor

#6192C3 · #7486B4 · #867BA5 · #996F97 · #AB6488

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

#6192C3

Azure · SteelBlue · Navy Blue

HEX
#6192C3
RGB
rgb(97, 146, 195)
HSL
hsl(210, 45%, 57%)
HSB
hsb(210, 50%, 76%)
CMYK
cmyk(50%, 25%, 0%, 24%)
Oklch
oklch(64.5% 0.091 249.4)

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

#7486B4

Azure · LightSlateGray · Navy Blue

HEX
#7486B4
RGB
rgb(116, 134, 180)
HSL
hsl(223, 30%, 58%)
HSB
hsb(223, 36%, 71%)
CMYK
cmyk(36%, 26%, 0%, 29%)
Oklch
oklch(62.4% 0.073 267.8)

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

#867BA5

Deep Indigo · LightSlateGray · Navy Blue

HEX
#867BA5
RGB
rgb(134, 123, 165)
HSL
hsl(256, 19%, 56%)
HSB
hsb(256, 25%, 65%)
CMYK
cmyk(19%, 25%, 0%, 35%)
Oklch
oklch(60.8% 0.064 296.5)

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

#996F97

Rose Purple · Gray · Violet

HEX
#996F97
RGB
rgb(153, 111, 151)
HSL
hsl(303, 17%, 52%)
HSB
hsb(303, 27%, 60%)
CMYK
cmyk(0%, 27%, 1%, 40%)
Oklch
oklch(59.8% 0.077 328.1)

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

#AB6488

Dark Violet · Gray · Rose Pink

HEX
#AB6488
RGB
rgb(171, 100, 136)
HSL
hsl(330, 30%, 53%)
HSB
hsb(330, 42%, 67%)
CMYK
cmyk(0%, 42%, 20%, 33%)
Oklch
oklch(59.4% 0.102 348.9)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

6192C3
C39160

Analogous

60C3C3
6192C3
6060C3

Triadic

6192C3
C36091
91C360

Split-Comp.

6192C3
C36060
C3C360

Tetradic

6192C3
C360C3
C39160
60C360

Contrast Matrix WCAG 2.1 Contrast

6192C3
7486B4
867BA5
996F97
AB6488
—
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.3
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
White BG
3.3AA Large
3.6AA Large
3.9AA Large
4.1AA Large
4.3AA Large
Black BG
6.4AA
5.8AA
5.4AA
5.1AA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7677B7
7C7CA9
81819B
87868D
8C8C7F

Deuteranopia

7370B4
7B79A6
828398
898C8B
90967D

Tritanopia

63AEAC
75A09E
859391
978684
A77877

Achromatopsia

898989
868686
838383
808080
7D7D7D

Shades & Tints Shades & Tints

#6192C3

Dark
Light

#7486B4

Dark
Light

#867BA5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #6192c3;
  --color-2: #7486b4;
  --color-3: #867ba5;
  --color-4: #996f97;
  --color-5: #ab6488;
}

SCSS

$color-1: #6192c3;
$color-2: #7486b4;
$color-3: #867ba5;
$color-4: #996f97;
$color-5: #ab6488;

TAILWIND

colors: {
  'brand-1': '#6192c3',
  'brand-2': '#7486b4',
  'brand-3': '#867ba5',
  'brand-4': '#996f97',
  'brand-5': '#ab6488',
}

RGB Array

[97, 146, 195], [116, 134, 180], [134, 123, 165], [153, 111, 151], [171, 100, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #6192C3, #7486B4, #867BA5, #996F97, #AB6488 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: #6192c3; --color-2: #7486b4; --color-3: #867ba5; --color-4: #996f97; --color-5: #ab6488. 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