#E8FCFC + #B8FEE6 + #C6DDAD + #D6B668 + #AB8CAA - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E8FCFC

Sky Blue · Lavender · Glacier Blue

HEX

#E8FCFC

RGB

rgb(232, 252, 252)

HSL

hsl(180, 77%, 95%)

HSB

hsb(180, 8%, 99%)

CMYK

cmyk(8%, 0%, 0%, 1%)

Oklch

oklch(97.6% 0.021 196.8)

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

#B8FEE6

Jade · LightBlue · Mint Green

HEX

#B8FEE6

RGB

rgb(184, 254, 230)

HSL

hsl(159, 97%, 86%)

HSB

hsb(159, 28%, 100%)

CMYK

cmyk(28%, 0%, 9%, 0%)

Oklch

oklch(94.4% 0.077 171.4)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#C6DDAD

Willow Green · Silver · Apple Green

HEX

#C6DDAD

RGB

rgb(198, 221, 173)

HSL

hsl(89, 41%, 77%)

HSB

hsb(89, 22%, 87%)

CMYK

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

Oklch

oklch(86.8% 0.069 128.6)

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

#D6B668

Ginger · BurlyWood · Sunflower

HEX

#D6B668

RGB

rgb(214, 182, 104)

HSL

hsl(43, 57%, 62%)

HSB

hsb(43, 51%, 84%)

CMYK

cmyk(0%, 15%, 51%, 16%)

Oklch

oklch(78.8% 0.104 87.7)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#AB8CAA

Mauve · DarkGray · Lilac Purple

HEX

#AB8CAA

RGB

rgb(171, 140, 170)

HSL

hsl(302, 16%, 61%)

HSB

hsb(302, 18%, 67%)

CMYK

cmyk(0%, 18%, 1%, 33%)

Oklch

oklch(67.8% 0.056 327.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8FCFC

FCE8E8

Analogous

E8FCF2

E8FCFC

E8F2FC

Triadic

E8FCFC

FCE8FC

FCFCE8

Split-Comp.

E8FCFC

FCE8F2

FCF2E8

Tetradic

E8FCFC

F2E8FC

FCE8E8

F2FCE8

Contrast Matrix WCAG 2.1 Contrast

E8FCFC	B8FEE6	C6DDAD	D6B668	AB8CAA
—	1.1 Fail	1.4 Fail	1.8 Fail	2.8 Fail
1.1 Fail	—	1.3 Fail	1.7 Fail	2.6 Fail
1.4 Fail	1.3 Fail	—	1.3 Fail	2.0 Fail
1.8 Fail	1.7 Fail	1.3 Fail	—	1.5 Fail
2.8 Fail	2.6 Fail	2.0 Fail	1.5 Fail	—

White BG

1.1Fail

1.5Fail

2.0Fail

3.0Fail

Black BG

19.8AAA

18.4AAA

14.3AAA

10.8AAA

7.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F1F1FC

D6D7EC

D0D0B9

C8C87B

9E9DA3

Deuteranopia

F0EEFC

D2CDED

CFCDBB

CACC7F

9FA2A1

Tritanopia

E9FCFC

BBF0F1

C7C2C4

D48A8D

A99D9C

Achromatopsia

F6F6F6

E6E6E6

D1D1D1

B7B7B7

999999

Shades & Tints Shades & Tints

#E8FCFC

Dark

Light

#B8FEE6

Dark

Light

#C6DDAD

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8fcfc;
  --color-2: #b8fee6;
  --color-3: #c6ddad;
  --color-4: #d6b668;
  --color-5: #ab8caa;
}

SCSS

$color-1: #e8fcfc;
$color-2: #b8fee6;
$color-3: #c6ddad;
$color-4: #d6b668;
$color-5: #ab8caa;

TAILWIND

colors: {
  'brand-1': '#e8fcfc',
  'brand-2': '#b8fee6',
  'brand-3': '#c6ddad',
  'brand-4': '#d6b668',
  'brand-5': '#ab8caa',
}

RGB Array

[232, 252, 252], [184, 254, 230], [198, 221, 173], [214, 182, 104], [171, 140, 170]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8FCFC, #B8FEE6, #C6DDAD, #D6B668, #AB8CAA 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: #e8fcfc; --color-2: #b8fee6; --color-3: #c6ddad; --color-4: #d6b668; --color-5: #ab8caa. 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