#B1D7DD + #4E9BB5 + #FFB4AC + #E3D7D6 + #E4E0E2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B1D7DD

Sky Blue · LightBlue · Glacier Blue

HEX

#B1D7DD

RGB

rgb(177, 215, 221)

HSL

hsl(188, 39%, 78%)

HSB

hsb(188, 20%, 87%)

CMYK

cmyk(20%, 3%, 0%, 13%)

Oklch

oklch(85.4% 0.041 208.1)

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

#4E9BB5

Slate Blue · SteelBlue · Lake Green

HEX

#4E9BB5

RGB

rgb(78, 155, 181)

HSL

hsl(195, 41%, 51%)

HSB

hsb(195, 57%, 71%)

CMYK

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

Oklch

oklch(65.1% 0.085 222.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#FFB4AC

Peach Pink · LightPink · Cherry Blossom

HEX

#FFB4AC

RGB

rgb(255, 180, 172)

HSL

hsl(6, 100%, 84%)

HSB

hsb(6, 33%, 100%)

CMYK

cmyk(0%, 29%, 33%, 0%)

Oklch

oklch(83.9% 0.089 25.9)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#E3D7D6

Peach Pink · LightGray · Cherry Blossom

HEX

#E3D7D6

RGB

rgb(227, 215, 214)

HSL

hsl(5, 19%, 86%)

HSB

hsb(5, 6%, 89%)

CMYK

cmyk(0%, 5%, 6%, 11%)

Oklch

oklch(88.8% 0.013 23.2)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#E4E0E2

Plain White · Lavender · Cloud White

HEX

#E4E0E2

RGB

rgb(228, 224, 226)

HSL

hsl(330, 7%, 89%)

HSB

hsb(330, 2%, 89%)

CMYK

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

Oklch

oklch(91.0% 0.005 345.3)

Traditional「Plain White」· Paint「Cloud White」· Creative Silver Lining

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B1D7DD

DDB7B1

Analogous

B1DDCD

B1D7DD

B1C1DD

Triadic

B1D7DD

DDB1D7

D7DDB1

Split-Comp.

B1D7DD

DDB1C1

DDCDB1

Tetradic

B1D7DD

CDB1DD

DDB7B1

C1DDB1

Contrast Matrix WCAG 2.1 Contrast

B1D7DD	4E9BB5	FFB4AC	E3D7D6	E4E0E2
—	2.0 Fail	1.1 Fail	1.1 Fail	1.2 Fail
2.0 Fail	—	1.9 Fail	2.2 Fail	2.4 Fail
1.1 Fail	1.9 Fail	—	1.2 Fail	1.3 Fail
1.1 Fail	2.2 Fail	1.2 Fail	—	1.1 Fail
1.2 Fail	2.4 Fail	1.3 Fail	1.1 Fail	—

White BG

1.5Fail

3.1AA Large

1.7Fail

1.4Fail

1.3Fail

Black BG

13.6AAA

6.7AA

12.4AAA

15.0AAA

16.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C2DC

6F70AF

DFDEAE

DEDED6

E2E2E2

Deuteranopia

BFBCDB

6B65AD

E3E9AE

DFDFD6

E3E3E1

Tritanopia

B3DADA

52AAA9

FBAFB0

E2D6D6

E4E1E1

Achromatopsia

CCCCCC

878787

CACACA

DADADA

E1E1E1

Shades & Tints Shades & Tints

#B1D7DD

Dark

Light

#4E9BB5

Dark

Light

#FFB4AC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b1d7dd;
  --color-2: #4e9bb5;
  --color-3: #ffb4ac;
  --color-4: #e3d7d6;
  --color-5: #e4e0e2;
}

SCSS

$color-1: #b1d7dd;
$color-2: #4e9bb5;
$color-3: #ffb4ac;
$color-4: #e3d7d6;
$color-5: #e4e0e2;

TAILWIND

colors: {
  'brand-1': '#b1d7dd',
  'brand-2': '#4e9bb5',
  'brand-3': '#ffb4ac',
  'brand-4': '#e3d7d6',
  'brand-5': '#e4e0e2',
}

RGB Array

[177, 215, 221], [78, 155, 181], [255, 180, 172], [227, 215, 214], [228, 224, 226]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B1D7DD, #4E9BB5, #FFB4AC, #E3D7D6, #E4E0E2 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: #b1d7dd; --color-2: #4e9bb5; --color-3: #ffb4ac; --color-4: #e3d7d6; --color-5: #e4e0e2. 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