#BCC8C7 + #97F0A4 + #C1E3A8 + #D7D8BF + #E6C7DA · pastel - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

GentleSoothingSweetWarmCool

Industry INDUSTRY

Kids & BabyBeautyLifestyle

UI Context UI CONTEXT

E-commerceSocial PostIllustration

Color Details Color Details

#BCC8C7

Jade · Silver · Glacier Blue

HEX

#BCC8C7

RGB

rgb(188, 200, 199)

HSL

hsl(175, 10%, 76%)

HSB

hsb(175, 6%, 78%)

CMYK

cmyk(6%, 0%, 0%, 22%)

Oklch

oklch(82.3% 0.013 190.9)

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

#97F0A4

Emerald · LightGreen · Apple Green

HEX

#97F0A4

RGB

rgb(151, 240, 164)

HSL

hsl(129, 75%, 77%)

HSB

hsb(129, 37%, 94%)

CMYK

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

Oklch

oklch(88.0% 0.135 147.9)

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

#C1E3A8

Emerald · Silver · Apple Green

HEX

#C1E3A8

RGB

rgb(193, 227, 168)

HSL

hsl(95, 51%, 77%)

HSB

hsb(95, 26%, 89%)

CMYK

cmyk(15%, 0%, 26%, 11%)

Oklch

oklch(87.6% 0.087 132.3)

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

#D7D8BF

Fresh Green · LightGray · Lemon Cream

HEX

#D7D8BF

RGB

rgb(215, 216, 191)

HSL

hsl(62, 24%, 80%)

HSB

hsb(62, 12%, 85%)

CMYK

cmyk(0%, 0%, 12%, 15%)

Oklch

oklch(87.5% 0.034 108.9)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#E6C7DA

Mauve · LightGray · Cherry Blossom

HEX

#E6C7DA

RGB

rgb(230, 199, 218)

HSL

hsl(323, 38%, 84%)

HSB

hsb(323, 13%, 90%)

CMYK

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

Oklch

oklch(86.1% 0.043 340.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

BCC8C7

C8BCBD

Analogous

BCC8C1

BCC8C7

BCC3C8

Triadic

BCC8C7

C7BCC8

C8C7BC

Split-Comp.

BCC8C7

C8BCC3

C8C1BC

Tetradic

BCC8C7

C1BCC8

C8BCBD

C3C8BC

Contrast Matrix WCAG 2.1 Contrast

BCC8C7	97F0A4	C1E3A8	D7D8BF	E6C7DA
—	1.3 Fail	1.2 Fail	1.2 Fail	1.1 Fail
1.3 Fail	—	1.0 Fail	1.1 Fail	1.1 Fail
1.2 Fail	1.0 Fail	—	1.0 Fail	1.1 Fail
1.2 Fail	1.1 Fail	1.0 Fail	—	1.1 Fail
1.1 Fail	1.1 Fail	1.1 Fail	1.1 Fail	—

White BG

1.7Fail

1.4Fail

1.5Fail

1.6Fail

Black BG

12.2AAA

15.3AAA

14.8AAA

14.5AAA

13.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C1C1C7

BEBEB6

D0D0B6

D7D7C5

D9D8D5

Deuteranopia

C1C0C7

B8B2BB

CECBBA

D7D7C7

DADDD4

Tritanopia

BDC7C7

9BC5C8

C3C2C4

D7CACB

E4D2D1

Achromatopsia

C4C4C4

CDCDCD

D2D2D2

D5D5D5

D2D2D2

Shades & Tints Shades & Tints

#BCC8C7

Dark

Light

#97F0A4

Dark

Light

#C1E3A8

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #bcc8c7;
  --color-2: #97f0a4;
  --color-3: #c1e3a8;
  --color-4: #d7d8bf;
  --color-5: #e6c7da;
}

SCSS

$color-1: #bcc8c7;
$color-2: #97f0a4;
$color-3: #c1e3a8;
$color-4: #d7d8bf;
$color-5: #e6c7da;

TAILWIND

colors: {
  'brand-1': '#bcc8c7',
  'brand-2': '#97f0a4',
  'brand-3': '#c1e3a8',
  'brand-4': '#d7d8bf',
  'brand-5': '#e6c7da',
}

RGB Array

[188, 200, 199], [151, 240, 164], [193, 227, 168], [215, 216, 191], [230, 199, 218]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This pastel-style palette of #BCC8C7, #97F0A4, #C1E3A8, #D7D8BF, #E6C7DA 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: #bcc8c7; --color-2: #97f0a4; --color-3: #c1e3a8; --color-4: #d7d8bf; --color-5: #e6c7da. 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 pastel-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