#E9F0D3 + #91FFD5 + #98D4BD + #8F9FCC + #997688 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E9F0D3

Willow Green · Beige · Mint Green

HEX

#E9F0D3

RGB

rgb(233, 240, 211)

HSL

hsl(74, 49%, 88%)

HSB

hsb(74, 12%, 94%)

CMYK

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

Oklch

oklch(94.2% 0.039 118.2)

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

#91FFD5

Jade · LightBlue · Apple Green

HEX

#91FFD5

RGB

rgb(145, 255, 213)

HSL

hsl(157, 100%, 78%)

HSB

hsb(157, 43%, 100%)

CMYK

cmyk(43%, 0%, 16%, 0%)

Oklch

oklch(92.3% 0.118 167.1)

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

#98D4BD

Jade · LightSteelBlue · Apple Green

HEX

#98D4BD

RGB

rgb(152, 212, 189)

HSL

hsl(157, 41%, 71%)

HSB

hsb(157, 28%, 83%)

CMYK

cmyk(28%, 0%, 11%, 17%)

Oklch

oklch(82.2% 0.070 168.9)

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

#8F9FCC

Azure · DarkGray · Cobalt Blue

HEX

#8F9FCC

RGB

rgb(143, 159, 204)

HSL

hsl(224, 37%, 68%)

HSB

hsb(224, 30%, 80%)

CMYK

cmyk(30%, 22%, 0%, 20%)

Oklch

oklch(70.6% 0.069 269.4)

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

#997688

Rose Purple · Gray · Rose Pink

HEX

#997688

RGB

rgb(153, 118, 136)

HSL

hsl(329, 15%, 53%)

HSB

hsb(329, 23%, 60%)

CMYK

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

Oklch

oklch(60.6% 0.050 346.4)

Traditional「Rose Purple」· Paint「Rose Pink」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9F0D3

D8D1EF

Analogous

EFE7D1

E9F0D3

D9EFD1

Triadic

E9F0D3

D1E8EF

EFD1E8

Split-Comp.

E9F0D3

D1D9EF

E7D1EF

Tetradic

E9F0D3

D1EFE7

D8D1EF

EFD1D9

Contrast Matrix WCAG 2.1 Contrast

E9F0D3	91FFD5	98D4BD	8F9FCC	997688
—	1.0 Fail	1.4 Fail	2.2 Fail	3.4 AA Large
1.0 Fail	—	1.4 Fail	2.2 Fail	3.3 AA Large
1.4 Fail	1.4 Fail	—	1.6 Fail	2.4 Fail
2.2 Fail	2.2 Fail	1.6 Fail	—	1.5 Fail
3.4 AA Large	3.3 AA Large	2.4 Fail	1.5 Fail	—

White BG

1.2Fail

1.7Fail

2.6Fail

4.0AA Large

Black BG

17.9AAA

17.5AAA

12.5AAA

8.0AAA

5.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECDA

C1C2DF

B2B3C3

9696C1

8A8A84

Deuteranopia

ECEBDC

BAB2E2

AFAAC4

9594BE

8C8F83

Tritanopia

E9E0E1

97E7E9

9BC7C8

90B9B7

97807F

Achromatopsia

EBEBEB

D9D9D9

BFBFBF

9F9F9F

838383

Shades & Tints Shades & Tints

#E9F0D3

Dark

Light

#91FFD5

Dark

Light

#98D4BD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9f0d3;
  --color-2: #91ffd5;
  --color-3: #98d4bd;
  --color-4: #8f9fcc;
  --color-5: #997688;
}

SCSS

$color-1: #e9f0d3;
$color-2: #91ffd5;
$color-3: #98d4bd;
$color-4: #8f9fcc;
$color-5: #997688;

TAILWIND

colors: {
  'brand-1': '#e9f0d3',
  'brand-2': '#91ffd5',
  'brand-3': '#98d4bd',
  'brand-4': '#8f9fcc',
  'brand-5': '#997688',
}

RGB Array

[233, 240, 211], [145, 255, 213], [152, 212, 189], [143, 159, 204], [153, 118, 136]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E9F0D3, #91FFD5, #98D4BD, #8F9FCC, #997688 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: #e9f0d3; --color-2: #91ffd5; --color-3: #98d4bd; --color-4: #8f9fcc; --color-5: #997688. 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