#96C1D8 + #96A3D9 + #BF96D9 + #D996CF + #F0B4D1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#96C1D8

Sky Blue · LightSteelBlue · Cobalt Blue

HEX

#96C1D8

RGB

rgb(150, 193, 216)

HSL

hsl(201, 46%, 72%)

HSB

hsb(201, 31%, 85%)

CMYK

cmyk(31%, 11%, 0%, 15%)

Oklch

oklch(78.8% 0.056 231.7)

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

#96A3D9

Azure · LightSteelBlue · Cobalt Blue

HEX

#96A3D9

RGB

rgb(150, 163, 217)

HSL

hsl(228, 47%, 72%)

HSB

hsb(228, 31%, 85%)

CMYK

cmyk(31%, 25%, 0%, 15%)

Oklch

oklch(72.5% 0.080 273.8)

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

#BF96D9

Lilac · Orchid · Lilac Purple

HEX

#BF96D9

RGB

rgb(191, 150, 217)

HSL

hsl(277, 47%, 72%)

HSB

hsb(277, 31%, 85%)

CMYK

cmyk(12%, 31%, 0%, 15%)

Oklch

oklch(73.5% 0.104 311.8)

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

#D996CF

Mauve · Orchid · Lilac Purple

HEX

#D996CF

RGB

rgb(217, 150, 207)

HSL

hsl(309, 47%, 72%)

HSB

hsb(309, 31%, 85%)

CMYK

cmyk(0%, 31%, 5%, 15%)

Oklch

oklch(75.7% 0.109 332.0)

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

#F0B4D1

Rouge · Pink · Cherry Blossom

HEX

#F0B4D1

RGB

rgb(240, 180, 209)

HSL

hsl(331, 67%, 82%)

HSB

hsb(331, 25%, 94%)

CMYK

cmyk(0%, 25%, 13%, 6%)

Oklch

oklch(83.3% 0.079 348.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

96C1D8

D8AE97

Analogous

97D8CF

96C1D8

97A1D8

Triadic

96C1D8

D897C1

C1D897

Split-Comp.

96C1D8

D897A1

D8CF97

Tetradic

96C1D8

CF97D8

D8AE97

A1D897

Contrast Matrix WCAG 2.1 Contrast

96C1D8	96A3D9	BF96D9	D996CF	F0B4D1
—	1.3 Fail	1.3 Fail	1.2 Fail	1.1 Fail
1.3 Fail	—	1.0 Fail	1.1 Fail	1.4 Fail
1.3 Fail	1.0 Fail	—	1.1 Fail	1.4 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.3 Fail
1.1 Fail	1.4 Fail	1.4 Fail	1.3 Fail	—

White BG

1.9Fail

2.5Fail

2.4Fail

2.3Fail

1.7Fail

Black BG

10.9AAA

8.5AAA

8.6AAA

9.2AAA

12.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A9D2

9C9CCC

ADADC9

BCBBC1

D6D5CA

Deuteranopia

A6A3D1

9B9AC9

B0B3C5

C0C5BE

DADEC8

Tritanopia

98CECD

97C2BF

BDBCB9

D6B6B4

EDC4C3

Achromatopsia

B7B7B7

A5A5A5

AAAAAA

B1B1B1

C9C9C9

Shades & Tints Shades & Tints

#96C1D8

Dark

Light

#96A3D9

Dark

Light

#BF96D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #96c1d8;
  --color-2: #96a3d9;
  --color-3: #bf96d9;
  --color-4: #d996cf;
  --color-5: #f0b4d1;
}

SCSS

$color-1: #96c1d8;
$color-2: #96a3d9;
$color-3: #bf96d9;
$color-4: #d996cf;
$color-5: #f0b4d1;

TAILWIND

colors: {
  'brand-1': '#96c1d8',
  'brand-2': '#96a3d9',
  'brand-3': '#bf96d9',
  'brand-4': '#d996cf',
  'brand-5': '#f0b4d1',
}

RGB Array

[150, 193, 216], [150, 163, 217], [191, 150, 217], [217, 150, 207], [240, 180, 209]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #96C1D8, #96A3D9, #BF96D9, #D996CF, #F0B4D1 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: #96c1d8; --color-2: #96a3d9; --color-3: #bf96d9; --color-4: #d996cf; --color-5: #f0b4d1. 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 general-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