#B6E3DE + #CCDBD8 + #E8D5DA + #FFE7D4 + #FFEDED - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B6E3DE

Jade · LightBlue · Glacier Blue

HEX

#B6E3DE

RGB

rgb(182, 227, 222)

HSL

hsl(173, 45%, 80%)

HSB

hsb(173, 20%, 89%)

CMYK

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

Oklch

oklch(88.3% 0.047 188.0)

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

#CCDBD8

Jade · LightGray · Glacier Blue

HEX

#CCDBD8

RGB

rgb(204, 219, 216)

HSL

hsl(168, 17%, 83%)

HSB

hsb(168, 7%, 86%)

CMYK

cmyk(7%, 0%, 1%, 14%)

Oklch

oklch(87.9% 0.017 182.7)

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

#E8D5DA

Rouge · LightGray · Cherry Blossom

HEX

#E8D5DA

RGB

rgb(232, 213, 218)

HSL

hsl(344, 29%, 87%)

HSB

hsb(344, 8%, 91%)

CMYK

cmyk(0%, 8%, 6%, 9%)

Oklch

oklch(89.0% 0.022 359.7)

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

#FFE7D4

Apricot · Bisque · Peach Orange

HEX

#FFE7D4

RGB

rgb(255, 231, 212)

HSL

hsl(27, 100%, 92%)

HSB

hsb(27, 17%, 100%)

CMYK

cmyk(0%, 9%, 17%, 0%)

Oklch

oklch(94.2% 0.037 60.7)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#FFEDED

Peach Pink · SeaShell · Cherry Blossom

HEX

#FFEDED

RGB

rgb(255, 237, 237)

HSL

hsl(0, 100%, 96%)

HSB

hsb(0, 7%, 100%)

CMYK

cmyk(0%, 7%, 7%, 0%)

Oklch

oklch(96.0% 0.020 17.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B6E3DE

E3B5BA

Analogous

B5E3C7

B6E3DE

B5D1E3

Triadic

B6E3DE

DEB5E3

E3DEB5

Split-Comp.

B6E3DE

E3B5D1

E3C7B5

Tetradic

B6E3DE

C7B5E3

E3B5BA

D1E3B5

Contrast Matrix WCAG 2.1 Contrast

B6E3DE	CCDBD8	E8D5DA	FFE7D4	FFEDED
—	1.0 Fail	1.0 Fail	1.2 Fail	1.2 Fail
1.0 Fail	—	1.0 Fail	1.2 Fail	1.3 Fail
1.0 Fail	1.0 Fail	—	1.2 Fail	1.2 Fail
1.2 Fail	1.2 Fail	1.2 Fail	—	1.1 Fail
1.2 Fail	1.3 Fail	1.2 Fail	1.1 Fail	—

White BG

1.4Fail

1.2Fail

1.1Fail

Black BG

15.0AAA

14.7AAA

15.0AAA

17.6AAA

18.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9CADF

D2D3D9

E0E0D9

F5F4D9

F7F7ED

Deuteranopia

C7C4DF

D2D1D9

E1E2D9

F6F8DA

F8FAED

Tritanopia

B8E0E0

CDD9D9

E7D8D8

FEDCDD

FEEDED

Achromatopsia

D5D5D5

D6D6D6

DBDBDB

ECECEC

F2F2F2

Shades & Tints Shades & Tints

#B6E3DE

Dark

Light

#CCDBD8

Dark

Light

#E8D5DA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b6e3de;
  --color-2: #ccdbd8;
  --color-3: #e8d5da;
  --color-4: #ffe7d4;
  --color-5: #ffeded;
}

SCSS

$color-1: #b6e3de;
$color-2: #ccdbd8;
$color-3: #e8d5da;
$color-4: #ffe7d4;
$color-5: #ffeded;

TAILWIND

colors: {
  'brand-1': '#b6e3de',
  'brand-2': '#ccdbd8',
  'brand-3': '#e8d5da',
  'brand-4': '#ffe7d4',
  'brand-5': '#ffeded',
}

RGB Array

[182, 227, 222], [204, 219, 216], [232, 213, 218], [255, 231, 212], [255, 237, 237]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B6E3DE, #CCDBD8, #E8D5DA, #FFE7D4, #FFEDED 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: #b6e3de; --color-2: #ccdbd8; --color-3: #e8d5da; --color-4: #ffe7d4; --color-5: #ffeded. 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