← Back to Editor

#F4F5F9 · #FF72A7 · #D1839B · #B190A5 · #8DA2C1

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

#F4F5F9

Azure · Snow · Sky Blue

HEX
#F4F5F9
RGB
rgb(244, 245, 249)
HSL
hsl(228, 29%, 97%)
HSB
hsb(228, 2%, 98%)
CMYK
cmyk(2%, 2%, 0%, 2%)
Oklch
oklch(97.1% 0.005 275.0)

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

#FF72A7

Rouge · LightCoral · Rose Pink

HEX
#FF72A7
RGB
rgb(255, 114, 167)
HSL
hsl(337, 100%, 72%)
HSB
hsb(337, 55%, 100%)
CMYK
cmyk(0%, 55%, 35%, 0%)
Oklch
oklch(73.5% 0.179 358.9)

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

#D1839B

Rouge · LightCoral · Rose Pink

HEX
#D1839B
RGB
rgb(209, 131, 155)
HSL
hsl(342, 46%, 67%)
HSB
hsb(342, 37%, 82%)
CMYK
cmyk(0%, 37%, 26%, 18%)
Oklch
oklch(69.8% 0.100 0.1)

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

#B190A5

Mauve · DarkGray · Rose Pink

HEX
#B190A5
RGB
rgb(177, 144, 165)
HSL
hsl(322, 17%, 63%)
HSB
hsb(322, 19%, 69%)
CMYK
cmyk(0%, 19%, 7%, 31%)
Oklch
oklch(69.0% 0.049 340.0)

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

#8DA2C1

Azure · DarkGray · Cobalt Blue

HEX
#8DA2C1
RGB
rgb(141, 162, 193)
HSL
hsl(216, 30%, 65%)
HSB
hsb(216, 27%, 76%)
CMYK
cmyk(27%, 16%, 0%, 24%)
Oklch
oklch(70.7% 0.051 258.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F4F5F9
FAF9F5

Analogous

F5F8FA
F4F5F9
F6F5FA

Triadic

F4F5F9
FAF5F6
F6FAF5

Split-Comp.

F4F5F9
FAF6F5
F8FAF5

Tetradic

F4F5F9
FAF5F8
FAF9F5
F5FAF6

Contrast Matrix WCAG 2.1 Contrast

F4F5F9
FF72A7
D1839B
B190A5
8DA2C1
—
2.3
Fail
2.6
Fail
2.6
Fail
2.4
Fail
2.3
Fail
—
1.1
Fail
1.1
Fail
1.0
Fail
2.6
Fail
1.1
Fail
—
1.0
Fail
1.1
Fail
2.6
Fail
1.1
Fail
1.0
Fail
—
1.1
Fail
2.4
Fail
1.0
Fail
1.1
Fail
1.1
Fail
—
White BG
1.1Fail
2.6Fail
2.8Fail
2.8Fail
2.6Fail
Black BG
19.3AAA
8.2AAA
7.4AAA
7.4AAA
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

F4F4F8
C2C19A
AFAF95
A3A2A0
9696B9

Deuteranopia

F4F4F8
CAD597
B4BA94
A5A79F
9593B8

Tritanopia

F4F7F7
F8908E
CD9190
AF9C9B
8EB4B2

Achromatopsia

F5F5F5
A2A2A2
9D9D9D
9C9C9C
9F9F9F

Shades & Tints Shades & Tints

#F4F5F9

Dark
Light

#FF72A7

Dark
Light

#D1839B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f4f5f9;
  --color-2: #ff72a7;
  --color-3: #d1839b;
  --color-4: #b190a5;
  --color-5: #8da2c1;
}

SCSS

$color-1: #f4f5f9;
$color-2: #ff72a7;
$color-3: #d1839b;
$color-4: #b190a5;
$color-5: #8da2c1;

TAILWIND

colors: {
  'brand-1': '#f4f5f9',
  'brand-2': '#ff72a7',
  'brand-3': '#d1839b',
  'brand-4': '#b190a5',
  'brand-5': '#8da2c1',
}

RGB Array

[244, 245, 249], [255, 114, 167], [209, 131, 155], [177, 144, 165], [141, 162, 193]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F4F5F9, #FF72A7, #D1839B, #B190A5, #8DA2C1 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: #f4f5f9; --color-2: #ff72a7; --color-3: #d1839b; --color-4: #b190a5; --color-5: #8da2c1. 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