#D8EBE1 + #B7DDD9 + #2BFEF0 + #B3AAF9 + #9788A0 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#D8EBE1

Celadon · LightGray · Mint Green

HEX

#D8EBE1

RGB

rgb(216, 235, 225)

HSL

hsl(148, 32%, 88%)

HSB

hsb(148, 8%, 92%)

CMYK

cmyk(8%, 0%, 4%, 8%)

Oklch

oklch(92.3% 0.024 163.1)

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

#B7DDD9

Jade · LightBlue · Glacier Blue

HEX

#B7DDD9

RGB

rgb(183, 221, 217)

HSL

hsl(174, 36%, 79%)

HSB

hsb(174, 17%, 87%)

CMYK

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

Oklch

oklch(86.9% 0.040 188.6)

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

#2BFEF0

Mineral Blue · Cyan · Lake Green

HEX

#2BFEF0

RGB

rgb(43, 254, 240)

HSL

hsl(176, 99%, 58%)

HSB

hsb(176, 83%, 100%)

CMYK

cmyk(83%, 0%, 6%, 0%)

Oklch

oklch(90.1% 0.151 187.5)

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

#B3AAF9

Wisteria · LightSteelBlue · Sky Blue

HEX

#B3AAF9

RGB

rgb(179, 170, 249)

HSL

hsl(247, 87%, 82%)

HSB

hsb(247, 32%, 98%)

CMYK

cmyk(28%, 32%, 0%, 2%)

Oklch

oklch(77.5% 0.112 288.7)

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

#9788A0

Dark Plum · LightSlateGray · Violet

HEX

#9788A0

RGB

rgb(151, 136, 160)

HSL

hsl(278, 11%, 58%)

HSB

hsb(278, 15%, 63%)

CMYK

cmyk(6%, 15%, 0%, 37%)

Oklch

oklch(64.8% 0.039 312.9)

Traditional「Dark Plum」· Paint「Violet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D8EBE1

EAD7E1

Analogous

D7EAD7

D8EBE1

D7EAEA

Triadic

D8EBE1

E0D7EA

EAE0D7

Split-Comp.

D8EBE1

EAD7EA

EAD7D7

Tetradic

D8EBE1

D7D7EA

EAD7E1

EAEAD7

Contrast Matrix WCAG 2.1 Contrast

D8EBE1	B7DDD9	2BFEF0	B3AAF9	9788A0
—	1.2 Fail	1.0 Fail	1.7 Fail	2.7 Fail
1.2 Fail	—	1.2 Fail	1.4 Fail	2.3 Fail
1.0 Fail	1.2 Fail	—	1.6 Fail	2.6 Fail
1.7 Fail	1.4 Fail	1.6 Fail	—	1.6 Fail
2.7 Fail	2.3 Fail	2.6 Fail	1.6 Fail	—

White BG

1.2Fail

1.5Fail

1.3Fail

2.1Fail

3.3AA Large

Black BG

16.9AAA

14.4AAA

16.5AAA

10.0AAA

6.3AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0E0E3

C7C8DA

8688F3

AFAFE6

91909A

Deuteranopia

DFDEE4

C5C2DA

7A6AF4

B0B0E1

919399

Tritanopia

D9E5E6

B9DBDB

36F6F7

B3D7D3

969695

Achromatopsia

E4E4E4

D1D1D1

BDBDBD

B6B6B6

8F8F8F

Shades & Tints Shades & Tints

#D8EBE1

Dark

Light

#B7DDD9

Dark

Light

#2BFEF0

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d8ebe1;
  --color-2: #b7ddd9;
  --color-3: #2bfef0;
  --color-4: #b3aaf9;
  --color-5: #9788a0;
}

SCSS

$color-1: #d8ebe1;
$color-2: #b7ddd9;
$color-3: #2bfef0;
$color-4: #b3aaf9;
$color-5: #9788a0;

TAILWIND

colors: {
  'brand-1': '#d8ebe1',
  'brand-2': '#b7ddd9',
  'brand-3': '#2bfef0',
  'brand-4': '#b3aaf9',
  'brand-5': '#9788a0',
}

RGB Array

[216, 235, 225], [183, 221, 217], [43, 254, 240], [179, 170, 249], [151, 136, 160]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D8EBE1, #B7DDD9, #2BFEF0, #B3AAF9, #9788A0 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: #d8ebe1; --color-2: #b7ddd9; --color-3: #2bfef0; --color-4: #b3aaf9; --color-5: #9788a0. 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