#D9FFE1 + #BCF5D6 + #CAD9D2 + #D6CBCB + #F5BCBC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D9FFE1

Emerald · Beige · Mint Green

HEX

#D9FFE1

RGB

rgb(217, 255, 225)

HSL

hsl(133, 100%, 93%)

HSB

hsb(133, 15%, 100%)

CMYK

cmyk(15%, 0%, 12%, 0%)

Oklch

oklch(96.5% 0.056 151.5)

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

#BCF5D6

Emerald · LightBlue · Mint Green

HEX

#BCF5D6

RGB

rgb(188, 245, 214)

HSL

hsl(147, 74%, 85%)

HSB

hsb(147, 23%, 96%)

CMYK

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

Oklch

oklch(92.3% 0.072 160.8)

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

#CAD9D2

Jade · LightGray · Mint Green

HEX

#CAD9D2

RGB

rgb(202, 217, 210)

HSL

hsl(152, 16%, 82%)

HSB

hsb(152, 7%, 85%)

CMYK

cmyk(7%, 0%, 3%, 15%)

Oklch

oklch(87.2% 0.019 166.3)

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

#D6CBCB

Peach Pink · LightGray · Cherry Blossom

HEX

#D6CBCB

RGB

rgb(214, 203, 203)

HSL

hsl(0, 12%, 82%)

HSB

hsb(0, 5%, 84%)

CMYK

cmyk(0%, 5%, 5%, 16%)

Oklch

oklch(85.1% 0.012 17.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#F5BCBC

Peach Pink · LightPink · Cherry Blossom

HEX

#F5BCBC

RGB

rgb(245, 188, 188)

HSL

hsl(0, 74%, 85%)

HSB

hsb(0, 23%, 96%)

CMYK

cmyk(0%, 23%, 23%, 4%)

Oklch

oklch(84.7% 0.066 18.5)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D9FFE1

FFDBF7

Analogous

E5FFDB

D9FFE1

DBFFF5

Triadic

D9FFE1

E3DBFF

FFE3DB

Split-Comp.

D9FFE1

F5DBFF

FFDBE5

Tetradic

D9FFE1

DBE5FF

FFDBF7

FFF5DB

Contrast Matrix WCAG 2.1 Contrast

D9FFE1	BCF5D6	CAD9D2	D6CBCB	F5BCBC
—	1.1 Fail	1.3 Fail	1.5 Fail	1.5 Fail
1.1 Fail	—	1.2 Fail	1.3 Fail	1.3 Fail
1.3 Fail	1.2 Fail	—	1.1 Fail	1.1 Fail
1.5 Fail	1.3 Fail	1.1 Fail	—	1.0 Fail
1.5 Fail	1.3 Fail	1.1 Fail	1.0 Fail	—

White BG

1.1Fail

1.2Fail

1.5Fail

1.6Fail

Black BG

19.3AAA

17.2AAA

14.4AAA

13.3AAA

12.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E9EAE8

D5D5DE

D0D1D4

D1D1CB

DCDCBC

Deuteranopia

E7E4EA

D1CDDF

D0CED4

D2D3CB

E0E4BC

Tritanopia

DBEEEF

BFE3E5

CBD5D5

D5CBCB

F2BCBC

Achromatopsia

F0F0F0

E0E0E0

D4D4D4

CECECE

CDCDCD

Shades & Tints Shades & Tints

#D9FFE1

Dark

Light

#BCF5D6

Dark

Light

#CAD9D2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d9ffe1;
  --color-2: #bcf5d6;
  --color-3: #cad9d2;
  --color-4: #d6cbcb;
  --color-5: #f5bcbc;
}

SCSS

$color-1: #d9ffe1;
$color-2: #bcf5d6;
$color-3: #cad9d2;
$color-4: #d6cbcb;
$color-5: #f5bcbc;

TAILWIND

colors: {
  'brand-1': '#d9ffe1',
  'brand-2': '#bcf5d6',
  'brand-3': '#cad9d2',
  'brand-4': '#d6cbcb',
  'brand-5': '#f5bcbc',
}

RGB Array

[217, 255, 225], [188, 245, 214], [202, 217, 210], [214, 203, 203], [245, 188, 188]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D9FFE1, #BCF5D6, #CAD9D2, #D6CBCB, #F5BCBC 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: #d9ffe1; --color-2: #bcf5d6; --color-3: #cad9d2; --color-4: #d6cbcb; --color-5: #f5bcbc. 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