← Back to Editor

#E8BAD0 · #BDC7C3 · #F2E16F · #CCC1BC · #A9CCBE

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#E8BAD0

Rouge · Pink · Cherry Blossom

HEX
#E8BAD0
RGB
rgb(232, 186, 208)
HSL
hsl(331, 50%, 82%)
HSB
hsb(331, 20%, 91%)
CMYK
cmyk(0%, 20%, 10%, 9%)
Oklch
oklch(83.6% 0.060 348.1)

TraditionalRouge」· PaintCherry Blossom」· Creative Rose Petal

#BDC7C3

Jade · Silver · Pearl Gray

HEX
#BDC7C3
RGB
rgb(189, 199, 195)
HSL
hsl(156, 8%, 76%)
HSB
hsb(156, 5%, 78%)
CMYK
cmyk(5%, 0%, 2%, 22%)
Oklch
oklch(82.1% 0.012 170.2)

TraditionalJade」· PaintPearl Gray」· Creative Silver Lining

#F2E16F

Fresh Green · Khaki · Sunflower

HEX
#F2E16F
RGB
rgb(242, 225, 111)
HSL
hsl(52, 83%, 69%)
HSB
hsb(52, 54%, 95%)
CMYK
cmyk(0%, 7%, 54%, 5%)
Oklch
oklch(90.1% 0.136 100.9)

TraditionalFresh Green」· PaintSunflower」· Creative Lemon Fizz

#CCC1BC

Apricot · Silver · Peach Orange

HEX
#CCC1BC
RGB
rgb(204, 193, 188)
HSL
hsl(19, 14%, 77%)
HSB
hsb(19, 8%, 80%)
CMYK
cmyk(0%, 5%, 8%, 20%)
Oklch
oklch(81.9% 0.014 46.2)

TraditionalApricot」· PaintPeach Orange」· Creative Honey Glow

#A9CCBE

Jade · Silver · Apple Green

HEX
#A9CCBE
RGB
rgb(169, 204, 190)
HSL
hsl(156, 26%, 73%)
HSB
hsb(156, 17%, 80%)
CMYK
cmyk(17%, 0%, 7%, 20%)
Oklch
oklch(81.6% 0.042 169.1)

TraditionalJade」· PaintApple Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

E8BAD0
BAE8D2

Analogous

E8BAE7
E8BAD0
E8BBBA

Triadic

E8BAD0
D0E8BA
BAD0E8

Split-Comp.

E8BAD0
BAE8BB
BAE7E8

Tetradic

E8BAD0
E7E8BA
BAE8D2
BBBAE8

Contrast Matrix WCAG 2.1 Contrast

E8BAD0
BDC7C3
F2E16F
CCC1BC
A9CCBE
1.0
Fail
1.3
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.3
Fail
1.0
Fail
1.0
Fail
1.3
Fail
1.3
Fail
1.3
Fail
1.3
Fail
1.0
Fail
1.0
Fail
1.3
Fail
1.0
Fail
1.0
Fail
1.0
Fail
1.3
Fail
1.0
Fail
White BG
1.7Fail
1.7Fail
1.3Fail
1.8Fail
1.7Fail
Black BG
12.4AAA
12.1AAA
15.8AAA
11.9AAA
12.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D4D4CB
C1C1C4
EBEA8B
C7C7BD
B8B8C1

Deuteranopia

D7DAC9
C1C0C4
ECED91
C8C9BE
B6B4C2

Tritanopia

E6C6C6
BDC5C5
F1A0A5
CBBEBE
ABC4C5

Achromatopsia

CACACA
C4C4C4
D9D9D9
C4C4C4
C0C0C0

Shades & Tints Shades & Tints

#E8BAD0

Dark
Light

#BDC7C3

Dark
Light

#F2E16F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #e8bad0;
  --color-2: #bdc7c3;
  --color-3: #f2e16f;
  --color-4: #ccc1bc;
  --color-5: #a9ccbe;
}

SCSS

$color-1: #e8bad0;
$color-2: #bdc7c3;
$color-3: #f2e16f;
$color-4: #ccc1bc;
$color-5: #a9ccbe;

TAILWIND

colors: {
  'brand-1': '#e8bad0',
  'brand-2': '#bdc7c3',
  'brand-3': '#f2e16f',
  'brand-4': '#ccc1bc',
  'brand-5': '#a9ccbe',
}

RGB Array

[232, 186, 208], [189, 199, 195], [242, 225, 111], [204, 193, 188], [169, 204, 190]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #E8BAD0, #BDC7C3, #F2E16F, #CCC1BC, #A9CCBE 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: #e8bad0; --color-2: #bdc7c3; --color-3: #f2e16f; --color-4: #ccc1bc; --color-5: #a9ccbe. 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