← Back to Editor

#F48DAD · #D8A3B1 · #BBACBA · #9BB4C5 · #73BDCE

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

#F48DAD

Rouge · LightPink · Rose Pink

HEX
#F48DAD
RGB
rgb(244, 141, 173)
HSL
hsl(341, 82%, 75%)
HSB
hsb(341, 42%, 96%)
CMYK
cmyk(0%, 42%, 29%, 4%)
Oklch
oklch(76.1% 0.129 0.7)

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

#D8A3B1

Rouge · Silver · Rose Pink

HEX
#D8A3B1
RGB
rgb(216, 163, 177)
HSL
hsl(344, 40%, 74%)
HSB
hsb(344, 25%, 85%)
CMYK
cmyk(0%, 25%, 18%, 15%)
Oklch
oklch(76.9% 0.065 1.3)

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

#BBACBA

Mauve · Silver · Lilac Purple

HEX
#BBACBA
RGB
rgb(187, 172, 186)
HSL
hsl(304, 10%, 70%)
HSB
hsb(304, 8%, 73%)
CMYK
cmyk(0%, 8%, 1%, 27%)
Oklch
oklch(76.1% 0.026 327.9)

Traditional「Mauve」· Paint「Lilac Purple」· Creative Rose Petal

#9BB4C5

Sky Blue · DarkGray · Cobalt Blue

HEX
#9BB4C5
RGB
rgb(155, 180, 197)
HSL
hsl(204, 27%, 69%)
HSB
hsb(204, 21%, 77%)
CMYK
cmyk(21%, 9%, 0%, 23%)
Oklch
oklch(75.7% 0.037 237.7)

Traditional「Sky Blue」· Paint「Cobalt Blue」· Creative Twilight Haze

#73BDCE

Sky Blue · SkyBlue · Lake Green

HEX
#73BDCE
RGB
rgb(115, 189, 206)
HSL
hsl(191, 48%, 63%)
HSB
hsb(191, 44%, 81%)
CMYK
cmyk(44%, 8%, 0%, 19%)
Oklch
oklch(75.6% 0.078 214.0)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F48DAD
8BF4D2

Analogous

F48BE0
F48DAD
F49E8B

Triadic

F48DAD
ACF48B
8BACF4

Split-Comp.

F48DAD
8BF49E
8BE0F4

Tetradic

F48DAD
E0F48B
8BF4D2
9E8BF4

Contrast Matrix WCAG 2.1 Contrast

F48DAD
D8A3B1
BBACBA
9BB4C5
73BDCE
—
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
1.1
Fail
—
1.0
Fail
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.0
Fail
1.1
Fail
1.0
Fail
1.0
Fail
1.0
Fail
—
White BG
2.3Fail
2.1Fail
2.2Fail
2.2Fail
2.1Fail
Black BG
9.3AAA
9.8AAA
9.7AAA
9.7AAA
9.9AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C6A5
C1C1AE
B5B4B7
A6A6C1
9394CA

Deuteranopia

CDD5A3
C4C8AD
B5B7B6
A4A3C0
8F89C9

Tritanopia

EF9F9E
D5ABAA
BAB4B3
9CBEBD
77C7C6

Achromatopsia

AFAFAF
B4B4B4
B2B2B2
AEAEAE
A9A9A9

Shades & Tints Shades & Tints

#F48DAD

Dark
Light

#D8A3B1

Dark
Light

#BBACBA

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f48dad;
  --color-2: #d8a3b1;
  --color-3: #bbacba;
  --color-4: #9bb4c5;
  --color-5: #73bdce;
}

SCSS

$color-1: #f48dad;
$color-2: #d8a3b1;
$color-3: #bbacba;
$color-4: #9bb4c5;
$color-5: #73bdce;

TAILWIND

colors: {
  'brand-1': '#f48dad',
  'brand-2': '#d8a3b1',
  'brand-3': '#bbacba',
  'brand-4': '#9bb4c5',
  'brand-5': '#73bdce',
}

RGB Array

[244, 141, 173], [216, 163, 177], [187, 172, 186], [155, 180, 197], [115, 189, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F48DAD, #D8A3B1, #BBACBA, #9BB4C5, #73BDCE 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: #f48dad; --color-2: #d8a3b1; --color-3: #bbacba; --color-4: #9bb4c5; --color-5: #73bdce. 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