← Back to Editor

#E8F2F4 · #D1E4E7 · #B7E8F1 · #79D7E5 · #4A828A

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

WorkspaceReadingData Visualization

Color Details Color Details

#E8F2F4

Sky Blue · Lavender · Glacier Blue

HEX
#E8F2F4
RGB
rgb(232, 242, 244)
HSL
hsl(190, 35%, 93%)
HSB
hsb(190, 5%, 96%)
CMYK
cmyk(5%, 1%, 0%, 4%)
Oklch
oklch(95.4% 0.011 211.0)

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

#D1E4E7

Sky Blue · LightGray · Glacier Blue

HEX
#D1E4E7
RGB
rgb(209, 228, 231)
HSL
hsl(188, 31%, 86%)
HSB
hsb(188, 10%, 91%)
CMYK
cmyk(10%, 1%, 0%, 9%)
Oklch
oklch(90.6% 0.021 208.1)

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

#B7E8F1

Sky Blue · LightBlue · Glacier Blue

HEX
#B7E8F1
RGB
rgb(183, 232, 241)
HSL
hsl(189, 67%, 83%)
HSB
hsb(189, 24%, 95%)
CMYK
cmyk(24%, 4%, 0%, 5%)
Oklch
oklch(90.0% 0.052 210.0)

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

#79D7E5

Sky Blue · SkyBlue · Lake Green

HEX
#79D7E5
RGB
rgb(121, 215, 229)
HSL
hsl(188, 68%, 69%)
HSB
hsb(188, 47%, 90%)
CMYK
cmyk(47%, 6%, 0%, 10%)
Oklch
oklch(82.6% 0.091 208.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#4A828A

Slate Blue · SlateGray · Mint Ice

HEX
#4A828A
RGB
rgb(74, 130, 138)
HSL
hsl(188, 30%, 42%)
HSB
hsb(188, 46%, 54%)
CMYK
cmyk(46%, 6%, 0%, 46%)
Oklch
oklch(57.1% 0.060 207.4)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8F2F4
F3E9E7

Analogous

E7F3EF
E8F2F4
E7EBF3

Triadic

E8F2F4
F3E7F1
F1F3E7

Split-Comp.

E8F2F4
F3E7EB
F3EFE7

Tetradic

E8F2F4
EFE7F3
F3E9E7
EBF3E7

Contrast Matrix WCAG 2.1 Contrast

E8F2F4
D1E4E7
B7E8F1
79D7E5
4A828A
—
1.2
Fail
1.2
Fail
1.5
Fail
3.8
AA Large
1.2
Fail
—
1.0
Fail
1.3
Fail
3.3
AA Large
1.2
Fail
1.0
Fail
—
1.2
Fail
3.3
AA Large
1.5
Fail
1.3
Fail
1.2
Fail
—
2.6
Fail
3.8
AA Large
3.3
AA Large
3.3
AA Large
2.6
Fail
—
White BG
1.1Fail
1.3Fail
1.3Fail
1.7Fail
4.3AA Large
Black BG
18.4AAA
16.0AAA
15.8AAA
12.7AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECF4
D9D9E6
CCCDEF
A2A3E2
626388

Deuteranopia

ECEBF3
D8D7E6
C9C6EE
9C95E1
5F5B88

Tritanopia

E8F3F3
D2E6E6
B9EDED
7EDFDE
4D8786

Achromatopsia

EFEFEF
DFDFDF
DADADA
BCBCBC
727272

Shades & Tints Shades & Tints

#E8F2F4

Dark
Light

#D1E4E7

Dark
Light

#B7E8F1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8f2f4;
  --color-2: #d1e4e7;
  --color-3: #b7e8f1;
  --color-4: #79d7e5;
  --color-5: #4a828a;
}

SCSS

$color-1: #e8f2f4;
$color-2: #d1e4e7;
$color-3: #b7e8f1;
$color-4: #79d7e5;
$color-5: #4a828a;

TAILWIND

colors: {
  'brand-1': '#e8f2f4',
  'brand-2': '#d1e4e7',
  'brand-3': '#b7e8f1',
  'brand-4': '#79d7e5',
  'brand-5': '#4a828a',
}

RGB Array

[232, 242, 244], [209, 228, 231], [183, 232, 241], [121, 215, 229], [74, 130, 138]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8F2F4, #D1E4E7, #B7E8F1, #79D7E5, #4A828A is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #e8f2f4; --color-2: #d1e4e7; --color-3: #b7e8f1; --color-4: #79d7e5; --color-5: #4a828a. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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