#A7DEC9 + #E9F2BB + #96B8A0 + #988F80 + #E9F2BB - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#A7DEC9

Jade · LightBlue · Apple Green

HEX

#A7DEC9

RGB

rgb(167, 222, 201)

HSL

hsl(157, 45%, 76%)

HSB

hsb(157, 25%, 87%)

CMYK

cmyk(25%, 0%, 9%, 13%)

Oklch

oklch(85.7% 0.064 169.3)

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

#E9F2BB

Willow Green · Wheat · Mint Green

HEX

#E9F2BB

RGB

rgb(233, 242, 187)

HSL

hsl(70, 68%, 84%)

HSB

hsb(70, 23%, 95%)

CMYK

cmyk(4%, 0%, 23%, 5%)

Oklch

oklch(94.1% 0.072 115.4)

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

#96B8A0

Celadon · DarkSeaGreen · Apple Green

HEX

#96B8A0

RGB

rgb(150, 184, 160)

HSL

hsl(138, 19%, 65%)

HSB

hsb(138, 18%, 72%)

CMYK

cmyk(18%, 0%, 13%, 28%)

Oklch

oklch(75.1% 0.050 154.3)

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

#988F80

Ginger · Gray · Warm Sun

HEX

#988F80

RGB

rgb(152, 143, 128)

HSL

hsl(38, 10%, 55%)

HSB

hsb(38, 16%, 60%)

CMYK

cmyk(0%, 6%, 16%, 40%)

Oklch

oklch(65.4% 0.024 80.6)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#E9F2BB

Willow Green · Wheat · Mint Green

HEX

#E9F2BB

RGB

rgb(233, 242, 187)

HSL

hsl(70, 68%, 84%)

HSB

hsb(70, 23%, 95%)

CMYK

cmyk(4%, 0%, 23%, 5%)

Oklch

oklch(94.1% 0.072 115.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7DEC9

DDA6BB

Analogous

A6DDAD

A7DEC9

A6D7DD

Triadic

A7DEC9

C8A6DD

DDC8A6

Split-Comp.

A7DEC9

DDA6D7

DDADA6

Tetradic

A7DEC9

ADA6DD

DDA6BB

D7DDA6

Contrast Matrix WCAG 2.1 Contrast

A7DEC9	E9F2BB	96B8A0	988F80	E9F2BB
—	1.3 Fail	1.4 Fail	2.1 Fail	1.3 Fail
1.3 Fail	—	1.9 Fail	2.7 Fail	—
1.4 Fail	1.9 Fail	—	1.5 Fail	1.9 Fail
2.1 Fail	2.7 Fail	1.5 Fail	—	2.7 Fail
1.3 Fail	—	1.9 Fail	2.7 Fail	—

White BG

1.5Fail

1.2Fail

2.2Fail

3.2AA Large

1.2Fail

Black BG

13.9AAA

17.9AAA

9.7AAA

6.6AA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BFBFCE

EDEDC8

A5A5A6

949484

EDEDC8

Deuteranopia

BCB8CF

ECECCC

A3A0A7

959585

ECECCC

Tritanopia

AAD2D3

E9D3D5

98AAAB

988687

E9D3D5

Achromatopsia

CBCBCB

E9E9E9

ABABAB

909090

E9E9E9

Shades & Tints Shades & Tints

#A7DEC9

Dark

Light

#E9F2BB

Dark

Light

#96B8A0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7dec9;
  --color-2: #e9f2bb;
  --color-3: #96b8a0;
  --color-4: #988f80;
  --color-5: #e9f2bb;
}

SCSS

$color-1: #a7dec9;
$color-2: #e9f2bb;
$color-3: #96b8a0;
$color-4: #988f80;
$color-5: #e9f2bb;

TAILWIND

colors: {
  'brand-1': '#a7dec9',
  'brand-2': '#e9f2bb',
  'brand-3': '#96b8a0',
  'brand-4': '#988f80',
  'brand-5': '#e9f2bb',
}

RGB Array

[167, 222, 201], [233, 242, 187], [150, 184, 160], [152, 143, 128], [233, 242, 187]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7DEC9, #E9F2BB, #96B8A0, #988F80, #E9F2BB 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: #a7dec9; --color-2: #e9f2bb; --color-3: #96b8a0; --color-4: #988f80; --color-5: #e9f2bb. 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