#D2F6AE + #BFEABB + #ADDFC8 + #82C0B9 + #58A2A9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D2F6AE

Emerald · Wheat · Mint Green

HEX

#D2F6AE

RGB

rgb(210, 246, 174)

HSL

hsl(90, 80%, 82%)

HSB

hsb(90, 29%, 96%)

CMYK

cmyk(15%, 0%, 29%, 4%)

Oklch

oklch(93.0% 0.101 129.8)

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

#BFEABB

Emerald · LightGray · Mint Green

HEX

#BFEABB

RGB

rgb(191, 234, 187)

HSL

hsl(115, 53%, 83%)

HSB

hsb(115, 20%, 92%)

CMYK

cmyk(18%, 0%, 20%, 8%)

Oklch

oklch(89.4% 0.078 142.7)

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

#ADDFC8

Jade · LightBlue · Apple Green

HEX

#ADDFC8

RGB

rgb(173, 223, 200)

HSL

hsl(152, 44%, 78%)

HSB

hsb(152, 22%, 87%)

CMYK

cmyk(22%, 0%, 10%, 13%)

Oklch

oklch(86.2% 0.061 165.2)

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

#82C0B9

Jade · MediumAquaMarine · Lake Green

HEX

#82C0B9

RGB

rgb(130, 192, 185)

HSL

hsl(173, 33%, 63%)

HSB

hsb(173, 32%, 75%)

CMYK

cmyk(32%, 0%, 4%, 25%)

Oklch

oklch(76.4% 0.064 187.0)

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

#58A2A9

Slate Blue · CadetBlue · Mint Ice

HEX

#58A2A9

RGB

rgb(88, 162, 169)

HSL

hsl(185, 32%, 50%)

HSB

hsb(185, 48%, 66%)

CMYK

cmyk(48%, 4%, 0%, 34%)

Oklch

oklch(66.7% 0.074 203.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D2F6AE

D1ACF6

Analogous

F6F6AC

D2F6AE

ACF6AC

Triadic

D2F6AE

ACD1F6

F6ACD1

Split-Comp.

D2F6AE

ACACF6

F6ACF6

Tetradic

D2F6AE

ACF6F6

D1ACF6

F6ACAC

Contrast Matrix WCAG 2.1 Contrast

D2F6AE	BFEABB	ADDFC8	82C0B9	58A2A9
—	1.1 Fail	1.2 Fail	1.7 Fail	2.5 Fail
1.1 Fail	—	1.1 Fail	1.5 Fail	2.2 Fail
1.2 Fail	1.1 Fail	—	1.4 Fail	2.0 Fail
1.7 Fail	1.5 Fail	1.4 Fail	—	1.4 Fail
2.5 Fail	2.2 Fail	2.0 Fail	1.4 Fail	—

White BG

1.2Fail

1.3Fail

1.5Fail

2.1Fail

2.9Fail

Black BG

17.5AAA

15.7AAA

14.2AAA

10.2AAA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E2BF

D2D2C6

C3C3CE

9D9DBB

7879A7

Deuteranopia

E0DDC4

CFCCC9

C0BCCF

9995BB

746EA7

Tritanopia

D4CDD0

C1CFD1

B0D2D3

85BCBC

5CA6A6

Achromatopsia

E3E3E3

D8D8D8

CDCDCD

ADADAD

8D8D8D

Shades & Tints Shades & Tints

#D2F6AE

Dark

Light

#BFEABB

Dark

Light

#ADDFC8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d2f6ae;
  --color-2: #bfeabb;
  --color-3: #addfc8;
  --color-4: #82c0b9;
  --color-5: #58a2a9;
}

SCSS

$color-1: #d2f6ae;
$color-2: #bfeabb;
$color-3: #addfc8;
$color-4: #82c0b9;
$color-5: #58a2a9;

TAILWIND

colors: {
  'brand-1': '#d2f6ae',
  'brand-2': '#bfeabb',
  'brand-3': '#addfc8',
  'brand-4': '#82c0b9',
  'brand-5': '#58a2a9',
}

RGB Array

[210, 246, 174], [191, 234, 187], [173, 223, 200], [130, 192, 185], [88, 162, 169]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D2F6AE, #BFEABB, #ADDFC8, #82C0B9, #58A2A9 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: #d2f6ae; --color-2: #bfeabb; --color-3: #addfc8; --color-4: #82c0b9; --color-5: #58a2a9. 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