#D8F8EC + #CBD7B8 + #F1A6A2 + #F76EDC + #8BC8C4 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8F8EC

Jade · Lavender · Mint Green

HEX

#D8F8EC

RGB

rgb(216, 248, 236)

HSL

hsl(158, 70%, 91%)

HSB

hsb(158, 13%, 97%)

CMYK

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

Oklch

oklch(95.3% 0.037 170.9)

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

#CBD7B8

Willow Green · Silver · Apple Green

HEX

#CBD7B8

RGB

rgb(203, 215, 184)

HSL

hsl(83, 28%, 78%)

HSB

hsb(83, 14%, 84%)

CMYK

cmyk(6%, 0%, 14%, 16%)

Oklch

oklch(86.2% 0.044 124.6)

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

#F1A6A2

Peach Pink · LightPink · Coral Red

HEX

#F1A6A2

RGB

rgb(241, 166, 162)

HSL

hsl(3, 74%, 79%)

HSB

hsb(3, 33%, 95%)

CMYK

cmyk(0%, 31%, 33%, 5%)

Oklch

oklch(79.6% 0.090 22.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F76EDC

Mauve · Violet · Lilac Purple

HEX

#F76EDC

RGB

rgb(247, 110, 220)

HSL

hsl(312, 90%, 70%)

HSB

hsb(312, 55%, 97%)

CMYK

cmyk(0%, 55%, 11%, 3%)

Oklch

oklch(73.9% 0.208 335.7)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#8BC8C4

Jade · SkyBlue · Lake Green

HEX

#8BC8C4

RGB

rgb(139, 200, 196)

HSL

hsl(176, 36%, 66%)

HSB

hsb(176, 31%, 78%)

CMYK

cmyk(31%, 0%, 2%, 22%)

Oklch

oklch(79.0% 0.063 190.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8F8EC

F8D8E4

Analogous

D8F8DC

D8F8EC

D8F4F8

Triadic

D8F8EC

ECD8F8

F8ECD8

Split-Comp.

D8F8EC

F8D8F4

F8DCD8

Tetradic

D8F8EC

DCD8F8

F8D8E4

F4F8D8

Contrast Matrix WCAG 2.1 Contrast

D8F8EC	CBD7B8	F1A6A2	F76EDC	8BC8C4
—	1.3 Fail	1.7 Fail	2.3 Fail	1.7 Fail
1.3 Fail	—	1.3 Fail	1.7 Fail	1.3 Fail
1.7 Fail	1.3 Fail	—	1.3 Fail	1.0 Fail
2.3 Fail	1.7 Fail	1.3 Fail	—	1.4 Fail
1.7 Fail	1.3 Fail	1.0 Fail	1.4 Fail	—

White BG

1.1Fail

1.5Fail

2.0Fail

2.6Fail

1.9Fail

Black BG

18.6AAA

14.0AAA

10.7AAA

8.2AAA

11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E6E6EF

D0D0C0

D1D0A3

BCBAC1

A5A6C5

Deuteranopia

E4E2F0

D0CFC1

D5DBA3

C4CEBB

A29DC5

Tritanopia

DAF1F2

CCC5C7

EDA4A4

F0ACA8

8EC6C6

Achromatopsia

EDEDED

D0D0D0

BCBCBC

A4A4A4

B5B5B5

Shades & Tints Shades & Tints

#D8F8EC

Dark

Light

#CBD7B8

Dark

Light

#F1A6A2

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8f8ec;
  --color-2: #cbd7b8;
  --color-3: #f1a6a2;
  --color-4: #f76edc;
  --color-5: #8bc8c4;
}

SCSS

$color-1: #d8f8ec;
$color-2: #cbd7b8;
$color-3: #f1a6a2;
$color-4: #f76edc;
$color-5: #8bc8c4;

TAILWIND

colors: {
  'brand-1': '#d8f8ec',
  'brand-2': '#cbd7b8',
  'brand-3': '#f1a6a2',
  'brand-4': '#f76edc',
  'brand-5': '#8bc8c4',
}

RGB Array

[216, 248, 236], [203, 215, 184], [241, 166, 162], [247, 110, 220], [139, 200, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8F8EC, #CBD7B8, #F1A6A2, #F76EDC, #8BC8C4 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: #d8f8ec; --color-2: #cbd7b8; --color-3: #f1a6a2; --color-4: #f76edc; --color-5: #8bc8c4. 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