#16E3BF + #B28DB1 + #F9B6DE + #DFD6DA + #D8E1DE - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#16E3BF

Mineral Blue · DarkTurquoise · Mint Ice

HEX

#16E3BF

RGB

rgb(22, 227, 191)

HSL

hsl(169, 82%, 49%)

HSB

hsb(169, 90%, 89%)

CMYK

cmyk(90%, 0%, 16%, 11%)

Oklch

oklch(81.9% 0.151 175.4)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#B28DB1

Mauve · DarkGray · Lilac Purple

HEX

#B28DB1

RGB

rgb(178, 141, 177)

HSL

hsl(302, 19%, 63%)

HSB

hsb(302, 21%, 70%)

CMYK

cmyk(0%, 21%, 1%, 30%)

Oklch

oklch(69.0% 0.067 327.1)

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

#F9B6DE

Mauve · Pink · Cherry Blossom

HEX

#F9B6DE

RGB

rgb(249, 182, 222)

HSL

hsl(324, 85%, 85%)

HSB

hsb(324, 27%, 98%)

CMYK

cmyk(0%, 27%, 11%, 2%)

Oklch

oklch(85.0% 0.092 342.7)

Traditional「Mauve」· Paint「Cherry Blossom」· Creative Rose Petal

#DFD6DA

Rouge · LightGray · Cherry Blossom

HEX

#DFD6DA

RGB

rgb(223, 214, 218)

HSL

hsl(333, 12%, 86%)

HSB

hsb(333, 4%, 87%)

CMYK

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

Oklch

oklch(88.4% 0.011 348.5)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#D8E1DE

Jade · LightGray · Glacier Blue

HEX

#D8E1DE

RGB

rgb(216, 225, 222)

HSL

hsl(160, 13%, 86%)

HSB

hsb(160, 4%, 88%)

CMYK

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

Oklch

oklch(90.2% 0.010 174.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

16E3BF

E3163C

Analogous

16E357

16E3BF

16A3E3

Triadic

16E3BF

BE16E3

E3BE16

Split-Comp.

16E3BF

E316A3

E35716

Tetradic

16E3BF

5716E3

E3163C

A3E316

Contrast Matrix WCAG 2.1 Contrast

16E3BF	B28DB1	F9B6DE	DFD6DA	D8E1DE
—	1.7 Fail	1.0 Fail	1.2 Fail	1.2 Fail
1.7 Fail	—	1.7 Fail	2.0 Fail	2.1 Fail
1.0 Fail	1.7 Fail	—	1.2 Fail	1.2 Fail
1.2 Fail	2.0 Fail	1.2 Fail	—	1.1 Fail
1.2 Fail	2.1 Fail	1.2 Fail	1.1 Fail	—

White BG

1.6Fail

2.9Fail

1.6Fail

1.4Fail

1.3Fail

Black BG

12.8AAA

7.3AAA

12.8AAA

14.8AAA

15.7AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

6F71C8

A2A2A8

DCDBD4

DBDBD9

DCDCDF

Deuteranopia

6354CA

A4A7A6

E0E5D2

DCDCD9

DBDBDF

Tritanopia

20CFD0

B0A1A0

F6CDCB

DFD8D8

D8DFDF

Achromatopsia

A2A2A2

9C9C9C

CFCFCF

D9D9D9

DEDEDE

Shades & Tints Shades & Tints

#16E3BF

Dark

Light

#B28DB1

Dark

Light

#F9B6DE

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #16e3bf;
  --color-2: #b28db1;
  --color-3: #f9b6de;
  --color-4: #dfd6da;
  --color-5: #d8e1de;
}

SCSS

$color-1: #16e3bf;
$color-2: #b28db1;
$color-3: #f9b6de;
$color-4: #dfd6da;
$color-5: #d8e1de;

TAILWIND

colors: {
  'brand-1': '#16e3bf',
  'brand-2': '#b28db1',
  'brand-3': '#f9b6de',
  'brand-4': '#dfd6da',
  'brand-5': '#d8e1de',
}

RGB Array

[22, 227, 191], [178, 141, 177], [249, 182, 222], [223, 214, 218], [216, 225, 222]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #16E3BF, #B28DB1, #F9B6DE, #DFD6DA, #D8E1DE 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: #16e3bf; --color-2: #b28db1; --color-3: #f9b6de; --color-4: #dfd6da; --color-5: #d8e1de. 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