#D7F4E7 + #C7DBF2 + #9CB7D6 + #9E9CD6 + #8482C4 · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D7F4E7

Jade · Lavender · Mint Green

HEX

#D7F4E7

RGB

rgb(215, 244, 231)

HSL

hsl(153, 57%, 90%)

HSB

hsb(153, 12%, 96%)

CMYK

cmyk(12%, 0%, 5%, 4%)

Oklch

oklch(94.3% 0.035 166.8)

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

#C7DBF2

Azure · LightBlue · Sky Blue

HEX

#C7DBF2

RGB

rgb(199, 219, 242)

HSL

hsl(212, 62%, 86%)

HSB

hsb(212, 18%, 95%)

CMYK

cmyk(18%, 10%, 0%, 5%)

Oklch

oklch(88.4% 0.038 251.9)

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

#9CB7D6

Azure · LightSteelBlue · Cobalt Blue

HEX

#9CB7D6

RGB

rgb(156, 183, 214)

HSL

hsl(212, 41%, 73%)

HSB

hsb(212, 27%, 84%)

CMYK

cmyk(27%, 14%, 0%, 16%)

Oklch

oklch(77.0% 0.054 252.1)

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

#9E9CD6

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#9E9CD6

RGB

rgb(158, 156, 214)

HSL

hsl(242, 41%, 73%)

HSB

hsb(242, 27%, 84%)

CMYK

cmyk(26%, 27%, 0%, 16%)

Oklch

oklch(71.6% 0.084 285.7)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

#8482C4

Wisteria · LightSlateGray · Cobalt Blue

HEX

#8482C4

RGB

rgb(132, 130, 196)

HSL

hsl(242, 36%, 64%)

HSB

hsb(242, 34%, 77%)

CMYK

cmyk(33%, 34%, 0%, 23%)

Oklch

oklch(63.5% 0.098 284.6)

Traditional「Wisteria」· Paint「Cobalt Blue」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7F4E7

F4D7E4

Analogous

D7F4D8

D7F4E7

D7F3F4

Triadic

D7F4E7

E7D7F4

F4E7D7

Split-Comp.

D7F4E7

F4D7F3

F4D8D7

Tetradic

D7F4E7

D8D7F4

F4D7E4

F3F4D7

Contrast Matrix WCAG 2.1 Contrast

D7F4E7	C7DBF2	9CB7D6	9E9CD6	8482C4
—	1.2 Fail	1.8 Fail	2.2 Fail	3.0 AA Large
1.2 Fail	—	1.5 Fail	1.8 Fail	2.5 Fail
1.8 Fail	1.5 Fail	—	1.2 Fail	1.7 Fail
2.2 Fail	1.8 Fail	1.2 Fail	—	1.4 Fail
3.0 AA Large	2.5 Fail	1.7 Fail	1.4 Fail	—

White BG

1.2Fail

1.4Fail

2.1Fail

2.6Fail

3.5AA Large

Black BG

18.0AAA

14.8AAA

10.2AAA

8.2AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4EA

D0D0EC

A8A8CE

9D9DC8

8383B4

Deuteranopia

E2E0EB

CFCDEB

A6A4CD

9D9DC5

8383B0

Tritanopia

D8EDED

C8E8E7

9DC9C7

9EBDBA

84A7A5

Achromatopsia

EAEAEA

D8D8D8

B2B2B2

A3A3A3

8A8A8A

Shades & Tints Shades & Tints

#D7F4E7

Dark

Light

#C7DBF2

Dark

Light

#9CB7D6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7f4e7;
  --color-2: #c7dbf2;
  --color-3: #9cb7d6;
  --color-4: #9e9cd6;
  --color-5: #8482c4;
}

SCSS

$color-1: #d7f4e7;
$color-2: #c7dbf2;
$color-3: #9cb7d6;
$color-4: #9e9cd6;
$color-5: #8482c4;

TAILWIND

colors: {
  'brand-1': '#d7f4e7',
  'brand-2': '#c7dbf2',
  'brand-3': '#9cb7d6',
  'brand-4': '#9e9cd6',
  'brand-5': '#8482c4',
}

RGB Array

[215, 244, 231], [199, 219, 242], [156, 183, 214], [158, 156, 214], [132, 130, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #D7F4E7, #C7DBF2, #9CB7D6, #9E9CD6, #8482C4 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: #d7f4e7; --color-2: #c7dbf2; --color-3: #9cb7d6; --color-4: #9e9cd6; --color-5: #8482c4. 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