#E2EFE2 + #C4F8DB + #A7E4D9 + #59B9FF + #7387C0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E2EFE2

Celadon · Beige · Mint Green

HEX

#E2EFE2

RGB

rgb(226, 239, 226)

HSL

hsl(120, 29%, 91%)

HSB

hsb(120, 5%, 94%)

CMYK

cmyk(5%, 0%, 5%, 6%)

Oklch

oklch(93.9% 0.022 145.4)

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

#C4F8DB

Emerald · LightGray · Mint Green

HEX

#C4F8DB

RGB

rgb(196, 248, 219)

HSL

hsl(147, 79%, 87%)

HSB

hsb(147, 21%, 97%)

CMYK

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

Oklch

oklch(93.5% 0.066 160.4)

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

#A7E4D9

Jade · LightBlue · Glacier Blue

HEX

#A7E4D9

RGB

rgb(167, 228, 217)

HSL

hsl(169, 53%, 77%)

HSB

hsb(169, 27%, 89%)

CMYK

cmyk(27%, 0%, 5%, 11%)

Oklch

oklch(87.4% 0.064 182.4)

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

#59B9FF

Sky Blue · CornflowerBlue · Cobalt Blue

HEX

#59B9FF

RGB

rgb(89, 185, 255)

HSL

hsl(205, 100%, 67%)

HSB

hsb(205, 65%, 100%)

CMYK

cmyk(65%, 27%, 0%, 0%)

Oklch

oklch(75.7% 0.136 243.1)

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

#7387C0

Azure · LightSlateGray · Navy Blue

HEX

#7387C0

RGB

rgb(115, 135, 192)

HSL

hsl(224, 38%, 60%)

HSB

hsb(224, 40%, 75%)

CMYK

cmyk(40%, 30%, 0%, 25%)

Oklch

oklch(63.1% 0.089 268.9)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E2EFE2

EFE1EF

Analogous

E8EFE1

E2EFE2

E1EFE8

Triadic

E2EFE2

E1E1EF

EFE1E1

Split-Comp.

E2EFE2

E8E1EF

EFE1E8

Tetradic

E2EFE2

E1E8EF

EFE1EF

EFE8E1

Contrast Matrix WCAG 2.1 Contrast

E2EFE2	C4F8DB	A7E4D9	59B9FF	7387C0
—	1.0 Fail	1.2 Fail	1.8 Fail	3.0 Fail
1.0 Fail	—	1.2 Fail	1.8 Fail	3.0 Fail
1.2 Fail	1.2 Fail	—	1.5 Fail	2.5 Fail
1.8 Fail	1.8 Fail	1.5 Fail	—	1.6 Fail
3.0 Fail	3.0 Fail	2.5 Fail	1.6 Fail	—

White BG

1.2Fail

1.4Fail

2.1Fail

3.5AA Large

Black BG

17.7AAA

17.8AAA

14.7AAA

9.8AAA

6.0AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E8E8E5

DBDBE2

C1C2DC

8383EE

7C7CB2

Deuteranopia

E7E6E6

D8D4E4

BEB9DC

7D76EA

7B79AF

Tritanopia

E3E8E8

C7E8E9

AADEDE

5EE1DE

74A7A5

Achromatopsia

EAEAEA

E5E5E5

D1D1D1

A4A4A4

888888

Shades & Tints Shades & Tints

#E2EFE2

Dark

Light

#C4F8DB

Dark

Light

#A7E4D9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e2efe2;
  --color-2: #c4f8db;
  --color-3: #a7e4d9;
  --color-4: #59b9ff;
  --color-5: #7387c0;
}

SCSS

$color-1: #e2efe2;
$color-2: #c4f8db;
$color-3: #a7e4d9;
$color-4: #59b9ff;
$color-5: #7387c0;

TAILWIND

colors: {
  'brand-1': '#e2efe2',
  'brand-2': '#c4f8db',
  'brand-3': '#a7e4d9',
  'brand-4': '#59b9ff',
  'brand-5': '#7387c0',
}

RGB Array

[226, 239, 226], [196, 248, 219], [167, 228, 217], [89, 185, 255], [115, 135, 192]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E2EFE2, #C4F8DB, #A7E4D9, #59B9FF, #7387C0 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: #e2efe2; --color-2: #c4f8db; --color-3: #a7e4d9; --color-4: #59b9ff; --color-5: #7387c0. 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