#E3E7E7 + #CAD5E7 + #C7C1E7 + #E8BFD4 + #E2B3C6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3E7E7

Sky Blue · Lavender · Cloud White

HEX

#E3E7E7

RGB

rgb(227, 231, 231)

HSL

hsl(180, 8%, 90%)

HSB

hsb(180, 2%, 91%)

CMYK

cmyk(2%, 0%, 0%, 9%)

Oklch

oklch(92.5% 0.004 197.1)

Traditional「Sky Blue」· Paint「Cloud White」· Creative Silver Lining

#CAD5E7

Azure · LightGray · Sky Blue

HEX

#CAD5E7

RGB

rgb(202, 213, 231)

HSL

hsl(217, 38%, 85%)

HSB

hsb(217, 13%, 91%)

CMYK

cmyk(13%, 8%, 0%, 9%)

Oklch

oklch(87.0% 0.028 260.3)

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

#C7C1E7

Wisteria · LightSteelBlue · Sky Blue

HEX

#C7C1E7

RGB

rgb(199, 193, 231)

HSL

hsl(249, 44%, 83%)

HSB

hsb(249, 16%, 91%)

CMYK

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

Oklch

oklch(82.8% 0.053 292.4)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#E8BFD4

Mauve · Pink · Cherry Blossom

HEX

#E8BFD4

RGB

rgb(232, 191, 212)

HSL

hsl(329, 47%, 83%)

HSB

hsb(329, 18%, 91%)

CMYK

cmyk(0%, 18%, 9%, 9%)

Oklch

oklch(84.6% 0.054 346.1)

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

#E2B3C6

Rouge · LightPink · Cherry Blossom

HEX

#E2B3C6

RGB

rgb(226, 179, 198)

HSL

hsl(336, 45%, 79%)

HSB

hsb(336, 21%, 89%)

CMYK

cmyk(0%, 21%, 12%, 11%)

Oklch

oklch(81.4% 0.060 352.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3E7E7

E8E3E3

Analogous

E3E8E6

E3E7E7

E3E6E8

Triadic

E3E7E7

E8E3E8

E8E8E3

Split-Comp.

E3E7E7

E8E3E6

E8E6E3

Tetradic

E3E7E7

E6E3E8

E8E3E3

E6E8E3

Contrast Matrix WCAG 2.1 Contrast

E3E7E7	CAD5E7	C7C1E7	E8BFD4	E2B3C6
—	1.2 Fail	1.4 Fail	1.3 Fail	1.5 Fail
1.2 Fail	—	1.2 Fail	1.1 Fail	1.2 Fail
1.4 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.3 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.5 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.2Fail

1.5Fail

1.7Fail

1.6Fail

1.8Fail

Black BG

16.9AAA

14.2AAA

12.2AAA

12.8AAA

11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E5E5E7

CFCFE3

C4C4DE

D6D6CF

CECDC1

Deuteranopia

E5E4E7

CECDE2

C5C5DC

D9DCCE

D0D4C0

Tritanopia

E3E7E7

CBDFDE

C7D7D5

E6CBCA

E0BEBD

Achromatopsia

E6E6E6

D4D4D4

C7C7C7

CECECE

C3C3C3

Shades & Tints Shades & Tints

#E3E7E7

Dark

Light

#CAD5E7

Dark

Light

#C7C1E7

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3e7e7;
  --color-2: #cad5e7;
  --color-3: #c7c1e7;
  --color-4: #e8bfd4;
  --color-5: #e2b3c6;
}

SCSS

$color-1: #e3e7e7;
$color-2: #cad5e7;
$color-3: #c7c1e7;
$color-4: #e8bfd4;
$color-5: #e2b3c6;

TAILWIND

colors: {
  'brand-1': '#e3e7e7',
  'brand-2': '#cad5e7',
  'brand-3': '#c7c1e7',
  'brand-4': '#e8bfd4',
  'brand-5': '#e2b3c6',
}

RGB Array

[227, 231, 231], [202, 213, 231], [199, 193, 231], [232, 191, 212], [226, 179, 198]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3E7E7, #CAD5E7, #C7C1E7, #E8BFD4, #E2B3C6 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: #e3e7e7; --color-2: #cad5e7; --color-3: #c7c1e7; --color-4: #e8bfd4; --color-5: #e2b3c6. 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