← Back to Editor

#F24B88 · #F27EA9 · #40012F · #BFD9C3 · #F2E2CE

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarm

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#F24B88

Rouge · LightCoral · Rose Pink

HEX
#F24B88
RGB
rgb(242, 75, 136)
HSL
hsl(338, 87%, 62%)
HSB
hsb(338, 69%, 95%)
CMYK
cmyk(0%, 69%, 44%, 5%)
Oklch
oklch(66.3% 0.207 2.4)

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

#F27EA9

Rouge · LightCoral · Rose Pink

HEX
#F27EA9
RGB
rgb(242, 126, 169)
HSL
hsl(338, 82%, 72%)
HSB
hsb(338, 48%, 95%)
CMYK
cmyk(0%, 48%, 30%, 5%)
Oklch
oklch(73.5% 0.149 357.9)

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

#40012F

Rose Purple · Black · Dark Purple

HEX
#40012F
RGB
rgb(64, 1, 47)
HSL
hsl(316, 97%, 13%)
HSB
hsb(316, 98%, 25%)
CMYK
cmyk(0%, 98%, 27%, 75%)
Oklch
oklch(25.0% 0.106 342.5)

Traditional「Rose Purple」· Paint「Dark Purple」· Creative Blush Sunrise

#BFD9C3

Celadon · Silver · Apple Green

HEX
#BFD9C3
RGB
rgb(191, 217, 195)
HSL
hsl(129, 25%, 80%)
HSB
hsb(129, 12%, 85%)
CMYK
cmyk(12%, 0%, 10%, 15%)
Oklch
oklch(86.0% 0.041 149.7)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#F2E2CE

Goose Yellow · Bisque · Peach Orange

HEX
#F2E2CE
RGB
rgb(242, 226, 206)
HSL
hsl(33, 58%, 88%)
HSB
hsb(33, 15%, 95%)
CMYK
cmyk(0%, 7%, 15%, 5%)
Oklch
oklch(92.0% 0.032 73.5)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F24B88
4AF2B5

Analogous

F24ADC
F24B88
F2604A

Triadic

F24B88
88F24A
4A88F2

Split-Comp.

F24B88
4AF260
4ADCF2

Tetradic

F24B88
DCF24A
4AF2B5
604AF2

Contrast Matrix WCAG 2.1 Contrast

F24B88
F27EA9
40012F
BFD9C3
F2E2CE
—
1.4
Fail
4.9
AA
2.3
Fail
2.7
Fail
1.4
Fail
—
6.6
AA
1.7
Fail
2.0
Fail
4.9
AA
6.6
AA
—
11.0
AAA
13.1
AAA
2.3
Fail
1.7
Fail
11.0
AAA
—
1.2
Fail
2.7
Fail
2.0
Fail
13.1
AAA
1.2
Fail
—
White BG
3.4AA Large
2.5Fail
16.6AAA
1.5Fail
1.3Fail
Black BG
6.1AA
8.3AAA
1.3Fail
13.9AAA
16.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

AAA879
C0BF9F
252424
CACAC8
EBEBD3

Deuteranopia

B3C076
C7CF9C
282D21
C9C7CA
ECEDD4

Tritanopia

EA6E6B
EC9695
3D1B19
C0CDCD
F1D7D8

Achromatopsia

848484
A6A6A6
191919
CFCFCF
E5E5E5

Shades & Tints Shades & Tints

#F24B88

Dark
Light

#F27EA9

Dark
Light

#40012F

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f24b88;
  --color-2: #f27ea9;
  --color-3: #40012f;
  --color-4: #bfd9c3;
  --color-5: #f2e2ce;
}

SCSS

$color-1: #f24b88;
$color-2: #f27ea9;
$color-3: #40012f;
$color-4: #bfd9c3;
$color-5: #f2e2ce;

TAILWIND

colors: {
  'brand-1': '#f24b88',
  'brand-2': '#f27ea9',
  'brand-3': '#40012f',
  'brand-4': '#bfd9c3',
  'brand-5': '#f2e2ce',
}

RGB Array

[242, 75, 136], [242, 126, 169], [64, 1, 47], [191, 217, 195], [242, 226, 206]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F24B88, #F27EA9, #40012F, #BFD9C3, #F2E2CE is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f24b88; --color-2: #f27ea9; --color-3: #40012f; --color-4: #bfd9c3; --color-5: #f2e2ce. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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