#E4A2BD + #E8B1C8 + #FFFFFF + #F3E7F1 + #E2F3FA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E4A2BD

Rouge · LightPink · Cherry Blossom

HEX

#E4A2BD

RGB

rgb(228, 162, 189)

HSL

hsl(335, 55%, 76%)

HSB

hsb(335, 29%, 89%)

CMYK

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

Oklch

oklch(78.3% 0.085 353.0)

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

#E8B1C8

Rouge · LightPink · Cherry Blossom

HEX

#E8B1C8

RGB

rgb(232, 177, 200)

HSL

hsl(335, 54%, 80%)

HSB

hsb(335, 24%, 91%)

CMYK

cmyk(0%, 24%, 14%, 9%)

Oklch

oklch(81.7% 0.070 351.9)

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

#FFFFFF

Moonlight White · White · Cloud White

HEX

#FFFFFF

RGB

rgb(255, 255, 255)

HSL

hsl(0, 0%, 100%)

HSB

hsb(0, 0%, 100%)

CMYK

cmyk(0%, 0%, 0%, 0%)

Oklch

oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

#F3E7F1

Mauve · Lavender · Lavender

HEX

#F3E7F1

RGB

rgb(243, 231, 241)

HSL

hsl(310, 33%, 93%)

HSB

hsb(310, 5%, 95%)

CMYK

cmyk(0%, 5%, 1%, 5%)

Oklch

oklch(94.0% 0.018 331.1)

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

#E2F3FA

Sky Blue · Lavender · Glacier Blue

HEX

#E2F3FA

RGB

rgb(226, 243, 250)

HSL

hsl(198, 71%, 93%)

HSB

hsb(198, 10%, 98%)

CMYK

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

Oklch

oklch(95.4% 0.020 224.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4A2BD

A0E3C7

Analogous

E3A0DE

E4A2BD

E3A6A0

Triadic

E4A2BD

BCE3A0

A0BCE3

Split-Comp.

E4A2BD

A0E3A6

A0DEE3

Tetradic

E4A2BD

DEE3A0

A0E3C7

A6A0E3

Contrast Matrix WCAG 2.1 Contrast

E4A2BD	E8B1C8	FFFFFF	F3E7F1	E2F3FA
—	1.1 Fail	2.1 Fail	1.7 Fail	1.8 Fail
1.1 Fail	—	1.8 Fail	1.5 Fail	1.6 Fail
2.1 Fail	1.8 Fail	—	1.2 Fail	1.1 Fail
1.7 Fail	1.5 Fail	1.2 Fail	—	1.1 Fail
1.8 Fail	1.6 Fail	1.1 Fail	1.1 Fail	—

White BG

2.1Fail

1.8Fail

1.0Fail

1.2Fail

1.1Fail

Black BG

10.2AAA

11.6AAA

21.0AAA

17.5AAA

18.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C7B6

D0D0C2

FFFFFF

EEEEEF

E9EAF8

Deuteranopia

CBD0B5

D3D7C1

FFFFFF

EFEFEE

E8E7F8

Tritanopia

E1B1B0

E5BEBD

FFFFFF

F2EDEC

E3F7F7

Achromatopsia

B9B9B9

C4C4C4

FFFFFF

ECECEC

EFEFEF

Shades & Tints Shades & Tints

#E4A2BD

Dark

Light

#E8B1C8

Dark

Light

#FFFFFF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4a2bd;
  --color-2: #e8b1c8;
  --color-3: #ffffff;
  --color-4: #f3e7f1;
  --color-5: #e2f3fa;
}

SCSS

$color-1: #e4a2bd;
$color-2: #e8b1c8;
$color-3: #ffffff;
$color-4: #f3e7f1;
$color-5: #e2f3fa;

TAILWIND

colors: {
  'brand-1': '#e4a2bd',
  'brand-2': '#e8b1c8',
  'brand-3': '#ffffff',
  'brand-4': '#f3e7f1',
  'brand-5': '#e2f3fa',
}

RGB Array

[228, 162, 189], [232, 177, 200], [255, 255, 255], [243, 231, 241], [226, 243, 250]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4A2BD, #E8B1C8, #FFFFFF, #F3E7F1, #E2F3FA 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: #e4a2bd; --color-2: #e8b1c8; --color-3: #ffffff; --color-4: #f3e7f1; --color-5: #e2f3fa. 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