← Back to Editor

#FA8170 · #F18B9B · #DF9FB1 · #CDB1BB · #BABCB6

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

#FA8170

Peach Pink · Salmon · Coral Red

HEX
#FA8170
RGB
rgb(250, 129, 112)
HSL
hsl(7, 93%, 71%)
HSB
hsb(7, 55%, 98%)
CMYK
cmyk(0%, 48%, 55%, 2%)
Oklch
oklch(73.6% 0.151 29.4)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#F18B9B

Peach Pink · LightCoral · Coral Red

HEX
#F18B9B
RGB
rgb(241, 139, 155)
HSL
hsl(351, 78%, 75%)
HSB
hsb(351, 42%, 95%)
CMYK
cmyk(0%, 42%, 36%, 5%)
Oklch
oklch(75.0% 0.125 10.5)

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

#DF9FB1

Rouge · LightPink · Rose Pink

HEX
#DF9FB1
RGB
rgb(223, 159, 177)
HSL
hsl(343, 50%, 75%)
HSB
hsb(343, 29%, 87%)
CMYK
cmyk(0%, 29%, 21%, 13%)
Oklch
oklch(76.9% 0.079 0.7)

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

#CDB1BB

Rouge · Silver · Rose Pink

HEX
#CDB1BB
RGB
rgb(205, 177, 187)
HSL
hsl(339, 22%, 75%)
HSB
hsb(339, 14%, 80%)
CMYK
cmyk(0%, 14%, 9%, 20%)
Oklch
oklch(78.8% 0.035 354.4)

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

#BABCB6

Silver Gray · Silver · Pearl Gray

HEX
#BABCB6
RGB
rgb(186, 188, 182)
HSL
hsl(80, 4%, 73%)
HSB
hsb(80, 3%, 74%)
CMYK
cmyk(1%, 0%, 3%, 26%)
Oklch
oklch(79.2% 0.009 121.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FA8170
70EAFA

Analogous

FA70A5
FA8170
FAC570

Triadic

FA8170
70FA80
8070FA

Split-Comp.

FA8170
70FAC5
70A5FA

Tetradic

FA8170
A5FA70
70EAFA
C570FA

Contrast Matrix WCAG 2.1 Contrast

FA8170
F18B9B
DF9FB1
CDB1BB
BABCB6
—
1.1
Fail
1.2
Fail
1.3
Fail
1.3
Fail
1.1
Fail
—
1.1
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.1
Fail
—
1.1
Fail
1.1
Fail
1.3
Fail
1.2
Fail
1.1
Fail
—
1.0
Fail
1.3
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
White BG
2.5Fail
2.4Fail
2.2Fail
2.0Fail
1.9Fail
Black BG
8.4AAA
8.9AAA
9.7AAA
10.6AAA
11.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C6C574
C5C497
C3C3AD
C1C1B9
BBBBB7

Deuteranopia

CDD675
CBD296
C7CCAC
C3C5B8
BBBBB8

Tritanopia

F47778
EC9493
DCA9A8
CCB7B6
BAB9B9

Achromatopsia

A3A3A3
ABABAB
B4B4B4
BBBBBB
BBBBBB

Shades & Tints Shades & Tints

#FA8170

Dark
Light

#F18B9B

Dark
Light

#DF9FB1

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fa8170;
  --color-2: #f18b9b;
  --color-3: #df9fb1;
  --color-4: #cdb1bb;
  --color-5: #babcb6;
}

SCSS

$color-1: #fa8170;
$color-2: #f18b9b;
$color-3: #df9fb1;
$color-4: #cdb1bb;
$color-5: #babcb6;

TAILWIND

colors: {
  'brand-1': '#fa8170',
  'brand-2': '#f18b9b',
  'brand-3': '#df9fb1',
  'brand-4': '#cdb1bb',
  'brand-5': '#babcb6',
}

RGB Array

[250, 129, 112], [241, 139, 155], [223, 159, 177], [205, 177, 187], [186, 188, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FA8170, #F18B9B, #DF9FB1, #CDB1BB, #BABCB6 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: #fa8170; --color-2: #f18b9b; --color-3: #df9fb1; --color-4: #cdb1bb; --color-5: #babcb6. 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