#B8EFFD + #C2E7F2 + #E5DDCB + #E6DFDF + #E2DFDA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B8EFFD

Sky Blue · LightBlue · Glacier Blue

HEX

#B8EFFD

RGB

rgb(184, 239, 253)

HSL

hsl(192, 95%, 86%)

HSB

hsb(192, 27%, 99%)

CMYK

cmyk(27%, 6%, 0%, 1%)

Oklch

oklch(91.9% 0.059 215.1)

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

#C2E7F2

Sky Blue · LightBlue · Glacier Blue

HEX

#C2E7F2

RGB

rgb(194, 231, 242)

HSL

hsl(194, 65%, 85%)

HSB

hsb(194, 20%, 95%)

CMYK

cmyk(20%, 5%, 0%, 5%)

Oklch

oklch(90.5% 0.041 217.7)

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

#E5DDCB

Goose Yellow · LightGray · Lemon Cream

HEX

#E5DDCB

RGB

rgb(229, 221, 203)

HSL

hsl(42, 33%, 85%)

HSB

hsb(42, 11%, 90%)

CMYK

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

Oklch

oklch(89.9% 0.026 86.9)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#E6DFDF

Peach Pink · LightGray · Cherry Blossom

HEX

#E6DFDF

RGB

rgb(230, 223, 223)

HSL

hsl(0, 12%, 89%)

HSB

hsb(0, 3%, 90%)

CMYK

cmyk(0%, 3%, 3%, 10%)

Oklch

oklch(90.9% 0.008 17.3)

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

#E2DFDA

Goose Yellow · LightGray · Peach Orange

HEX

#E2DFDA

RGB

rgb(226, 223, 218)

HSL

hsl(38, 12%, 87%)

HSB

hsb(38, 4%, 89%)

CMYK

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

Oklch

oklch(90.5% 0.008 80.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B8EFFD

FDC7B9

Analogous

B9FDE9

B8EFFD

B9CEFD

Triadic

B8EFFD

FDB9F0

F0FDB9

Split-Comp.

B8EFFD

FDB9CE

FDE9B9

Tetradic

B8EFFD

E9B9FD

FDC7B9

CEFDB9

Contrast Matrix WCAG 2.1 Contrast

B8EFFD	C2E7F2	E5DDCB	E6DFDF	E2DFDA
—	1.0 Fail	1.1 Fail	1.1 Fail	1.1 Fail
1.0 Fail	—	1.0 Fail	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	—	1.0 Fail	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	—	1.0 Fail
1.1 Fail	1.0 Fail	1.0 Fail	1.0 Fail	—

White BG

1.2Fail

1.3Fail

1.4Fail

1.3Fail

Black BG

16.8AAA

16.0AAA

15.5AAA

16.0AAA

15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D0D0FA

D2D2EF

E2E1CF

E3E3DF

E1E1DB

Deuteranopia

CDC9F9

D0CDEF

E2E3D0

E3E4DF

E1E1DC

Tritanopia

BBF7F6

C4EDED

E5D3D4

E6DFDF

E2DCDC

Achromatopsia

E0E0E0

DDDDDD

E1E1E1

DFDFDF

Shades & Tints Shades & Tints

#B8EFFD

Dark

Light

#C2E7F2

Dark

Light

#E5DDCB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b8effd;
  --color-2: #c2e7f2;
  --color-3: #e5ddcb;
  --color-4: #e6dfdf;
  --color-5: #e2dfda;
}

SCSS

$color-1: #b8effd;
$color-2: #c2e7f2;
$color-3: #e5ddcb;
$color-4: #e6dfdf;
$color-5: #e2dfda;

TAILWIND

colors: {
  'brand-1': '#b8effd',
  'brand-2': '#c2e7f2',
  'brand-3': '#e5ddcb',
  'brand-4': '#e6dfdf',
  'brand-5': '#e2dfda',
}

RGB Array

[184, 239, 253], [194, 231, 242], [229, 221, 203], [230, 223, 223], [226, 223, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B8EFFD, #C2E7F2, #E5DDCB, #E6DFDF, #E2DFDA 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: #b8effd; --color-2: #c2e7f2; --color-3: #e5ddcb; --color-4: #e6dfdf; --color-5: #e2dfda. 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