#D4CEE3 + #D3DED0 + #D1EDBD + #87E1CD + #3DD5DD - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D4CEE3

Wisteria · LightGray · Sky Blue

HEX

#D4CEE3

RGB

rgb(212, 206, 227)

HSL

hsl(257, 27%, 85%)

HSB

hsb(257, 9%, 89%)

CMYK

cmyk(7%, 9%, 0%, 11%)

Oklch

oklch(86.3% 0.029 298.8)

Traditional「Wisteria」· Paint「Sky Blue」· Creative Lavender Dream

#D3DED0

Celadon · LightGray · Mint Green

HEX

#D3DED0

RGB

rgb(211, 222, 208)

HSL

hsl(107, 18%, 84%)

HSB

hsb(107, 6%, 87%)

CMYK

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

Oklch

oklch(88.8% 0.022 139.0)

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

#D1EDBD

Emerald · LightGray · Mint Green

HEX

#D1EDBD

RGB

rgb(209, 237, 189)

HSL

hsl(95, 57%, 84%)

HSB

hsb(95, 20%, 93%)

CMYK

cmyk(12%, 0%, 20%, 7%)

Oklch

oklch(91.3% 0.070 132.4)

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

#87E1CD

Jade · SkyBlue · Lake Green

HEX

#87E1CD

RGB

rgb(135, 225, 205)

HSL

hsl(167, 60%, 71%)

HSB

hsb(167, 40%, 88%)

CMYK

cmyk(40%, 0%, 9%, 12%)

Oklch

oklch(84.8% 0.092 178.1)

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

#3DD5DD

Lake Blue · Turquoise · Lake Green

HEX

#3DD5DD

RGB

rgb(61, 213, 221)

HSL

hsl(183, 70%, 55%)

HSB

hsb(183, 72%, 87%)

CMYK

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

Oklch

oklch(80.0% 0.123 200.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D4CEE3

DDE3CE

Analogous

CED3E3

D4CEE3

DFCEE3

Triadic

D4CEE3

E3D4CE

CEE3D4

Split-Comp.

D4CEE3

E3DFCE

D3E3CE

Tetradic

D4CEE3

E3CED3

DDE3CE

CEE3DF

Contrast Matrix WCAG 2.1 Contrast

D4CEE3	D3DED0	D1EDBD	87E1CD	3DD5DD
—	1.1 Fail	1.2 Fail	1.0 Fail	1.2 Fail
1.1 Fail	—	1.1 Fail	1.1 Fail	1.3 Fail
1.2 Fail	1.1 Fail	—	1.2 Fail	1.4 Fail
1.0 Fail	1.1 Fail	1.2 Fail	—	1.2 Fail
1.2 Fail	1.3 Fail	1.4 Fail	1.2 Fail	—

White BG

1.5Fail

1.4Fail

1.3Fail

1.5Fail

1.8Fail

Black BG

13.7AAA

15.1AAA

16.6AAA

13.7AAA

11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D1DE

D8D8D3

DDDDC9

AEAFD2

7F80DB

Deuteranopia

D2D2DD

D7D6D4

DCD9CB

A9A2D3

766BDB

Tritanopia

D4DAD9

D4D6D7

D2D2D4

8CD6D7

45DAD9

Achromatopsia

D2D2D2

D9D9D9

DFDFDF

C4C4C4

A8A8A8

Shades & Tints Shades & Tints

#D4CEE3

Dark

Light

#D3DED0

Dark

Light

#D1EDBD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d4cee3;
  --color-2: #d3ded0;
  --color-3: #d1edbd;
  --color-4: #87e1cd;
  --color-5: #3dd5dd;
}

SCSS

$color-1: #d4cee3;
$color-2: #d3ded0;
$color-3: #d1edbd;
$color-4: #87e1cd;
$color-5: #3dd5dd;

TAILWIND

colors: {
  'brand-1': '#d4cee3',
  'brand-2': '#d3ded0',
  'brand-3': '#d1edbd',
  'brand-4': '#87e1cd',
  'brand-5': '#3dd5dd',
}

RGB Array

[212, 206, 227], [211, 222, 208], [209, 237, 189], [135, 225, 205], [61, 213, 221]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D4CEE3, #D3DED0, #D1EDBD, #87E1CD, #3DD5DD 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: #d4cee3; --color-2: #d3ded0; --color-3: #d1edbd; --color-4: #87e1cd; --color-5: #3dd5dd. 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