#B3D8E6 + #BACAE3 + #D2D3D4 + #FCE7C5 + #7C8187 · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#B3D8E6

Sky Blue · LightBlue · Glacier Blue

HEX

#B3D8E6

RGB

rgb(179, 216, 230)

HSL

hsl(196, 50%, 80%)

HSB

hsb(196, 22%, 90%)

CMYK

cmyk(22%, 6%, 0%, 10%)

Oklch

oklch(86.0% 0.044 222.8)

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

#BACAE3

Azure · LightSteelBlue · Sky Blue

HEX

#BACAE3

RGB

rgb(186, 202, 227)

HSL

hsl(217, 42%, 81%)

HSB

hsb(217, 18%, 89%)

CMYK

cmyk(18%, 11%, 0%, 11%)

Oklch

oklch(83.5% 0.039 259.3)

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

#D2D3D4

Silver Gray · LightGray · Pearl Gray

HEX

#D2D3D4

RGB

rgb(210, 211, 212)

HSL

hsl(210, 2%, 83%)

HSB

hsb(210, 1%, 83%)

CMYK

cmyk(1%, 0%, 0%, 17%)

Oklch

oklch(86.6% 0.002 247.8)

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

#FCE7C5

Goose Yellow · Bisque · Peach Orange

HEX

#FCE7C5

RGB

rgb(252, 231, 197)

HSL

hsl(37, 90%, 88%)

HSB

hsb(37, 22%, 99%)

CMYK

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

Oklch

oklch(93.6% 0.050 79.9)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#7C8187

Ash · Gray · Warm Gray

HEX

#7C8187

RGB

rgb(124, 129, 135)

HSL

hsl(213, 4%, 51%)

HSB

hsb(213, 8%, 53%)

CMYK

cmyk(8%, 4%, 0%, 47%)

Oklch

oklch(60.1% 0.011 252.9)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3D8E6

E6C0B3

Analogous

B3E6DA

B3D8E6

B3BEE6

Triadic

B3D8E6

E6B3D8

D8E6B3

Split-Comp.

B3D8E6

E6B3BE

E6DAB3

Tetradic

B3D8E6

DAB3E6

E6C0B3

BEE6B3

Contrast Matrix WCAG 2.1 Contrast

B3D8E6	BACAE3	D2D3D4	FCE7C5	7C8187
—	1.1 Fail	1.0 Fail	1.3 Fail	2.6 Fail
1.1 Fail	—	1.1 Fail	1.4 Fail	2.4 Fail
1.0 Fail	1.1 Fail	—	1.2 Fail	2.6 Fail
1.3 Fail	1.4 Fail	1.2 Fail	—	3.2 AA Large
2.6 Fail	2.4 Fail	2.6 Fail	3.2 AA Large	—

White BG

1.5Fail

1.7Fail

1.5Fail

1.2Fail

3.9AA Large

Black BG

13.9AAA

12.6AAA

14.0AAA

17.4AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C3C3E3

C1C1DD

D2D2D4

F3F3CD

7E7E86

Deuteranopia

C1BEE2

C0BFDB

D2D2D4

F4F6CF

7E7E85

Tritanopia

B5E0DF

BBD8D7

D2D4D4

FBD4D5

7C8484

Achromatopsia

CFCFCF

C8C8C8

D3D3D3

E9E9E9

808080

Shades & Tints Shades & Tints

#B3D8E6

Dark

Light

#BACAE3

Dark

Light

#D2D3D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3d8e6;
  --color-2: #bacae3;
  --color-3: #d2d3d4;
  --color-4: #fce7c5;
  --color-5: #7c8187;
}

SCSS

$color-1: #b3d8e6;
$color-2: #bacae3;
$color-3: #d2d3d4;
$color-4: #fce7c5;
$color-5: #7c8187;

TAILWIND

colors: {
  'brand-1': '#b3d8e6',
  'brand-2': '#bacae3',
  'brand-3': '#d2d3d4',
  'brand-4': '#fce7c5',
  'brand-5': '#7c8187',
}

RGB Array

[179, 216, 230], [186, 202, 227], [210, 211, 212], [252, 231, 197], [124, 129, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #B3D8E6, #BACAE3, #D2D3D4, #FCE7C5, #7C8187 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: #b3d8e6; --color-2: #bacae3; --color-3: #d2d3d4; --color-4: #fce7c5; --color-5: #7c8187. 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 pastel-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