← Back to Editor

#E4F5E9 · #A0EBCB · #78B6A4 · #408DA7 · #1C6BA0

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#E4F5E9

Celadon · Beige · Mint Green

HEX
#E4F5E9
RGB
rgb(228, 245, 233)
HSL
hsl(138, 46%, 93%)
HSB
hsb(138, 7%, 96%)
CMYK
cmyk(7%, 0%, 5%, 4%)
Oklch
oklch(95.4% 0.024 155.1)

Traditional「Celadon」· Paint「Mint Green」· Creative Mint Breeze

#A0EBCB

Jade · LightBlue · Apple Green

HEX
#A0EBCB
RGB
rgb(160, 235, 203)
HSL
hsl(154, 65%, 77%)
HSB
hsb(154, 32%, 92%)
CMYK
cmyk(32%, 0%, 14%, 8%)
Oklch
oklch(88.2% 0.087 165.9)

Traditional「Jade」· Paint「Apple Green」· Creative Arctic Pool

#78B6A4

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#78B6A4
RGB
rgb(120, 182, 164)
HSL
hsl(163, 30%, 59%)
HSB
hsb(163, 34%, 71%)
CMYK
cmyk(34%, 0%, 10%, 29%)
Oklch
oklch(72.9% 0.069 174.1)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#408DA7

Slate Blue · SteelBlue · Mint Ice

HEX
#408DA7
RGB
rgb(64, 141, 167)
HSL
hsl(195, 45%, 45%)
HSB
hsb(195, 62%, 65%)
CMYK
cmyk(62%, 16%, 0%, 35%)
Oklch
oklch(60.6% 0.085 223.1)

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

#1C6BA0

Lake Blue · Teal · Prussian Blue

HEX
#1C6BA0
RGB
rgb(28, 107, 160)
HSL
hsl(204, 70%, 37%)
HSB
hsb(204, 83%, 63%)
CMYK
cmyk(83%, 33%, 0%, 37%)
Oklch
oklch(50.8% 0.111 243.6)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E4F5E9
F5E5F0

Analogous

E8F5E5
E4F5E9
E5F5F2

Triadic

E4F5E9
EAE5F5
F5EAE5

Split-Comp.

E4F5E9
F2E5F5
F5E5E8

Tetradic

E4F5E9
E5E8F5
F5E5F0
F5F2E5

Contrast Matrix WCAG 2.1 Contrast

E4F5E9
A0EBCB
78B6A4
408DA7
1C6BA0
—
1.2
Fail
2.1
Fail
3.3
AA Large
5.1
AA
1.2
Fail
—
1.7
Fail
2.7
Fail
4.2
AA Large
2.1
Fail
1.7
Fail
—
1.6
Fail
2.5
Fail
3.3
AA Large
2.7
Fail
1.6
Fail
—
1.5
Fail
5.1
AA
4.2
AA Large
2.5
Fail
1.5
Fail
—
White BG
1.1Fail
1.4Fail
2.3Fail
3.8AA Large
5.7AA
Black BG
18.5AAA
15.2AAA
9.0AAA
5.6AA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBECEC
C0C1D3
9393A8
6162A1
3E3F93

Deuteranopia

EAE9ED
BCB7D5
8F8BA9
5D579F
3A3490

Tritanopia

E5EEEF
A4D9DA
7BACAD
449C9B
208987

Achromatopsia

EFEFEF
D1D1D1
A1A1A1
797979
595959

Shades & Tints Shades & Tints

#E4F5E9

Dark
Light

#A0EBCB

Dark
Light

#78B6A4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e4f5e9;
  --color-2: #a0ebcb;
  --color-3: #78b6a4;
  --color-4: #408da7;
  --color-5: #1c6ba0;
}

SCSS

$color-1: #e4f5e9;
$color-2: #a0ebcb;
$color-3: #78b6a4;
$color-4: #408da7;
$color-5: #1c6ba0;

TAILWIND

colors: {
  'brand-1': '#e4f5e9',
  'brand-2': '#a0ebcb',
  'brand-3': '#78b6a4',
  'brand-4': '#408da7',
  'brand-5': '#1c6ba0',
}

RGB Array

[228, 245, 233], [160, 235, 203], [120, 182, 164], [64, 141, 167], [28, 107, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E4F5E9, #A0EBCB, #78B6A4, #408DA7, #1C6BA0 is ideal for: 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: #e4f5e9; --color-2: #a0ebcb; --color-3: #78b6a4; --color-4: #408da7; --color-5: #1c6ba0. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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