#F2FCEA + #DFE5D0 + #D6F9E6 + #BEF4E7 + #AAC2C4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F2FCEA

Emerald · Linen · Mint Green

HEX

#F2FCEA

RGB

rgb(242, 252, 234)

HSL

hsl(93, 75%, 95%)

HSB

hsb(93, 7%, 99%)

CMYK

cmyk(4%, 0%, 7%, 1%)

Oklch

oklch(97.9% 0.026 130.9)

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

#DFE5D0

Willow Green · LightGray · Mint Green

HEX

#DFE5D0

RGB

rgb(223, 229, 208)

HSL

hsl(77, 29%, 86%)

HSB

hsb(77, 9%, 90%)

CMYK

cmyk(3%, 0%, 9%, 10%)

Oklch

oklch(91.2% 0.029 120.0)

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

#D6F9E6

Emerald · Lavender · Mint Green

HEX

#D6F9E6

RGB

rgb(214, 249, 230)

HSL

hsl(147, 74%, 91%)

HSB

hsb(147, 14%, 98%)

CMYK

cmyk(14%, 0%, 8%, 2%)

Oklch

oklch(95.2% 0.044 161.8)

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

#BEF4E7

Jade · LightBlue · Glacier Blue

HEX

#BEF4E7

RGB

rgb(190, 244, 231)

HSL

hsl(166, 71%, 85%)

HSB

hsb(166, 22%, 96%)

CMYK

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

Oklch

oklch(92.6% 0.058 178.6)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#AAC2C4

Sky Blue · Silver · Lake Green

HEX

#AAC2C4

RGB

rgb(170, 194, 196)

HSL

hsl(185, 18%, 72%)

HSB

hsb(185, 13%, 77%)

CMYK

cmyk(13%, 1%, 0%, 23%)

Oklch

oklch(79.7% 0.026 202.8)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F2FCEA

F3E9FC

Analogous

FBFCE9

F2FCEA

E9FCEA

Triadic

F2FCEA

E9F1FC

FCE9F1

Split-Comp.

F2FCEA

EAE9FC

FCE9FB

Tetradic

F2FCEA

E9FBFC

F3E9FC

FCEAE9

Contrast Matrix WCAG 2.1 Contrast

F2FCEA	DFE5D0	D6F9E6	BEF4E7	AAC2C4
—	1.2 Fail	1.1 Fail	1.2 Fail	1.8 Fail
1.2 Fail	—	1.1 Fail	1.1 Fail	1.4 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.7 Fail
1.2 Fail	1.1 Fail	1.1 Fail	—	1.5 Fail
1.8 Fail	1.4 Fail	1.7 Fail	1.5 Fail	—

White BG

1.1Fail

1.3Fail

1.1Fail

1.2Fail

1.9Fail

Black BG

19.9AAA

16.3AAA

18.6AAA

17.3AAA

11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F6F6EE

E2E2D5

E5E5EB

D5D6EA

B4B5C4

Deuteranopia

F6F5EF

E1E1D6

E3E1EC

D2CEEB

B3B1C3

Tritanopia

F2F2F3

DFD9DA

D8EEEF

C1EDED

ABC3C3

Achromatopsia

F7F7F7

E1E1E1

ECECEC

E2E2E2

BBBBBB

Shades & Tints Shades & Tints

#F2FCEA

Dark

Light

#DFE5D0

Dark

Light

#D6F9E6

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f2fcea;
  --color-2: #dfe5d0;
  --color-3: #d6f9e6;
  --color-4: #bef4e7;
  --color-5: #aac2c4;
}

SCSS

$color-1: #f2fcea;
$color-2: #dfe5d0;
$color-3: #d6f9e6;
$color-4: #bef4e7;
$color-5: #aac2c4;

TAILWIND

colors: {
  'brand-1': '#f2fcea',
  'brand-2': '#dfe5d0',
  'brand-3': '#d6f9e6',
  'brand-4': '#bef4e7',
  'brand-5': '#aac2c4',
}

RGB Array

[242, 252, 234], [223, 229, 208], [214, 249, 230], [190, 244, 231], [170, 194, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F2FCEA, #DFE5D0, #D6F9E6, #BEF4E7, #AAC2C4 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: #f2fcea; --color-2: #dfe5d0; --color-3: #d6f9e6; --color-4: #bef4e7; --color-5: #aac2c4. 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