#C5E6D6 + #CAD197 + #E4A3DF + #F76EDC + #8B7387 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C5E6D6

Jade · LightGray · Mint Green

HEX

#C5E6D6

RGB

rgb(197, 230, 214)

HSL

hsl(151, 40%, 84%)

HSB

hsb(151, 14%, 90%)

CMYK

cmyk(14%, 0%, 7%, 10%)

Oklch

oklch(89.7% 0.041 164.7)

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

#CAD197

Fresh Green · Tan · Sunflower

HEX

#CAD197

RGB

rgb(202, 209, 151)

HSL

hsl(67, 39%, 71%)

HSB

hsb(67, 28%, 82%)

CMYK

cmyk(3%, 0%, 28%, 18%)

Oklch

oklch(84.1% 0.077 113.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#E4A3DF

Mauve · Violet · Lilac Purple

HEX

#E4A3DF

RGB

rgb(228, 163, 223)

HSL

hsl(305, 55%, 77%)

HSB

hsb(305, 29%, 89%)

CMYK

cmyk(0%, 29%, 2%, 11%)

Oklch

oklch(79.6% 0.109 329.2)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#F76EDC

Mauve · Violet · Lilac Purple

HEX

#F76EDC

RGB

rgb(247, 110, 220)

HSL

hsl(312, 90%, 70%)

HSB

hsb(312, 55%, 97%)

CMYK

cmyk(0%, 55%, 11%, 3%)

Oklch

oklch(73.9% 0.208 335.7)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#8B7387

Rose Purple · Gray · Warm Gray

HEX

#8B7387

RGB

rgb(139, 115, 135)

HSL

hsl(310, 9%, 50%)

HSB

hsb(310, 17%, 55%)

CMYK

cmyk(0%, 17%, 3%, 45%)

Oklch

oklch(58.5% 0.042 331.8)

Traditional「Rose Purple」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C5E6D6

E7C6D6

Analogous

C6E7C6

C5E6D6

C6E6E7

Triadic

C5E6D6

D7C6E7

E7D7C6

Split-Comp.

C5E6D6

E7C6E6

E7C6C6

Tetradic

C5E6D6

C6C6E7

E7C6D6

E6E7C6

Contrast Matrix WCAG 2.1 Contrast

C5E6D6	CAD197	E4A3DF	F76EDC	8B7387
—	1.2 Fail	1.5 Fail	1.9 Fail	3.2 AA Large
1.2 Fail	—	1.2 Fail	1.6 Fail	2.7 Fail
1.5 Fail	1.2 Fail	—	1.3 Fail	2.2 Fail
1.9 Fail	1.6 Fail	1.3 Fail	—	1.7 Fail
3.2 AA Large	2.7 Fail	2.2 Fail	1.7 Fail	—

White BG

1.3Fail

1.6Fail

2.0Fail

2.6Fail

4.3AA Large

Black BG

15.7AAA

13.1AAA

10.6AAA

8.2AAA

4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D3D4DA

CDCDA5

C8C7D0

BCBAC1

818082

Deuteranopia

D1CFDB

CDCCA8

CCD1CD

C4CEBB

828481

Tritanopia

C7DDDE

CAB0B3

E1C5C3

F0ACA8

8A7E7E

Achromatopsia

DADADA

C8C8C8

BDBDBD

A4A4A4

7C7C7C

Shades & Tints Shades & Tints

#C5E6D6

Dark

Light

#CAD197

Dark

Light

#E4A3DF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c5e6d6;
  --color-2: #cad197;
  --color-3: #e4a3df;
  --color-4: #f76edc;
  --color-5: #8b7387;
}

SCSS

$color-1: #c5e6d6;
$color-2: #cad197;
$color-3: #e4a3df;
$color-4: #f76edc;
$color-5: #8b7387;

TAILWIND

colors: {
  'brand-1': '#c5e6d6',
  'brand-2': '#cad197',
  'brand-3': '#e4a3df',
  'brand-4': '#f76edc',
  'brand-5': '#8b7387',
}

RGB Array

[197, 230, 214], [202, 209, 151], [228, 163, 223], [247, 110, 220], [139, 115, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #C5E6D6, #CAD197, #E4A3DF, #F76EDC, #8B7387 is ideal for: health products, baby brands, fresh-style blogs. 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: #c5e6d6; --color-2: #cad197; --color-3: #e4a3df; --color-4: #f76edc; --color-5: #8b7387. 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. 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