#F4C5C0 + #D4B0B5 + #B59AAB + #C1C5BA + #CCEEC9 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4C5C0

Peach Pink · Pink · Cherry Blossom

HEX

#F4C5C0

RGB

rgb(244, 197, 192)

HSL

hsl(6, 70%, 85%)

HSB

hsb(6, 21%, 96%)

CMYK

cmyk(0%, 19%, 21%, 4%)

Oklch

oklch(86.3% 0.054 25.3)

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

#D4B0B5

Peach Pink · Silver · Coral Red

HEX

#D4B0B5

RGB

rgb(212, 176, 181)

HSL

hsl(352, 30%, 76%)

HSB

hsb(352, 17%, 83%)

CMYK

cmyk(0%, 17%, 15%, 17%)

Oklch

oklch(79.0% 0.042 8.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#B59AAB

Mauve · DarkGray · Rose Pink

HEX

#B59AAB

RGB

rgb(181, 154, 171)

HSL

hsl(322, 15%, 66%)

HSB

hsb(322, 15%, 71%)

CMYK

cmyk(0%, 15%, 6%, 29%)

Oklch

oklch(71.6% 0.040 340.0)

Traditional「Mauve」· Paint「Rose Pink」· Creative Rose Petal

#C1C5BA

Willow Green · Silver · Pearl Gray

HEX

#C1C5BA

RGB

rgb(193, 197, 186)

HSL

hsl(82, 9%, 75%)

HSB

hsb(82, 6%, 77%)

CMYK

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

Oklch

oklch(81.7% 0.016 123.1)

Traditional「Willow Green」· Paint「Pearl Gray」· Creative Silver Lining

#CCEEC9

Emerald · LightGray · Mint Green

HEX

#CCEEC9

RGB

rgb(204, 238, 201)

HSL

hsl(115, 52%, 86%)

HSB

hsb(115, 16%, 93%)

CMYK

cmyk(14%, 0%, 16%, 7%)

Oklch

oklch(91.5% 0.061 142.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4C5C0

BEEEF4

Analogous

F4BED3

F4C5C0

F4DEBE

Triadic

F4C5C0

BEF4C3

C3BEF4

Split-Comp.

F4C5C0

BEF4DE

BED3F4

Tetradic

F4C5C0

D3F4BE

BEEEF4

DEBEF4

Contrast Matrix WCAG 2.1 Contrast

F4C5C0	D4B0B5	B59AAB	C1C5BA	CCEEC9
—	1.3 Fail	1.7 Fail	1.1 Fail	1.2 Fail
1.3 Fail	—	1.3 Fail	1.1 Fail	1.6 Fail
1.7 Fail	1.3 Fail	—	1.5 Fail	2.0 Fail
1.1 Fail	1.1 Fail	1.5 Fail	—	1.4 Fail
1.2 Fail	1.6 Fail	2.0 Fail	1.4 Fail	—

White BG

1.5Fail

2.0Fail

2.6Fail

1.8Fail

1.3Fail

Black BG

13.6AAA

10.7AAA

8.2AAA

12.0AAA

16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0DFC1

C4C4B4

A9A9A7

C3C3BD

DBDBD2

Deuteranopia

E2E6C1

C7C9B4

ABADA6

C3C2BD

D9D6D4

Tritanopia

F2C2C2

D2B3B3

B4A4A3

C1BFBF

CED9DB

Achromatopsia

D2D2D2

BBBBBB

A4A4A4

C3C3C3

E0E0E0

Shades & Tints Shades & Tints

#F4C5C0

Dark

Light

#D4B0B5

Dark

Light

#B59AAB

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4c5c0;
  --color-2: #d4b0b5;
  --color-3: #b59aab;
  --color-4: #c1c5ba;
  --color-5: #cceec9;
}

SCSS

$color-1: #f4c5c0;
$color-2: #d4b0b5;
$color-3: #b59aab;
$color-4: #c1c5ba;
$color-5: #cceec9;

TAILWIND

colors: {
  'brand-1': '#f4c5c0',
  'brand-2': '#d4b0b5',
  'brand-3': '#b59aab',
  'brand-4': '#c1c5ba',
  'brand-5': '#cceec9',
}

RGB Array

[244, 197, 192], [212, 176, 181], [181, 154, 171], [193, 197, 186], [204, 238, 201]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4C5C0, #D4B0B5, #B59AAB, #C1C5BA, #CCEEC9 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: #f4c5c0; --color-2: #d4b0b5; --color-3: #b59aab; --color-4: #c1c5ba; --color-5: #cceec9. 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