#9B9DB1 + #BBB5D6 + #DFCBEF + #EDD3F5 + #F4E2DB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9B9DB1

Azure · DarkGray · Cobalt Blue

HEX

#9B9DB1

RGB

rgb(155, 157, 177)

HSL

hsl(235, 12%, 65%)

HSB

hsb(235, 12%, 69%)

CMYK

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

Oklch

oklch(70.1% 0.029 281.1)

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

#BBB5D6

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#BBB5D6

RGB

rgb(187, 181, 214)

HSL

hsl(251, 29%, 77%)

HSB

hsb(251, 15%, 84%)

CMYK

cmyk(13%, 15%, 0%, 16%)

Oklch

oklch(78.9% 0.047 293.6)

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

#DFCBEF

Lilac · Lavender · Lavender

HEX

#DFCBEF

RGB

rgb(223, 203, 239)

HSL

hsl(273, 53%, 87%)

HSB

hsb(273, 15%, 94%)

CMYK

cmyk(7%, 15%, 0%, 6%)

Oklch

oklch(87.0% 0.053 310.1)

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

#EDD3F5

Lilac · Lavender · Lavender

HEX

#EDD3F5

RGB

rgb(237, 211, 245)

HSL

hsl(286, 63%, 89%)

HSB

hsb(286, 14%, 96%)

CMYK

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

Oklch

oklch(89.9% 0.054 318.2)

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

#F4E2DB

Apricot · Linen · Peach Orange

HEX

#F4E2DB

RGB

rgb(244, 226, 219)

HSL

hsl(17, 53%, 91%)

HSB

hsb(17, 10%, 96%)

CMYK

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

Oklch

oklch(92.5% 0.022 42.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B9DB1

B0AF9B

Analogous

9BA8B0

9B9DB1

A49BB0

Triadic

9B9DB1

B09B9D

9DB09B

Split-Comp.

9B9DB1

B0A49B

A8B09B

Tetradic

9B9DB1

B09BA8

B0AF9B

9BB0A4

Contrast Matrix WCAG 2.1 Contrast

9B9DB1	BBB5D6	DFCBEF	EDD3F5	F4E2DB
—	1.4 Fail	1.8 Fail	1.9 Fail	2.1 Fail
1.4 Fail	—	1.3 Fail	1.4 Fail	1.6 Fail
1.8 Fail	1.3 Fail	—	1.1 Fail	1.2 Fail
1.9 Fail	1.4 Fail	1.1 Fail	—	1.1 Fail
2.1 Fail	1.6 Fail	1.2 Fail	1.1 Fail	—

White BG

2.7Fail

2.0Fail

1.5Fail

1.4Fail

1.3Fail

Black BG

7.9AAA

10.7AAA

13.9AAA

15.2AAA

16.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9C9CAC

B8B8CE

D6D6E6

E2E2ED

ECECDD

Deuteranopia

9C9CAB

B9B9CC

D8D9E4

E3E5EB

EDEFDD

Tritanopia

9BA8A8

BBC8C6

DEDFDE

ECE6E5

F3DEDE

Achromatopsia

9F9F9F

BBBBBB

D5D5D5

DFDFDF

E7E7E7

Shades & Tints Shades & Tints

#9B9DB1

Dark

Light

#BBB5D6

Dark

Light

#DFCBEF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b9db1;
  --color-2: #bbb5d6;
  --color-3: #dfcbef;
  --color-4: #edd3f5;
  --color-5: #f4e2db;
}

SCSS

$color-1: #9b9db1;
$color-2: #bbb5d6;
$color-3: #dfcbef;
$color-4: #edd3f5;
$color-5: #f4e2db;

TAILWIND

colors: {
  'brand-1': '#9b9db1',
  'brand-2': '#bbb5d6',
  'brand-3': '#dfcbef',
  'brand-4': '#edd3f5',
  'brand-5': '#f4e2db',
}

RGB Array

[155, 157, 177], [187, 181, 214], [223, 203, 239], [237, 211, 245], [244, 226, 219]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B9DB1, #BBB5D6, #DFCBEF, #EDD3F5, #F4E2DB 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: #9b9db1; --color-2: #bbb5d6; --color-3: #dfcbef; --color-4: #edd3f5; --color-5: #f4e2db. 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