#B4E8E8 + #ADD1D8 + #C6BCCE + #E1C2CF + #EAD1C2 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B4E8E8

Sky Blue · LightBlue · Glacier Blue

HEX

#B4E8E8

RGB

rgb(180, 232, 232)

HSL

hsl(180, 53%, 81%)

HSB

hsb(180, 22%, 91%)

CMYK

cmyk(22%, 0%, 0%, 9%)

Oklch

oklch(89.5% 0.053 196.2)

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

#ADD1D8

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#ADD1D8

RGB

rgb(173, 209, 216)

HSL

hsl(190, 36%, 76%)

HSB

hsb(190, 20%, 85%)

CMYK

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

Oklch

oklch(83.7% 0.039 210.7)

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

#C6BCCE

Lilac · Silver · Lilac Purple

HEX

#C6BCCE

RGB

rgb(198, 188, 206)

HSL

hsl(273, 16%, 77%)

HSB

hsb(273, 9%, 81%)

CMYK

cmyk(4%, 9%, 0%, 19%)

Oklch

oklch(80.9% 0.027 310.3)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#E1C2CF

Rouge · LightGray · Cherry Blossom

HEX

#E1C2CF

RGB

rgb(225, 194, 207)

HSL

hsl(335, 34%, 82%)

HSB

hsb(335, 14%, 88%)

CMYK

cmyk(0%, 14%, 8%, 12%)

Oklch

oklch(84.4% 0.039 350.8)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#EAD1C2

Apricot · Wheat · Peach Orange

HEX

#EAD1C2

RGB

rgb(234, 209, 194)

HSL

hsl(23, 49%, 84%)

HSB

hsb(23, 17%, 92%)

CMYK

cmyk(0%, 11%, 17%, 8%)

Oklch

oklch(87.7% 0.035 53.0)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B4E8E8

E8B5B5

Analogous

B5E8CF

B4E8E8

B5CFE8

Triadic

B4E8E8

E8B5E8

E8E8B5

Split-Comp.

B4E8E8

E8B5CF

E8CFB5

Tetradic

B4E8E8

CFB5E8

E8B5B5

CFE8B5

Contrast Matrix WCAG 2.1 Contrast

B4E8E8	ADD1D8	C6BCCE	E1C2CF	EAD1C2
—	1.2 Fail	1.4 Fail	1.2 Fail	1.1 Fail
1.2 Fail	—	1.1 Fail	1.0 Fail	1.1 Fail
1.4 Fail	1.1 Fail	—	1.1 Fail	1.3 Fail
1.2 Fail	1.0 Fail	1.1 Fail	—	1.1 Fail
1.1 Fail	1.1 Fail	1.3 Fail	1.1 Fail	—

White BG

1.3Fail

1.6Fail

1.8Fail

1.6Fail

1.5Fail

Black BG

15.6AAA

12.9AAA

11.5AAA

12.8AAA

14.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBE8

BDBDD6

C2C2CA

D4D3CC

DFDFC6

Deuteranopia

C8C4E8

BBB8D6

C2C3C9

D5D8CB

E1E2C6

Tritanopia

B7E8E8

AFD5D5

C6C6C5

DFC9C9

E9C8C9

Achromatopsia

D8D8D8

C7C7C7

C1C1C1

CDCDCD

D7D7D7

Shades & Tints Shades & Tints

#B4E8E8

Dark

Light

#ADD1D8

Dark

Light

#C6BCCE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b4e8e8;
  --color-2: #add1d8;
  --color-3: #c6bcce;
  --color-4: #e1c2cf;
  --color-5: #ead1c2;
}

SCSS

$color-1: #b4e8e8;
$color-2: #add1d8;
$color-3: #c6bcce;
$color-4: #e1c2cf;
$color-5: #ead1c2;

TAILWIND

colors: {
  'brand-1': '#b4e8e8',
  'brand-2': '#add1d8',
  'brand-3': '#c6bcce',
  'brand-4': '#e1c2cf',
  'brand-5': '#ead1c2',
}

RGB Array

[180, 232, 232], [173, 209, 216], [198, 188, 206], [225, 194, 207], [234, 209, 194]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B4E8E8, #ADD1D8, #C6BCCE, #E1C2CF, #EAD1C2 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: #b4e8e8; --color-2: #add1d8; --color-3: #c6bcce; --color-4: #e1c2cf; --color-5: #ead1c2. 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