← Back to Editor

#5D3170 · #BECCD4 · #BFDBC7 · #CBEBBE · #CAFAB6

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#5D3170

Dark Plum · DarkSlateBlue · Eggplant

HEX
#5D3170
RGB
rgb(93, 49, 112)
HSL
hsl(282, 39%, 32%)
HSB
hsb(282, 56%, 44%)
CMYK
cmyk(17%, 56%, 0%, 56%)
Oklch
oklch(39.8% 0.112 314.7)

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

#BECCD4

Sky Blue · LightSteelBlue · Cobalt Blue

HEX
#BECCD4
RGB
rgb(190, 204, 212)
HSL
hsl(202, 20%, 79%)
HSB
hsb(202, 10%, 83%)
CMYK
cmyk(10%, 4%, 0%, 17%)
Oklch
oklch(83.7% 0.019 232.6)

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

#BFDBC7

Celadon · LightGray · Apple Green

HEX
#BFDBC7
RGB
rgb(191, 219, 199)
HSL
hsl(137, 28%, 80%)
HSB
hsb(137, 13%, 86%)
CMYK
cmyk(13%, 0%, 9%, 14%)
Oklch
oklch(86.5% 0.040 154.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#CBEBBE

Emerald · LightGray · Mint Green

HEX
#CBEBBE
RGB
rgb(203, 235, 190)
HSL
hsl(103, 53%, 83%)
HSB
hsb(103, 19%, 92%)
CMYK
cmyk(14%, 0%, 19%, 8%)
Oklch
oklch(90.5% 0.069 136.7)

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

#CAFAB6

Emerald · LightGray · Mint Green

HEX
#CAFAB6
RGB
rgb(202, 250, 182)
HSL
hsl(102, 87%, 85%)
HSB
hsb(102, 27%, 98%)
CMYK
cmyk(19%, 0%, 27%, 2%)
Oklch
oklch(93.5% 0.102 136.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5D3170
457132

Analogous

3F3271
5D3170
713265

Triadic

5D3170
715E32
32715E

Split-Comp.

5D3170
657132
32713F

Tetradic

5D3170
713F32
457132
326571

Contrast Matrix WCAG 2.1 Contrast

5D3170
BECCD4
BFDBC7
CBEBBE
CAFAB6
—
6.0
AA
6.6
AA
7.6
AAA
8.4
AAA
6.0
AA
—
1.1
Fail
1.3
Fail
1.4
Fail
6.6
AA
1.1
Fail
—
1.1
Fail
1.3
Fail
7.6
AAA
1.3
Fail
1.1
Fail
—
1.1
Fail
8.4
AAA
1.4
Fail
1.3
Fail
1.1
Fail
—
White BG
9.8AAA
1.6Fail
1.5Fail
1.3Fail
1.2Fail
Black BG
2.1Fail
12.8AAA
14.2AAA
16.2AAA
17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

4A4A61
C4C4D2
CBCBCC
D9D9C9
DFDFC6

Deuteranopia

4D505D
C3C2D2
CAC7CD
D7D5CC
DCD8CA

Tritanopia

5B5552
BFD1D0
C0D0D1
CDD1D3
CCD3D6

Achromatopsia

454545
C9C9C9
D0D0D0
DCDCDC
E4E4E4

Shades & Tints Shades & Tints

#5D3170

Dark
Light

#BECCD4

Dark
Light

#BFDBC7

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5d3170;
  --color-2: #beccd4;
  --color-3: #bfdbc7;
  --color-4: #cbebbe;
  --color-5: #cafab6;
}

SCSS

$color-1: #5d3170;
$color-2: #beccd4;
$color-3: #bfdbc7;
$color-4: #cbebbe;
$color-5: #cafab6;

TAILWIND

colors: {
  'brand-1': '#5d3170',
  'brand-2': '#beccd4',
  'brand-3': '#bfdbc7',
  'brand-4': '#cbebbe',
  'brand-5': '#cafab6',
}

RGB Array

[93, 49, 112], [190, 204, 212], [191, 219, 199], [203, 235, 190], [202, 250, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #5D3170, #BECCD4, #BFDBC7, #CBEBBE, #CAFAB6 is ideal for: health products, baby brands, fresh-style blogs, 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: #5d3170; --color-2: #beccd4; --color-3: #bfdbc7; --color-4: #cbebbe; --color-5: #cafab6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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