#9B91B4 + #BBB5D0 + #F4D2D3 + #F28A95 + #F0BFCD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#9B91B4

Wisteria · DarkGray · Cobalt Blue

HEX

#9B91B4

RGB

rgb(155, 145, 180)

HSL

hsl(257, 19%, 64%)

HSB

hsb(257, 19%, 71%)

CMYK

cmyk(14%, 19%, 0%, 29%)

Oklch

oklch(67.7% 0.052 298.1)

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

#BBB5D0

Wisteria · Silver · Cobalt Blue

HEX

#BBB5D0

RGB

rgb(187, 181, 208)

HSL

hsl(253, 22%, 76%)

HSB

hsb(253, 13%, 82%)

CMYK

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

Oklch

oklch(78.7% 0.038 295.7)

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

#F4D2D3

Peach Pink · Pink · Cherry Blossom

HEX

#F4D2D3

RGB

rgb(244, 210, 211)

HSL

hsl(358, 61%, 89%)

HSB

hsb(358, 14%, 96%)

CMYK

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

Oklch

oklch(89.3% 0.038 15.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#F28A95

Peach Pink · LightCoral · Coral Red

HEX

#F28A95

RGB

rgb(242, 138, 149)

HSL

hsl(354, 80%, 75%)

HSB

hsb(354, 43%, 95%)

CMYK

cmyk(0%, 43%, 38%, 5%)

Oklch

oklch(74.8% 0.127 13.8)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#F0BFCD

Rouge · Pink · Cherry Blossom

HEX

#F0BFCD

RGB

rgb(240, 191, 205)

HSL

hsl(343, 62%, 85%)

HSB

hsb(343, 20%, 94%)

CMYK

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

Oklch

oklch(85.2% 0.059 359.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

9B91B4

ABB592

Analogous

9299B5

9B91B4

AD92B5

Triadic

9B91B4

B59C92

92B59C

Split-Comp.

9B91B4

B5AD92

99B592

Tetradic

9B91B4

B59299

ABB592

92B5AD

Contrast Matrix WCAG 2.1 Contrast

9B91B4	BBB5D0	F4D2D3	F28A95	F0BFCD
—	1.5 Fail	2.1 Fail	1.2 Fail	1.8 Fail
1.5 Fail	—	1.4 Fail	1.2 Fail	1.2 Fail
2.1 Fail	1.4 Fail	—	1.7 Fail	1.2 Fail
1.2 Fail	1.2 Fail	1.7 Fail	—	1.5 Fail
1.8 Fail	1.2 Fail	1.2 Fail	1.5 Fail	—

White BG

3.0Fail

2.0Fail

1.4Fail

2.4Fail

1.6Fail

Black BG

7.1AAA

10.6AAA

15.0AAA

8.8AAA

13.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9797AC

B8B8C9

E5E5D3

C5C492

DBDACA

Deuteranopia

9798AA

B9B9C8

E7EAD3

CBD392

DEE1C9

Tritanopia

9BA5A3

BBC4C3

F2D3D3

ED9090

EEC7C6

Achromatopsia

989898

BABABA

DCDCDC

AAAAAA

CFCFCF

Shades & Tints Shades & Tints

#9B91B4

Dark

Light

#BBB5D0

Dark

Light

#F4D2D3

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #9b91b4;
  --color-2: #bbb5d0;
  --color-3: #f4d2d3;
  --color-4: #f28a95;
  --color-5: #f0bfcd;
}

SCSS

$color-1: #9b91b4;
$color-2: #bbb5d0;
$color-3: #f4d2d3;
$color-4: #f28a95;
$color-5: #f0bfcd;

TAILWIND

colors: {
  'brand-1': '#9b91b4',
  'brand-2': '#bbb5d0',
  'brand-3': '#f4d2d3',
  'brand-4': '#f28a95',
  'brand-5': '#f0bfcd',
}

RGB Array

[155, 145, 180], [187, 181, 208], [244, 210, 211], [242, 138, 149], [240, 191, 205]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #9B91B4, #BBB5D0, #F4D2D3, #F28A95, #F0BFCD 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: #9b91b4; --color-2: #bbb5d0; --color-3: #f4d2d3; --color-4: #f28a95; --color-5: #f0bfcd. 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