#987AC0 + #E7B7D1 + #F4D3C4 + #F8F4C7 + #F9FDFC · cool - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#987AC0

Wisteria · LightSlateGray · Lilac Purple

HEX

#987AC0

RGB

rgb(152, 122, 192)

HSL

hsl(266, 36%, 62%)

HSB

hsb(266, 36%, 75%)

CMYK

cmyk(21%, 36%, 0%, 25%)

Oklch

oklch(63.5% 0.107 303.2)

Traditional「Wisteria」· Paint「Lilac Purple」· Creative Lavender Dream

#E7B7D1

Mauve · Pink · Cherry Blossom

HEX

#E7B7D1

RGB

rgb(231, 183, 209)

HSL

hsl(328, 50%, 81%)

HSB

hsb(328, 21%, 91%)

CMYK

cmyk(0%, 21%, 10%, 9%)

Oklch

oklch(83.0% 0.065 344.9)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#F4D3C4

Apricot · Bisque · Peach Orange

HEX

#F4D3C4

RGB

rgb(244, 211, 196)

HSL

hsl(19, 69%, 86%)

HSB

hsb(19, 20%, 96%)

CMYK

cmyk(0%, 14%, 20%, 4%)

Oklch

oklch(89.1% 0.042 45.9)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#F8F4C7

Fresh Green · Bisque · Lemon Cream

HEX

#F8F4C7

RGB

rgb(248, 244, 199)

HSL

hsl(55, 78%, 88%)

HSB

hsb(55, 20%, 97%)

CMYK

cmyk(0%, 2%, 20%, 3%)

Oklch

oklch(95.9% 0.058 103.2)

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

#F9FDFC

Jade · White · Glacier Blue

HEX

#F9FDFC

RGB

rgb(249, 253, 252)

HSL

hsl(165, 50%, 98%)

HSB

hsb(165, 2%, 99%)

CMYK

cmyk(2%, 0%, 0%, 1%)

Oklch

oklch(99.1% 0.004 179.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

987AC0

A3C17B

Analogous

7B80C1

987AC0

BC7BC1

Triadic

987AC0

C1997B

7BC199

Split-Comp.

987AC0

C1BC7B

80C17B

Tetradic

987AC0

C17B80

A3C17B

7BC1BC

Contrast Matrix WCAG 2.1 Contrast

987AC0	E7B7D1	F4D3C4	F8F4C7	F9FDFC
—	2.1 Fail	2.5 Fail	3.2 AA Large	3.5 AA Large
2.1 Fail	—	1.2 Fail	1.6 Fail	1.7 Fail
2.5 Fail	1.2 Fail	—	1.3 Fail	1.4 Fail
3.2 AA Large	1.6 Fail	1.3 Fail	—	1.1 Fail
3.5 AA Large	1.7 Fail	1.4 Fail	1.1 Fail	—

White BG

3.6AA Large

1.7Fail

1.4Fail

1.1Fail

1.0Fail

Black BG

5.9AA

12.1AAA

15.0AAA

18.8AAA

20.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8B8BAF

D2D2CB

E6E5C8

F6F6D2

FBFBFC

Deuteranopia

8D8FAB

D5D9C9

E8EAC9

F7F7D5

FBFAFC

Tritanopia

97A29F

E5C6C5

F2CACB

F8DADC

F9FCFC

Achromatopsia

8B8B8B

C8C8C8

DBDBDB

F0F0F0

FCFCFC

Shades & Tints Shades & Tints

#987AC0

Dark

Light

#E7B7D1

Dark

Light

#F4D3C4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #987ac0;
  --color-2: #e7b7d1;
  --color-3: #f4d3c4;
  --color-4: #f8f4c7;
  --color-5: #f9fdfc;
}

SCSS

$color-1: #987ac0;
$color-2: #e7b7d1;
$color-3: #f4d3c4;
$color-4: #f8f4c7;
$color-5: #f9fdfc;

TAILWIND

colors: {
  'brand-1': '#987ac0',
  'brand-2': '#e7b7d1',
  'brand-3': '#f4d3c4',
  'brand-4': '#f8f4c7',
  'brand-5': '#f9fdfc',
}

RGB Array

[152, 122, 192], [231, 183, 209], [244, 211, 196], [248, 244, 199], [249, 253, 252]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #987AC0, #E7B7D1, #F4D3C4, #F8F4C7, #F9FDFC 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: #987ac0; --color-2: #e7b7d1; --color-3: #f4d3c4; --color-4: #f8f4c7; --color-5: #f9fdfc. 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