#D8EFD2 + #C9EEC2 + #B1E1AF + #6EDEB8 + #53BCB8 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8EFD2

Celadon · LightGray · Mint Green

HEX

#D8EFD2

RGB

rgb(216, 239, 210)

HSL

hsl(108, 48%, 88%)

HSB

hsb(108, 12%, 94%)

CMYK

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

Oklch

oklch(92.7% 0.046 139.2)

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

#C9EEC2

Emerald · LightGray · Mint Green

HEX

#C9EEC2

RGB

rgb(201, 238, 194)

HSL

hsl(110, 56%, 85%)

HSB

hsb(110, 18%, 93%)

CMYK

cmyk(16%, 0%, 18%, 7%)

Oklch

oklch(91.1% 0.070 140.6)

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

#B1E1AF

Celadon · Silver · Apple Green

HEX

#B1E1AF

RGB

rgb(177, 225, 175)

HSL

hsl(118, 45%, 78%)

HSB

hsb(118, 22%, 88%)

CMYK

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

Oklch

oklch(86.3% 0.084 143.8)

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

#6EDEB8

Jade · MediumAquaMarine · Lake Green

HEX

#6EDEB8

RGB

rgb(110, 222, 184)

HSL

hsl(160, 63%, 65%)

HSB

hsb(160, 50%, 87%)

CMYK

cmyk(50%, 0%, 17%, 13%)

Oklch

oklch(82.4% 0.117 168.8)

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

#53BCB8

Mineral Blue · MediumAquaMarine · Lake Green

HEX

#53BCB8

RGB

rgb(83, 188, 184)

HSL

hsl(178, 44%, 53%)

HSB

hsb(178, 56%, 74%)

CMYK

cmyk(56%, 0%, 2%, 26%)

Oklch

oklch(73.3% 0.097 191.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8EFD2

E9D2EF

Analogous

E6EFD2

D8EFD2

D2EFDB

Triadic

D8EFD2

D2D8EF

EFD2D8

Split-Comp.

D8EFD2

DBD2EF

EFD2E6

Tetradic

D8EFD2

D2E6EF

E9D2EF

EFDBD2

Contrast Matrix WCAG 2.1 Contrast

D8EFD2	C9EEC2	B1E1AF	6EDEB8	53BCB8
—	1.0 Fail	1.2 Fail	1.3 Fail	1.9 Fail
1.0 Fail	—	1.2 Fail	1.3 Fail	1.8 Fail
1.2 Fail	1.2 Fail	—	1.1 Fail	1.5 Fail
1.3 Fail	1.3 Fail	1.1 Fail	—	1.4 Fail
1.9 Fail	1.8 Fail	1.5 Fail	1.4 Fail	—

White BG

1.2Fail

1.3Fail

1.5Fail

1.6Fail

2.3Fail

Black BG

17.2AAA

16.5AAA

14.3AAA

12.8AAA

9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2D9

D9D9CD

C6C6BB

9EA0C1

8081B9

Deuteranopia

E1DFDB

D7D4CF

C3BFBE

9890C3

7A73B9

Tritanopia

D9DFE0

CBD5D7

B3C5C7

74C8CA

58BABA

Achromatopsia

E5E5E5

DEDEDE

CDCDCD

B8B8B8

9C9C9C

Shades & Tints Shades & Tints

#D8EFD2

Dark

Light

#C9EEC2

Dark

Light

#B1E1AF

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8efd2;
  --color-2: #c9eec2;
  --color-3: #b1e1af;
  --color-4: #6edeb8;
  --color-5: #53bcb8;
}

SCSS

$color-1: #d8efd2;
$color-2: #c9eec2;
$color-3: #b1e1af;
$color-4: #6edeb8;
$color-5: #53bcb8;

TAILWIND

colors: {
  'brand-1': '#d8efd2',
  'brand-2': '#c9eec2',
  'brand-3': '#b1e1af',
  'brand-4': '#6edeb8',
  'brand-5': '#53bcb8',
}

RGB Array

[216, 239, 210], [201, 238, 194], [177, 225, 175], [110, 222, 184], [83, 188, 184]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8EFD2, #C9EEC2, #B1E1AF, #6EDEB8, #53BCB8 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: #d8efd2; --color-2: #c9eec2; --color-3: #b1e1af; --color-4: #6edeb8; --color-5: #53bcb8. 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