#D8F4BB + #969EB4 + #DCBDD3 + #F4D1FA + #B8ACC7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8F4BB

Willow Green · Wheat · Mint Green

HEX

#D8F4BB

RGB

rgb(216, 244, 187)

HSL

hsl(89, 72%, 85%)

HSB

hsb(89, 23%, 96%)

CMYK

cmyk(11%, 0%, 23%, 4%)

Oklch

oklch(93.3% 0.080 129.1)

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

#969EB4

Azure · DarkGray · Cobalt Blue

HEX

#969EB4

RGB

rgb(150, 158, 180)

HSL

hsl(224, 17%, 65%)

HSB

hsb(224, 17%, 71%)

CMYK

cmyk(17%, 12%, 0%, 29%)

Oklch

oklch(70.0% 0.033 269.7)

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

#DCBDD3

Mauve · LightGray · Lilac Purple

HEX

#DCBDD3

RGB

rgb(220, 189, 211)

HSL

hsl(317, 31%, 80%)

HSB

hsb(317, 14%, 86%)

CMYK

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

Oklch

oklch(83.1% 0.046 336.5)

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

#F4D1FA

Lilac · Lavender · Lavender

HEX

#F4D1FA

RGB

rgb(244, 209, 250)

HSL

hsl(291, 80%, 90%)

HSB

hsb(291, 16%, 98%)

CMYK

cmyk(2%, 16%, 0%, 2%)

Oklch

oklch(90.3% 0.067 321.3)

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

#B8ACC7

Wisteria · Silver · Lilac Purple

HEX

#B8ACC7

RGB

rgb(184, 172, 199)

HSL

hsl(267, 19%, 73%)

HSB

hsb(267, 14%, 78%)

CMYK

cmyk(8%, 14%, 0%, 22%)

Oklch

oklch(76.3% 0.040 305.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8F4BB

D8BDF4

Analogous

F4F3BD

D8F4BB

BEF4BD

Triadic

D8F4BB

BDDAF4

F4BDDA

Split-Comp.

D8F4BB

BDBEF4

F3BDF4

Tetradic

D8F4BB

BDF4F3

D8BDF4

F4BDBE

Contrast Matrix WCAG 2.1 Contrast

D8F4BB	969EB4	DCBDD3	F4D1FA	B8ACC7
—	2.2 Fail	1.4 Fail	1.1 Fail	1.8 Fail
2.2 Fail	—	1.6 Fail	2.0 Fail	1.2 Fail
1.4 Fail	1.6 Fail	—	1.3 Fail	1.3 Fail
1.1 Fail	2.0 Fail	1.3 Fail	—	1.6 Fail
1.8 Fail	1.2 Fail	1.3 Fail	1.6 Fail	—

White BG

1.2Fail

2.7Fail

1.7Fail

1.4Fail

2.2Fail

Black BG

17.6AAA

7.8AAA

12.3AAA

15.3AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E4E4C9

999AAF

CFCECE

E5E5F0

B3B3C0

Deuteranopia

E3E0CC

9998AD

D0D3CC

E7E9EE

B4B4BF

Tritanopia

D9D4D6

96AAAA

DAC9C9

F2E8E7

B7BBBA

Achromatopsia

E5E5E5

9E9E9E

C9C9C9

E0E0E0

B3B3B3

Shades & Tints Shades & Tints

#D8F4BB

Dark

Light

#969EB4

Dark

Light

#DCBDD3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8f4bb;
  --color-2: #969eb4;
  --color-3: #dcbdd3;
  --color-4: #f4d1fa;
  --color-5: #b8acc7;
}

SCSS

$color-1: #d8f4bb;
$color-2: #969eb4;
$color-3: #dcbdd3;
$color-4: #f4d1fa;
$color-5: #b8acc7;

TAILWIND

colors: {
  'brand-1': '#d8f4bb',
  'brand-2': '#969eb4',
  'brand-3': '#dcbdd3',
  'brand-4': '#f4d1fa',
  'brand-5': '#b8acc7',
}

RGB Array

[216, 244, 187], [150, 158, 180], [220, 189, 211], [244, 209, 250], [184, 172, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8F4BB, #969EB4, #DCBDD3, #F4D1FA, #B8ACC7 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: #d8f4bb; --color-2: #969eb4; --color-3: #dcbdd3; --color-4: #f4d1fa; --color-5: #b8acc7. 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