#E9EEB6 + #AFE4B8 + #77DBBF + #55C8C1 + #37B6C7 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E9EEB6

Fresh Green · Wheat · Lemon Cream

HEX

#E9EEB6

RGB

rgb(233, 238, 182)

HSL

hsl(65, 62%, 82%)

HSB

hsb(65, 24%, 93%)

CMYK

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

Oklch

oklch(93.2% 0.073 112.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#AFE4B8

Celadon · Silver · Apple Green

HEX

#AFE4B8

RGB

rgb(175, 228, 184)

HSL

hsl(130, 50%, 79%)

HSB

hsb(130, 23%, 89%)

CMYK

cmyk(23%, 0%, 19%, 11%)

Oklch

oklch(87.0% 0.081 149.5)

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

#77DBBF

Jade · MediumAquaMarine · Lake Green

HEX

#77DBBF

RGB

rgb(119, 219, 191)

HSL

hsl(163, 58%, 66%)

HSB

hsb(163, 46%, 86%)

CMYK

cmyk(46%, 0%, 13%, 14%)

Oklch

oklch(82.3% 0.103 173.4)

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

#55C8C1

Mineral Blue · MediumTurquoise · Lake Green

HEX

#55C8C1

RGB

rgb(85, 200, 193)

HSL

hsl(176, 51%, 56%)

HSB

hsb(176, 58%, 78%)

CMYK

cmyk(58%, 0%, 4%, 22%)

Oklch

oklch(76.5% 0.104 189.7)

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

#37B6C7

Lake Blue · MediumTurquoise · Mint Ice

HEX

#37B6C7

RGB

rgb(55, 182, 199)

HSL

hsl(187, 57%, 50%)

HSB

hsb(187, 72%, 78%)

CMYK

cmyk(72%, 9%, 0%, 22%)

Oklch

oklch(71.6% 0.109 208.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9EEB6

B9B5EE

Analogous

EED6B5

E9EEB6

CCEEB5

Triadic

E9EEB6

B5E9EE

EEB5E9

Split-Comp.

E9EEB6

B5CCEE

D6B5EE

Tetradic

E9EEB6

B5EED6

B9B5EE

EEB5CC

Contrast Matrix WCAG 2.1 Contrast

E9EEB6	AFE4B8	77DBBF	55C8C1	37B6C7
—	1.2 Fail	1.4 Fail	1.7 Fail	2.0 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	1.7 Fail
1.4 Fail	1.2 Fail	—	1.2 Fail	1.5 Fail
1.7 Fail	1.4 Fail	1.2 Fail	—	1.2 Fail
2.0 Fail	1.7 Fail	1.5 Fail	1.2 Fail	—

White BG

1.2Fail

1.4Fail

1.7Fail

2.0Fail

2.4Fail

Black BG

17.4AAA

14.6AAA

12.7AAA

10.4AAA

8.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEBC4

C6C6C3

A2A3C6

8788C3

6E6FC3

Deuteranopia

EBEBC7

C3BFC5

9D95C7

8078C3

675DC2

Tritanopia

E9CED1

B2CBCD

7CCBCC

5BC4C4

3DC0BF

Achromatopsia

E6E6E6

CFCFCF

BABABA

A5A5A5

929292

Shades & Tints Shades & Tints

#E9EEB6

Dark

Light

#AFE4B8

Dark

Light

#77DBBF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9eeb6;
  --color-2: #afe4b8;
  --color-3: #77dbbf;
  --color-4: #55c8c1;
  --color-5: #37b6c7;
}

SCSS

$color-1: #e9eeb6;
$color-2: #afe4b8;
$color-3: #77dbbf;
$color-4: #55c8c1;
$color-5: #37b6c7;

TAILWIND

colors: {
  'brand-1': '#e9eeb6',
  'brand-2': '#afe4b8',
  'brand-3': '#77dbbf',
  'brand-4': '#55c8c1',
  'brand-5': '#37b6c7',
}

RGB Array

[233, 238, 182], [175, 228, 184], [119, 219, 191], [85, 200, 193], [55, 182, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E9EEB6, #AFE4B8, #77DBBF, #55C8C1, #37B6C7 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: #e9eeb6; --color-2: #afe4b8; --color-3: #77dbbf; --color-4: #55c8c1; --color-5: #37b6c7. 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