#E9FBE9 + #D2EFE3 + #BAD3D4 + #BCACBE + #CC74A1 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E9FBE9

Emerald · Beige · Mint Green

HEX

#E9FBE9

RGB

rgb(233, 251, 233)

HSL

hsl(120, 69%, 95%)

HSB

hsb(120, 7%, 98%)

CMYK

cmyk(7%, 0%, 7%, 2%)

Oklch

oklch(97.0% 0.030 145.3)

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

#D2EFE3

Jade · Lavender · Mint Green

HEX

#D2EFE3

RGB

rgb(210, 239, 227)

HSL

hsl(155, 48%, 88%)

HSB

hsb(155, 12%, 94%)

CMYK

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

Oklch

oklch(92.8% 0.034 168.7)

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

#BAD3D4

Sky Blue · LightSteelBlue · Glacier Blue

HEX

#BAD3D4

RGB

rgb(186, 211, 212)

HSL

hsl(182, 23%, 78%)

HSB

hsb(182, 12%, 83%)

CMYK

cmyk(12%, 0%, 0%, 17%)

Oklch

oklch(84.9% 0.027 199.6)

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

#BCACBE

Lilac · Silver · Lilac Purple

HEX

#BCACBE

RGB

rgb(188, 172, 190)

HSL

hsl(293, 12%, 71%)

HSB

hsb(293, 9%, 75%)

CMYK

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

Oklch

oklch(76.4% 0.031 322.4)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#CC74A1

Mauve · LightCoral · Rose Pink

HEX

#CC74A1

RGB

rgb(204, 116, 161)

HSL

hsl(329, 46%, 63%)

HSB

hsb(329, 43%, 80%)

CMYK

cmyk(0%, 43%, 21%, 20%)

Oklch

oklch(66.9% 0.123 348.9)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E9FBE9

FBE9FB

Analogous

F2FBE9

E9FBE9

E9FBF2

Triadic

E9FBE9

E9E9FB

FBE9E9

Split-Comp.

E9FBE9

F2E9FB

FBE9F2

Tetradic

E9FBE9

E9F2FB

FBE9FB

FBF2E9

Contrast Matrix WCAG 2.1 Contrast

E9FBE9	D2EFE3	BAD3D4	BCACBE	CC74A1
—	1.1 Fail	1.5 Fail	2.0 Fail	3.0 Fail
1.1 Fail	—	1.3 Fail	1.8 Fail	2.6 Fail
1.5 Fail	1.3 Fail	—	1.4 Fail	2.0 Fail
2.0 Fail	1.8 Fail	1.4 Fail	—	1.5 Fail
3.0 Fail	2.6 Fail	2.0 Fail	1.5 Fail	—

White BG

1.1Fail

1.2Fail

1.6Fail

2.1Fail

3.2AA Large

Black BG

19.4AAA

17.2AAA

13.4AAA

9.8AAA

6.6AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1ED

DFDFE6

C5C5D4

B5B5BA

A6A596

Deuteranopia

F0EEEE

DDDBE7

C3C2D4

B6B7B9

ABB294

Tritanopia

EAF1F2

D3E8E9

BBD4D4

BBB6B5

C88E8C

Achromatopsia

F4F4F4

E5E5E5

CCCCCC

B3B3B3

939393

Shades & Tints Shades & Tints

#E9FBE9

Dark

Light

#D2EFE3

Dark

Light

#BAD3D4

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e9fbe9;
  --color-2: #d2efe3;
  --color-3: #bad3d4;
  --color-4: #bcacbe;
  --color-5: #cc74a1;
}

SCSS

$color-1: #e9fbe9;
$color-2: #d2efe3;
$color-3: #bad3d4;
$color-4: #bcacbe;
$color-5: #cc74a1;

TAILWIND

colors: {
  'brand-1': '#e9fbe9',
  'brand-2': '#d2efe3',
  'brand-3': '#bad3d4',
  'brand-4': '#bcacbe',
  'brand-5': '#cc74a1',
}

RGB Array

[233, 251, 233], [210, 239, 227], [186, 211, 212], [188, 172, 190], [204, 116, 161]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E9FBE9, #D2EFE3, #BAD3D4, #BCACBE, #CC74A1 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: #e9fbe9; --color-2: #d2efe3; --color-3: #bad3d4; --color-4: #bcacbe; --color-5: #cc74a1. 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