← Back to Editor

#EBF3F6 · #E4EEED · #D7E2E6 · #ECF8F6 · #DED6E3

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#EBF3F6

Sky Blue · Lavender · Glacier Blue

HEX
#EBF3F6
RGB
rgb(235, 243, 246)
HSL
hsl(196, 38%, 94%)
HSB
hsb(196, 4%, 96%)
CMYK
cmyk(4%, 1%, 0%, 4%)
Oklch
oklch(95.9% 0.009 222.1)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#E4EEED

Jade · Lavender · Glacier Blue

HEX
#E4EEED
RGB
rgb(228, 238, 237)
HSL
hsl(174, 23%, 91%)
HSB
hsb(174, 4%, 93%)
CMYK
cmyk(4%, 0%, 0%, 7%)
Oklch
oklch(94.1% 0.011 189.8)

TraditionalJade」· PaintGlacier Blue」· Creative Arctic Pool

#D7E2E6

Sky Blue · LightGray · Glacier Blue

HEX
#D7E2E6
RGB
rgb(215, 226, 230)
HSL
hsl(196, 23%, 87%)
HSB
hsb(196, 7%, 90%)
CMYK
cmyk(7%, 2%, 0%, 10%)
Oklch
oklch(90.6% 0.013 221.4)

TraditionalSky Blue」· PaintGlacier Blue」· Creative Arctic Pool

#ECF8F6

Jade · Lavender · Glacier Blue

HEX
#ECF8F6
RGB
rgb(236, 248, 246)
HSL
hsl(170, 46%, 95%)
HSB
hsb(170, 5%, 97%)
CMYK
cmyk(5%, 0%, 1%, 3%)
Oklch
oklch(97.0% 0.013 185.1)

TraditionalJade」· PaintGlacier Blue」· Creative Arctic Pool

#DED6E3

Lilac · LightGray · Lavender

HEX
#DED6E3
RGB
rgb(222, 214, 227)
HSL
hsl(277, 19%, 86%)
HSB
hsb(277, 6%, 89%)
CMYK
cmyk(2%, 6%, 0%, 11%)
Oklch
oklch(88.6% 0.020 312.8)

TraditionalLilac」· PaintLavender」· Creative Lavender Dream

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

EBF3F6
F6EDEA

Analogous

EAF6F3
EBF3F6
EAEDF6

Triadic

EBF3F6
F6EAF2
F2F6EA

Split-Comp.

EBF3F6
F6EAED
F6F3EA

Tetradic

EBF3F6
F3EAF6
F6EDEA
EDF6EA

Contrast Matrix WCAG 2.1 Contrast

EBF3F6
E4EEED
D7E2E6
ECF8F6
DED6E3
1.1
Fail
1.2
Fail
1.0
Fail
1.3
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.2
Fail
1.2
Fail
1.1
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.3
Fail
White BG
1.1Fail
1.2Fail
1.3Fail
1.1Fail
1.4Fail
Black BG
18.7AAA
17.8AAA
15.9AAA
19.3AAA
14.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EEEFF5
E8E8ED
DCDCE5
F1F1F6
DBDAE0

Deuteranopia

EEEDF5
E8E7ED
DBDAE5
F1F0F7
DBDCDF

Tritanopia

EBF5F5
E5EDED
D8E4E4
EDF7F7
DEDDDD

Achromatopsia

F1F1F1
EBEBEB
DFDFDF
F4F4F4
DADADA

Shades & Tints Shades & Tints

#EBF3F6

Dark
Light

#E4EEED

Dark
Light

#D7E2E6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ebf3f6;
  --color-2: #e4eeed;
  --color-3: #d7e2e6;
  --color-4: #ecf8f6;
  --color-5: #ded6e3;
}

SCSS

$color-1: #ebf3f6;
$color-2: #e4eeed;
$color-3: #d7e2e6;
$color-4: #ecf8f6;
$color-5: #ded6e3;

TAILWIND

colors: {
  'brand-1': '#ebf3f6',
  'brand-2': '#e4eeed',
  'brand-3': '#d7e2e6',
  'brand-4': '#ecf8f6',
  'brand-5': '#ded6e3',
}

RGB Array

[235, 243, 246], [228, 238, 237], [215, 226, 230], [236, 248, 246], [222, 214, 227]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #EBF3F6, #E4EEED, #D7E2E6, #ECF8F6, #DED6E3 is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #ebf3f6; --color-2: #e4eeed; --color-3: #d7e2e6; --color-4: #ecf8f6; --color-5: #ded6e3. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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