#B3FFFC + #AEE2E0 + #C8E5DD + #E2E7D9 + #FCEAD6 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#B3FFFC

Jade · LightBlue · Glacier Blue

HEX

#B3FFFC

RGB

rgb(179, 255, 252)

HSL

hsl(178, 100%, 85%)

HSB

hsb(178, 30%, 100%)

CMYK

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

Oklch

oklch(95.0% 0.075 192.9)

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

#AEE2E0

Jade · LightBlue · Glacier Blue

HEX

#AEE2E0

RGB

rgb(174, 226, 224)

HSL

hsl(178, 47%, 78%)

HSB

hsb(178, 23%, 89%)

CMYK

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

Oklch

oklch(87.6% 0.053 193.3)

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

#C8E5DD

Jade · LightGray · Glacier Blue

HEX

#C8E5DD

RGB

rgb(200, 229, 221)

HSL

hsl(163, 36%, 84%)

HSB

hsb(163, 13%, 90%)

CMYK

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

Oklch

oklch(89.8% 0.032 177.1)

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

#E2E7D9

Willow Green · Beige · Mint Green

HEX

#E2E7D9

RGB

rgb(226, 231, 217)

HSL

hsl(81, 23%, 88%)

HSB

hsb(81, 6%, 91%)

CMYK

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

Oklch

oklch(92.0% 0.019 122.8)

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

#FCEAD6

Goose Yellow · Beige · Peach Orange

HEX

#FCEAD6

RGB

rgb(252, 234, 214)

HSL

hsl(32, 86%, 91%)

HSB

hsb(32, 15%, 99%)

CMYK

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

Oklch

oklch(94.6% 0.033 70.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

B3FFFC

FFB3B5

Analogous

B3FFD6

B3FFFC

B3DBFF

Triadic

B3FFFC

FCB3FF

FFFCB3

Split-Comp.

B3FFFC

FFB3DB

FFD6B3

Tetradic

B3FFFC

D6B3FF

FFB3B5

DBFFB3

Contrast Matrix WCAG 2.1 Contrast

B3FFFC	AEE2E0	C8E5DD	E2E7D9	FCEAD6
—	1.3 Fail	1.2 Fail	1.1 Fail	1.0 Fail
1.3 Fail	—	1.1 Fail	1.1 Fail	1.2 Fail
1.2 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.1 Fail	1.1 Fail	1.1 Fail	—	1.1 Fail
1.0 Fail	1.2 Fail	1.1 Fail	1.1 Fail	—

White BG

1.1Fail

1.4Fail

1.3Fail

1.2Fail

Black BG

18.6AAA

14.8AAA

15.7AAA

16.7AAA

17.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D5FD

C5C5E0

D5D5DF

E4E4DC

F4F4DB

Deuteranopia

D0CAFD

C2BEE1

D3D1DF

E4E4DD

F5F7DC

Tritanopia

B7FDFD

B1E1E1

C9E0E1

E2DFE0

FBDFE0

Achromatopsia

E8E8E8

D2D2D2

DBDBDB

E4E4E4

EDEDED

Shades & Tints Shades & Tints

#B3FFFC

Dark

Light

#AEE2E0

Dark

Light

#C8E5DD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #b3fffc;
  --color-2: #aee2e0;
  --color-3: #c8e5dd;
  --color-4: #e2e7d9;
  --color-5: #fcead6;
}

SCSS

$color-1: #b3fffc;
$color-2: #aee2e0;
$color-3: #c8e5dd;
$color-4: #e2e7d9;
$color-5: #fcead6;

TAILWIND

colors: {
  'brand-1': '#b3fffc',
  'brand-2': '#aee2e0',
  'brand-3': '#c8e5dd',
  'brand-4': '#e2e7d9',
  'brand-5': '#fcead6',
}

RGB Array

[179, 255, 252], [174, 226, 224], [200, 229, 221], [226, 231, 217], [252, 234, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #B3FFFC, #AEE2E0, #C8E5DD, #E2E7D9, #FCEAD6 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: #b3fffc; --color-2: #aee2e0; --color-3: #c8e5dd; --color-4: #e2e7d9; --color-5: #fcead6. 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