#FFBCB0 + #EBBDB2 + #C0CCC9 + #C3E3D1 + #E8EDEC - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFBCB0

Peach Pink · LightPink · Cherry Blossom

HEX

#FFBCB0

RGB

rgb(255, 188, 176)

HSL

hsl(9, 100%, 85%)

HSB

hsb(9, 31%, 100%)

CMYK

cmyk(0%, 26%, 31%, 0%)

Oklch

oklch(85.4% 0.080 30.3)

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

#EBBDB2

Peach Pink · LightPink · Cherry Blossom

HEX

#EBBDB2

RGB

rgb(235, 189, 178)

HSL

hsl(12, 59%, 81%)

HSB

hsb(12, 24%, 92%)

CMYK

cmyk(0%, 20%, 24%, 8%)

Oklch

oklch(83.6% 0.055 33.7)

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

#C0CCC9

Jade · Silver · Glacier Blue

HEX

#C0CCC9

RGB

rgb(192, 204, 201)

HSL

hsl(165, 11%, 78%)

HSB

hsb(165, 6%, 80%)

CMYK

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

Oklch

oklch(83.5% 0.014 179.4)

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

#C3E3D1

Celadon · LightGray · Mint Green

HEX

#C3E3D1

RGB

rgb(195, 227, 209)

HSL

hsl(146, 36%, 83%)

HSB

hsb(146, 14%, 89%)

CMYK

cmyk(14%, 0%, 8%, 11%)

Oklch

oklch(88.8% 0.042 160.8)

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

#E8EDEC

Jade · Lavender · Glacier Blue

HEX

#E8EDEC

RGB

rgb(232, 237, 236)

HSL

hsl(168, 12%, 92%)

HSB

hsb(168, 2%, 93%)

CMYK

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

Oklch

oklch(94.2% 0.006 183.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFBCB0

B3F4FF

Analogous

FFB3CD

FFBCB0

FFE4B3

Triadic

FFBCB0

B3FFBE

BEB3FF

Split-Comp.

FFBCB0

B3FFE4

B3CDFF

Tetradic

FFBCB0

CDFFB3

B3F4FF

E4B3FF

Contrast Matrix WCAG 2.1 Contrast

FFBCB0	EBBDB2	C0CCC9	C3E3D1	E8EDEC
—	1.0 Fail	1.0 Fail	1.2 Fail	1.4 Fail
1.0 Fail	—	1.0 Fail	1.2 Fail	1.4 Fail
1.0 Fail	1.0 Fail	—	1.2 Fail	1.4 Fail
1.2 Fail	1.2 Fail	1.2 Fail	—	1.2 Fail
1.4 Fail	1.4 Fail	1.4 Fail	1.2 Fail	—

White BG

1.6Fail

1.7Fail

1.4Fail

1.2Fail

Black BG

13.1AAA

12.5AAA

12.7AAA

15.2AAA

17.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E2E1B3

D7D7B5

C5C5CA

D1D1D5

EAEAEC

Deuteranopia

E6EBB4

DADDB5

C5C4CA

CFCDD6

EAE9EC

Tritanopia

FCB5B6

E9B7B7

C1CACA

C5D9DA

E8ECEC

Achromatopsia

CFCFCF

CACACA

C8C8C8

D7D7D7

EBEBEB

Shades & Tints Shades & Tints

#FFBCB0

Dark

Light

#EBBDB2

Dark

Light

#C0CCC9

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffbcb0;
  --color-2: #ebbdb2;
  --color-3: #c0ccc9;
  --color-4: #c3e3d1;
  --color-5: #e8edec;
}

SCSS

$color-1: #ffbcb0;
$color-2: #ebbdb2;
$color-3: #c0ccc9;
$color-4: #c3e3d1;
$color-5: #e8edec;

TAILWIND

colors: {
  'brand-1': '#ffbcb0',
  'brand-2': '#ebbdb2',
  'brand-3': '#c0ccc9',
  'brand-4': '#c3e3d1',
  'brand-5': '#e8edec',
}

RGB Array

[255, 188, 176], [235, 189, 178], [192, 204, 201], [195, 227, 209], [232, 237, 236]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FFBCB0, #EBBDB2, #C0CCC9, #C3E3D1, #E8EDEC 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: #ffbcb0; --color-2: #ebbdb2; --color-3: #c0ccc9; --color-4: #c3e3d1; --color-5: #e8edec. 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