← Back to Editor

#F02B7A · #F081AE · #F09CBD · #F0DDE4 · #FFFFFF

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

WorkspaceReadingData Visualization

Color Details Color Details

#F02B7A

Dark Violet · DeepPink · Rose Pink

HEX
#F02B7A
RGB
rgb(240, 43, 122)
HSL
hsl(336, 87%, 55%)
HSB
hsb(336, 82%, 94%)
CMYK
cmyk(0%, 82%, 49%, 6%)
Oklch
oklch(63.1% 0.232 3.7)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#F081AE

Rouge · LightCoral · Rose Pink

HEX
#F081AE
RGB
rgb(240, 129, 174)
HSL
hsl(336, 79%, 72%)
HSB
hsb(336, 46%, 94%)
CMYK
cmyk(0%, 46%, 27%, 6%)
Oklch
oklch(73.8% 0.144 355.5)

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

#F09CBD

Rouge · LightPink · Cherry Blossom

HEX
#F09CBD
RGB
rgb(240, 156, 189)
HSL
hsl(336, 74%, 78%)
HSB
hsb(336, 35%, 94%)
CMYK
cmyk(0%, 35%, 21%, 6%)
Oklch
oklch(78.6% 0.108 354.7)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#F0DDE4

Rouge · Linen · Cherry Blossom

HEX
#F0DDE4
RGB
rgb(240, 221, 228)
HSL
hsl(338, 39%, 90%)
HSB
hsb(338, 8%, 94%)
CMYK
cmyk(0%, 8%, 5%, 6%)
Oklch
oklch(91.5% 0.023 353.2)

Traditional「Rouge」· Paint「Cherry Blossom」· Creative Rose Petal

#FFFFFF

Moonlight White · White · Cloud White

HEX
#FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
HSB
hsb(0, 0%, 100%)
CMYK
cmyk(0%, 0%, 0%, 0%)
Oklch
oklch(100.0% 0.000 89.9)

Traditional「Moonlight White」· Paint「Cloud White」· Creative Morning Mist

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F02B7A
28F0A0

Analogous

F028DC
F02B7A
F03C28

Triadic

F02B7A
78F028
2878F0

Split-Comp.

F02B7A
28F03C
28DCF0

Tetradic

F02B7A
DCF028
28F0A0
3C28F0

Contrast Matrix WCAG 2.1 Contrast

F02B7A
F081AE
F09CBD
F0DDE4
FFFFFF
—
1.6
Fail
1.9
Fail
3.0
AA Large
3.9
AA Large
1.6
Fail
—
1.2
Fail
1.9
Fail
2.5
Fail
1.9
Fail
1.2
Fail
—
1.6
Fail
2.1
Fail
3.0
AA Large
1.9
Fail
1.6
Fail
—
1.3
Fail
3.9
AA Large
2.5
Fail
2.1
Fail
1.3
Fail
—
White BG
3.9AA Large
2.5Fail
2.1Fail
1.3Fail
1.0Fail
Black BG
5.3AA
8.5AAA
10.2AAA
16.2AAA
21.0AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

9B9967
C0BFA3
CCCBB5
E8E8E2
FFFFFF

Deuteranopia

A6B562
C6CFA1
D1D7B3
E9EAE2
FFFFFF

Tritanopia

E65854
EA9B99
ECAFAD
EFE1E1
FFFFFF

Achromatopsia

6F6F6F
A7A7A7
B9B9B9
E3E3E3
FFFFFF

Shades & Tints Shades & Tints

#F02B7A

Dark
Light

#F081AE

Dark
Light

#F09CBD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f02b7a;
  --color-2: #f081ae;
  --color-3: #f09cbd;
  --color-4: #f0dde4;
  --color-5: #ffffff;
}

SCSS

$color-1: #f02b7a;
$color-2: #f081ae;
$color-3: #f09cbd;
$color-4: #f0dde4;
$color-5: #ffffff;

TAILWIND

colors: {
  'brand-1': '#f02b7a',
  'brand-2': '#f081ae',
  'brand-3': '#f09cbd',
  'brand-4': '#f0dde4',
  'brand-5': '#ffffff',
}

RGB Array

[240, 43, 122], [240, 129, 174], [240, 156, 189], [240, 221, 228], [255, 255, 255]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F02B7A, #F081AE, #F09CBD, #F0DDE4, #FFFFFF is ideal for: health products, baby brands, fresh-style blogs, infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #f02b7a; --color-2: #f081ae; --color-3: #f09cbd; --color-4: #f0dde4; --color-5: #ffffff. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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