#B0A2B1 + #B5B0D9 + #C2C0E7 + #B3E9FF + #D8FFD6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B0A2B1

Lilac · DarkGray · Silver Sand

HEX

#B0A2B1

RGB

rgb(176, 162, 177)

HSL

hsl(296, 9%, 66%)

HSB

hsb(296, 8%, 69%)

CMYK

cmyk(1%, 8%, 0%, 31%)

Oklch

oklch(72.9% 0.027 323.8)

Traditional「Lilac」· Paint「Silver Sand」· Creative Urban Concrete

#B5B0D9

Wisteria · LightSteelBlue · Cobalt Blue

HEX

#B5B0D9

RGB

rgb(181, 176, 217)

HSL

hsl(247, 35%, 77%)

HSB

hsb(247, 19%, 85%)

CMYK

cmyk(17%, 19%, 0%, 15%)

Oklch

oklch(77.5% 0.058 290.6)

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

#C2C0E7

Wisteria · LightSteelBlue · Sky Blue

HEX

#C2C0E7

RGB

rgb(194, 192, 231)

HSL

hsl(243, 45%, 83%)

HSB

hsb(243, 17%, 91%)

CMYK

cmyk(16%, 17%, 0%, 9%)

Oklch

oklch(82.2% 0.054 287.5)

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

#B3E9FF

Sky Blue · LightBlue · Glacier Blue

HEX

#B3E9FF

RGB

rgb(179, 233, 255)

HSL

hsl(197, 100%, 85%)

HSB

hsb(197, 30%, 100%)

CMYK

cmyk(30%, 9%, 0%, 0%)

Oklch

oklch(90.4% 0.063 224.9)

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

#D8FFD6

Emerald · Beige · Mint Green

HEX

#D8FFD6

RGB

rgb(216, 255, 214)

HSL

hsl(117, 100%, 92%)

HSB

hsb(117, 16%, 100%)

CMYK

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

Oklch

oklch(96.2% 0.068 143.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B0A2B1

A2B0A0

Analogous

A7A0B0

B0A2B1

B0A0A9

Triadic

B0A2B1

B0AFA0

A0B0AF

Split-Comp.

B0A2B1

A9B0A0

A0B0A7

Tetradic

B0A2B1

B0A7A0

A2B0A0

A0A9B0

Contrast Matrix WCAG 2.1 Contrast

B0A2B1	B5B0D9	C2C0E7	B3E9FF	D8FFD6
—	1.2 Fail	1.4 Fail	1.9 Fail	2.2 Fail
1.2 Fail	—	1.2 Fail	1.6 Fail	1.9 Fail
1.4 Fail	1.2 Fail	—	1.3 Fail	1.6 Fail
1.9 Fail	1.6 Fail	1.3 Fail	—	1.2 Fail
2.2 Fail	1.9 Fail	1.6 Fail	1.2 Fail	—

White BG

2.4Fail

2.1Fail

1.8Fail

1.3Fail

1.1Fail

Black BG

8.6AAA

10.2AAA

12.0AAA

16.0AAA

19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAAAAD

B3B3CF

C1C1DE

CACBFA

E9E9E0

Deuteranopia

ABACAD

B3B4CD

C1C1DB

C7C3F8

E7E4E2

Tritanopia

AFABAA

B5C7C6

C2D6D4

B6F5F5

DAE8E9

Achromatopsia

A8A8A8

B6B6B6

C5C5C5

DBDBDB

EFEFEF

Shades & Tints Shades & Tints

#B0A2B1

Dark

Light

#B5B0D9

Dark

Light

#C2C0E7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b0a2b1;
  --color-2: #b5b0d9;
  --color-3: #c2c0e7;
  --color-4: #b3e9ff;
  --color-5: #d8ffd6;
}

SCSS

$color-1: #b0a2b1;
$color-2: #b5b0d9;
$color-3: #c2c0e7;
$color-4: #b3e9ff;
$color-5: #d8ffd6;

TAILWIND

colors: {
  'brand-1': '#b0a2b1',
  'brand-2': '#b5b0d9',
  'brand-3': '#c2c0e7',
  'brand-4': '#b3e9ff',
  'brand-5': '#d8ffd6',
}

RGB Array

[176, 162, 177], [181, 176, 217], [194, 192, 231], [179, 233, 255], [216, 255, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B0A2B1, #B5B0D9, #C2C0E7, #B3E9FF, #D8FFD6 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: #b0a2b1; --color-2: #b5b0d9; --color-3: #c2c0e7; --color-4: #b3e9ff; --color-5: #d8ffd6. 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