#E3EDF3 + #E3F7F8 + #E7DEDC + #EEDEDD + #F7D9F4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E3EDF3

Sky Blue · Lavender · Sky Blue

HEX

#E3EDF3

RGB

rgb(227, 237, 243)

HSL

hsl(202, 40%, 92%)

HSB

hsb(202, 7%, 95%)

CMYK

cmyk(7%, 2%, 0%, 5%)

Oklch

oklch(94.0% 0.013 233.7)

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

#E3F7F8

Sky Blue · Lavender · Glacier Blue

HEX

#E3F7F8

RGB

rgb(227, 247, 248)

HSL

hsl(183, 60%, 93%)

HSB

hsb(183, 8%, 97%)

CMYK

cmyk(8%, 0%, 0%, 3%)

Oklch

oklch(96.2% 0.021 200.4)

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

#E7DEDC

Peach Pink · LightGray · Cherry Blossom

HEX

#E7DEDC

RGB

rgb(231, 222, 220)

HSL

hsl(11, 19%, 88%)

HSB

hsb(11, 5%, 91%)

CMYK

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

Oklch

oklch(90.7% 0.010 32.5)

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

#EEDEDD

Peach Pink · Linen · Cherry Blossom

HEX

#EEDEDD

RGB

rgb(238, 222, 221)

HSL

hsl(4, 33%, 90%)

HSB

hsb(4, 7%, 93%)

CMYK

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

Oklch

oklch(91.3% 0.018 21.8)

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

#F7D9F4

Mauve · Lavender · Lavender

HEX

#F7D9F4

RGB

rgb(247, 217, 244)

HSL

hsl(306, 65%, 91%)

HSB

hsb(306, 12%, 97%)

CMYK

cmyk(0%, 12%, 1%, 3%)

Oklch

oklch(91.8% 0.048 329.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E3EDF3

F3E8E2

Analogous

E2F3F1

E3EDF3

E2E5F3

Triadic

E3EDF3

F3E2ED

EDF3E2

Split-Comp.

E3EDF3

F3E2E5

F3F1E2

Tetradic

E3EDF3

F1E2F3

F3E8E2

E5F3E2

Contrast Matrix WCAG 2.1 Contrast

E3EDF3	E3F7F8	E7DEDC	EEDEDD	F7D9F4
—	1.1 Fail	1.1 Fail	1.1 Fail	1.1 Fail
1.1 Fail	—	1.2 Fail	1.2 Fail	1.2 Fail
1.1 Fail	1.2 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.2 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.2 Fail	1.0 Fail	1.0 Fail	—

White BG

1.2Fail

1.1Fail

1.3Fail

Black BG

17.7AAA

18.9AAA

15.9AAA

16.1AAA

16.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E7F2

ECECF8

E3E3DC

E7E7DD

EAEAED

Deuteranopia

E7E6F1

EBE9F8

E4E4DD

E8E9DD

ECEEEC

Tritanopia

E3F0F0

E4F8F8

E7DDDD

EDDDDD

F5E8E7

Achromatopsia

EBEBEB

F1F1F1

E0E0E0

E3E3E3

E5E5E5

Shades & Tints Shades & Tints

#E3EDF3

Dark

Light

#E3F7F8

Dark

Light

#E7DEDC

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e3edf3;
  --color-2: #e3f7f8;
  --color-3: #e7dedc;
  --color-4: #eededd;
  --color-5: #f7d9f4;
}

SCSS

$color-1: #e3edf3;
$color-2: #e3f7f8;
$color-3: #e7dedc;
$color-4: #eededd;
$color-5: #f7d9f4;

TAILWIND

colors: {
  'brand-1': '#e3edf3',
  'brand-2': '#e3f7f8',
  'brand-3': '#e7dedc',
  'brand-4': '#eededd',
  'brand-5': '#f7d9f4',
}

RGB Array

[227, 237, 243], [227, 247, 248], [231, 222, 220], [238, 222, 221], [247, 217, 244]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E3EDF3, #E3F7F8, #E7DEDC, #EEDEDD, #F7D9F4 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: #e3edf3; --color-2: #e3f7f8; --color-3: #e7dedc; --color-4: #eededd; --color-5: #f7d9f4. 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