← Back to Editor

#F4BDC2 · #D9ABB6 · #BE9BAC · #9C929D · #857D7D

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F4BDC2

Peach Pink · LightPink · Cherry Blossom

HEX
#F4BDC2
RGB
rgb(244, 189, 194)
HSL
hsl(355, 71%, 85%)
HSB
hsb(355, 23%, 96%)
CMYK
cmyk(0%, 23%, 20%, 4%)
Oklch
oklch(84.9% 0.064 12.4)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Rose Petal

#D9ABB6

Peach Pink · Silver · Coral Red

HEX
#D9ABB6
RGB
rgb(217, 171, 182)
HSL
hsl(346, 38%, 76%)
HSB
hsb(346, 21%, 85%)
CMYK
cmyk(0%, 21%, 16%, 15%)
Oklch
oklch(78.6% 0.056 2.5)

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

#BE9BAC

Rouge · DarkGray · Rose Pink

HEX
#BE9BAC
RGB
rgb(190, 155, 172)
HSL
hsl(331, 21%, 68%)
HSB
hsb(331, 18%, 75%)
CMYK
cmyk(0%, 18%, 9%, 25%)
Oklch
oklch(72.6% 0.047 347.5)

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

#9C929D

Ash · DarkGray · Silver Sand

HEX
#9C929D
RGB
rgb(156, 146, 157)
HSL
hsl(295, 5%, 59%)
HSB
hsb(295, 7%, 62%)
CMYK
cmyk(1%, 7%, 0%, 38%)
Oklch
oklch(67.2% 0.020 323.0)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#857D7D

Ash · Gray · Warm Gray

HEX
#857D7D
RGB
rgb(133, 125, 125)
HSL
hsl(0, 3%, 51%)
HSB
hsb(0, 6%, 52%)
CMYK
cmyk(0%, 6%, 6%, 48%)
Oklch
oklch(59.7% 0.010 17.4)

Traditional「Ash」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4BDC2
BEF4EF

Analogous

F4BEDD
F4BDC2
F4D4BE

Triadic

F4BDC2
C2F4BE
BEC2F4

Split-Comp.

F4BDC2
BEF4D4
BEDDF4

Tetradic

F4BDC2
DDF4BE
BEF4EF
D4BEF4

Contrast Matrix WCAG 2.1 Contrast

F4BDC2
D9ABB6
BE9BAC
9C929D
857D7D
—
1.2
Fail
1.5
Fail
1.8
Fail
2.5
Fail
1.2
Fail
—
1.2
Fail
1.5
Fail
2.0
Fail
1.5
Fail
1.2
Fail
—
1.2
Fail
1.6
Fail
1.8
Fail
1.5
Fail
1.2
Fail
—
1.3
Fail
2.5
Fail
2.0
Fail
1.6
Fail
1.3
Fail
—
White BG
1.6Fail
2.0Fail
2.5Fail
3.0Fail
4.0AA Large
Black BG
12.9AAA
10.5AAA
8.5AAA
7.0AAA
5.2AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDCC1
C5C5B3
AFAFA8
98989A
82817D

Deuteranopia

DFE3C0
C8CBB3
B1B4A7
98999A
82837D

Tritanopia

F1C0C0
D7B1B1
BCA5A4
9C9898
857D7D

Achromatopsia

CECECE
BABABA
A7A7A7
969696
7F7F7F

Shades & Tints Shades & Tints

#F4BDC2

Dark
Light

#D9ABB6

Dark
Light

#BE9BAC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4bdc2;
  --color-2: #d9abb6;
  --color-3: #be9bac;
  --color-4: #9c929d;
  --color-5: #857d7d;
}

SCSS

$color-1: #f4bdc2;
$color-2: #d9abb6;
$color-3: #be9bac;
$color-4: #9c929d;
$color-5: #857d7d;

TAILWIND

colors: {
  'brand-1': '#f4bdc2',
  'brand-2': '#d9abb6',
  'brand-3': '#be9bac',
  'brand-4': '#9c929d',
  'brand-5': '#857d7d',
}

RGB Array

[244, 189, 194], [217, 171, 182], [190, 155, 172], [156, 146, 157], [133, 125, 125]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4BDC2, #D9ABB6, #BE9BAC, #9C929D, #857D7D is ideal for: brand design, premium product pages, magazine layouts, health products, baby brands, fresh-style blogs. Low-saturation colors convey a sophisticated, premium feel. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f4bdc2; --color-2: #d9abb6; --color-3: #be9bac; --color-4: #9c929d; --color-5: #857d7d. 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 beauty, lifestyle, arts industries. Restrained colors convey professionalism and trust. 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