#B3B3B7 + #C2C0C4 + #E4DDE2 + #E0E1F9 + #70C9FF - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3B3B7

Silver Gray · DarkGray · Pearl Gray

HEX

#B3B3B7

RGB

rgb(179, 179, 183)

HSL

hsl(240, 3%, 71%)

HSB

hsb(240, 2%, 72%)

CMYK

cmyk(2%, 2%, 0%, 28%)

Oklch

oklch(76.8% 0.006 286.3)

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

#C2C0C4

Silver Gray · Silver · Pearl Gray

HEX

#C2C0C4

RGB

rgb(194, 192, 196)

HSL

hsl(270, 3%, 76%)

HSB

hsb(270, 2%, 77%)

CMYK

cmyk(1%, 2%, 0%, 23%)

Oklch

oklch(81.1% 0.006 308.4)

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

#E4DDE2

Mauve · LightGray · Lavender

HEX

#E4DDE2

RGB

rgb(228, 221, 226)

HSL

hsl(317, 11%, 88%)

HSB

hsb(317, 3%, 89%)

CMYK

cmyk(0%, 3%, 1%, 11%)

Oklch

oklch(90.4% 0.010 335.5)

Traditional「Mauve」· Paint「Lavender」· Creative Rose Petal

#E0E1F9

Azure · Lavender · Sky Blue

HEX

#E0E1F9

RGB

rgb(224, 225, 249)

HSL

hsl(238, 68%, 93%)

HSB

hsb(238, 10%, 98%)

CMYK

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

Oklch

oklch(91.6% 0.033 283.8)

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

#70C9FF

Sky Blue · LightSkyBlue · Cobalt Blue

HEX

#70C9FF

RGB

rgb(112, 201, 255)

HSL

hsl(203, 100%, 72%)

HSB

hsb(203, 56%, 100%)

CMYK

cmyk(56%, 21%, 0%, 0%)

Oklch

oklch(80.1% 0.115 237.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3B3B7

B7B7B3

Analogous

B3B5B7

B3B3B7

B5B3B7

Triadic

B3B3B7

B7B3B3

B3B7B3

Split-Comp.

B3B3B7

B7B5B3

B5B7B3

Tetradic

B3B3B7

B7B3B5

B7B7B3

B3B7B5

Contrast Matrix WCAG 2.1 Contrast

B3B3B7	C2C0C4	E4DDE2	E0E1F9	70C9FF
—	1.2 Fail	1.6 Fail	1.6 Fail	1.1 Fail
1.2 Fail	—	1.4 Fail	1.4 Fail	1.0 Fail
1.6 Fail	1.4 Fail	—	1.0 Fail	1.4 Fail
1.6 Fail	1.4 Fail	1.0 Fail	—	1.4 Fail
1.1 Fail	1.0 Fail	1.4 Fail	1.4 Fail	—

White BG

2.1Fail

1.8Fail

1.3Fail

1.8Fail

Black BG

10.0AAA

11.6AAA

15.7AAA

16.3AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

B3B3B6

C1C1C3

E1E1E1

E0E0F3

9797F2

Deuteranopia

B3B3B6

C1C1C3

E1E2E1

E0E0F2

918BEF

Tritanopia

B3B5B5

C2C2C2

E4E0E0

E0EFEE

74E8E5

Achromatopsia

B3B3B3

C1C1C1

E0E0E0

E3E3E3

B5B5B5

Shades & Tints Shades & Tints

#B3B3B7

Dark

Light

#C2C0C4

Dark

Light

#E4DDE2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3b3b7;
  --color-2: #c2c0c4;
  --color-3: #e4dde2;
  --color-4: #e0e1f9;
  --color-5: #70c9ff;
}

SCSS

$color-1: #b3b3b7;
$color-2: #c2c0c4;
$color-3: #e4dde2;
$color-4: #e0e1f9;
$color-5: #70c9ff;

TAILWIND

colors: {
  'brand-1': '#b3b3b7',
  'brand-2': '#c2c0c4',
  'brand-3': '#e4dde2',
  'brand-4': '#e0e1f9',
  'brand-5': '#70c9ff',
}

RGB Array

[179, 179, 183], [194, 192, 196], [228, 221, 226], [224, 225, 249], [112, 201, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3B3B7, #C2C0C4, #E4DDE2, #E0E1F9, #70C9FF 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: #b3b3b7; --color-2: #c2c0c4; --color-3: #e4dde2; --color-4: #e0e1f9; --color-5: #70c9ff. 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