← Back to Editor

#7C5688 · #50577D · #1A5761 · #323438 · #B9EBB9

cool

A 5-color cool palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#7C5688

Dark Plum · DimGray · Violet

HEX
#7C5688
RGB
rgb(124, 86, 136)
HSL
hsl(286, 23%, 44%)
HSB
hsb(286, 37%, 53%)
CMYK
cmyk(9%, 37%, 0%, 47%)
Oklch
oklch(51.3% 0.089 317.8)

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

#50577D

Indigo · DarkSlateBlue · Prussian Blue

HEX
#50577D
RGB
rgb(80, 87, 125)
HSL
hsl(231, 22%, 40%)
HSB
hsb(231, 36%, 49%)
CMYK
cmyk(36%, 30%, 0%, 51%)
Oklch
oklch(46.7% 0.062 275.7)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#1A5761

Lake Blue · DarkSlateGray · Peacock Green

HEX
#1A5761
RGB
rgb(26, 87, 97)
HSL
hsl(188, 58%, 24%)
HSB
hsb(188, 73%, 38%)
CMYK
cmyk(73%, 10%, 0%, 62%)
Oklch
oklch(42.3% 0.063 210.5)

Traditional「Lake Blue」· Paint「Peacock Green」· Creative Blush Sunrise

#323438

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#323438
RGB
rgb(50, 52, 56)
HSL
hsl(220, 6%, 21%)
HSB
hsb(220, 11%, 22%)
CMYK
cmyk(11%, 7%, 0%, 78%)
Oklch
oklch(32.5% 0.008 264.5)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

#B9EBB9

Emerald · LightGray · Mint Green

HEX
#B9EBB9
RGB
rgb(185, 235, 185)
HSL
hsl(120, 56%, 82%)
HSB
hsb(120, 21%, 92%)
CMYK
cmyk(21%, 0%, 21%, 8%)
Oklch
oklch(89.2% 0.085 144.8)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7C5688
628A56

Analogous

64568A
7C5688
8A567C

Triadic

7C5688
8A7E56
568A7E

Split-Comp.

7C5688
7C8A56
568A64

Tetradic

7C5688
8A6456
628A56
567C8A

Contrast Matrix WCAG 2.1 Contrast

7C5688
50577D
1A5761
323438
B9EBB9
—
1.2
Fail
1.4
Fail
2.1
Fail
4.4
AA Large
1.2
Fail
—
1.2
Fail
1.8
Fail
5.2
AA
1.4
Fail
1.2
Fail
—
1.5
Fail
6.1
AA
2.1
Fail
1.8
Fail
1.5
Fail
—
9.3
AAA
4.4
AA Large
5.2
AA
6.1
AA
9.3
AAA
—
White BG
5.9AA
7.0AA
8.1AAA
12.5AAA
1.3Fail
Black BG
3.5AA Large
3.0AA Large
2.6Fail
1.7Fail
15.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6C6B7C
535374
34355F
333337
CFCFC5

Deuteranopia

6E7179
535272
312C5E
333337
CCC8C8

Tritanopia

7A7270
506D6B
1D5D5C
323636
BCCFD1

Achromatopsia

676767
595959
464646
343434
D6D6D6

Shades & Tints Shades & Tints

#7C5688

Dark
Light

#50577D

Dark
Light

#1A5761

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7c5688;
  --color-2: #50577d;
  --color-3: #1a5761;
  --color-4: #323438;
  --color-5: #b9ebb9;
}

SCSS

$color-1: #7c5688;
$color-2: #50577d;
$color-3: #1a5761;
$color-4: #323438;
$color-5: #b9ebb9;

TAILWIND

colors: {
  'brand-1': '#7c5688',
  'brand-2': '#50577d',
  'brand-3': '#1a5761',
  'brand-4': '#323438',
  'brand-5': '#b9ebb9',
}

RGB Array

[124, 86, 136], [80, 87, 125], [26, 87, 97], [50, 52, 56], [185, 235, 185]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #7C5688, #50577D, #1A5761, #323438, #B9EBB9 is ideal for: 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: #7c5688; --color-2: #50577d; --color-3: #1a5761; --color-4: #323438; --color-5: #b9ebb9. 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. 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