#B3A4A3 + #B8B0B1 + #C9C9C7 + #D8EDF1 + #CFFCFB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3A4A3

Peach Pink · DarkGray · Coral Red

HEX

#B3A4A3

RGB

rgb(179, 164, 163)

HSL

hsl(4, 10%, 67%)

HSB

hsb(4, 9%, 70%)

CMYK

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

Oklch

oklch(73.1% 0.018 22.2)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#B8B0B1

Silver Gray · DarkGray · Pearl Gray

HEX

#B8B0B1

RGB

rgb(184, 176, 177)

HSL

hsl(353, 5%, 71%)

HSB

hsb(353, 4%, 72%)

CMYK

cmyk(0%, 4%, 4%, 28%)

Oklch

oklch(76.4% 0.009 8.6)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#C9C9C7

Silver Gray · Silver · Pearl Gray

HEX

#C9C9C7

RGB

rgb(201, 201, 199)

HSL

hsl(60, 2%, 78%)

HSB

hsb(60, 1%, 79%)

CMYK

cmyk(0%, 0%, 1%, 21%)

Oklch

oklch(83.5% 0.003 106.5)

Traditional「Silver Gray」· Paint「Pearl Gray」· Creative Silver Lining

#D8EDF1

Sky Blue · Lavender · Glacier Blue

HEX

#D8EDF1

RGB

rgb(216, 237, 241)

HSL

hsl(190, 47%, 90%)

HSB

hsb(190, 10%, 95%)

CMYK

cmyk(10%, 2%, 0%, 5%)

Oklch

oklch(93.2% 0.023 210.4)

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

#CFFCFB

Jade · Lavender · Glacier Blue

HEX

#CFFCFB

RGB

rgb(207, 252, 251)

HSL

hsl(179, 88%, 90%)

HSB

hsb(179, 18%, 99%)

CMYK

cmyk(18%, 0%, 0%, 1%)

Oklch

oklch(95.9% 0.046 194.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3A4A3

A2B2B3

Analogous

B3A2AA

B3A4A3

B3ACA2

Triadic

B3A4A3

A2B3A4

A4A2B3

Split-Comp.

B3A4A3

A2B3AC

A2AAB3

Tetradic

B3A4A3

AAB3A2

A2B2B3

ACA2B3

Contrast Matrix WCAG 2.1 Contrast

B3A4A3	B8B0B1	C9C9C7	D8EDF1	CFFCFB
—	1.1 Fail	1.4 Fail	2.0 Fail	2.2 Fail
1.1 Fail	—	1.3 Fail	1.8 Fail	1.9 Fail
1.4 Fail	1.3 Fail	—	1.4 Fail	1.5 Fail
2.0 Fail	1.8 Fail	1.4 Fail	—	1.1 Fail
2.2 Fail	1.9 Fail	1.5 Fail	1.1 Fail	—

White BG

2.4Fail

2.1Fail

1.7Fail

1.2Fail

1.1Fail

Black BG

8.8AAA

9.9AAA

12.7AAA

17.3AAA

19.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ADACA3

B5B4B1

C9C9C7

E1E1F0

E2E3FB

Deuteranopia

ADAFA3

B5B6B1

C9C9C8

E0DEF0

E0DCFB

Tritanopia

B2A3A3

B8B1B1

C9C8C8

D9EFEF

D1FBFB

Achromatopsia

A8A8A8

B3B3B3

C9C9C9

E7E7E7

EEEEEE

Shades & Tints Shades & Tints

#B3A4A3

Dark

Light

#B8B0B1

Dark

Light

#C9C9C7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3a4a3;
  --color-2: #b8b0b1;
  --color-3: #c9c9c7;
  --color-4: #d8edf1;
  --color-5: #cffcfb;
}

SCSS

$color-1: #b3a4a3;
$color-2: #b8b0b1;
$color-3: #c9c9c7;
$color-4: #d8edf1;
$color-5: #cffcfb;

TAILWIND

colors: {
  'brand-1': '#b3a4a3',
  'brand-2': '#b8b0b1',
  'brand-3': '#c9c9c7',
  'brand-4': '#d8edf1',
  'brand-5': '#cffcfb',
}

RGB Array

[179, 164, 163], [184, 176, 177], [201, 201, 199], [216, 237, 241], [207, 252, 251]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3A4A3, #B8B0B1, #C9C9C7, #D8EDF1, #CFFCFB 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: #b3a4a3; --color-2: #b8b0b1; --color-3: #c9c9c7; --color-4: #d8edf1; --color-5: #cffcfb. 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