← Back to Editor

#F288A6 · #D41F52 · #776B9A · #19B6E1 · #51D1F5

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial App

Color Details Color Details

#F288A6

Rouge · LightCoral · Rose Pink

HEX
#F288A6
RGB
rgb(242, 136, 166)
HSL
hsl(343, 80%, 74%)
HSB
hsb(343, 44%, 95%)
CMYK
cmyk(0%, 44%, 31%, 5%)
Oklch
oklch(74.9% 0.133 2.7)

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

#D41F52

Dark Violet · Crimson · Camellia

HEX
#D41F52
RGB
rgb(212, 31, 82)
HSL
hsl(343, 74%, 48%)
HSB
hsb(343, 85%, 83%)
CMYK
cmyk(0%, 85%, 61%, 17%)
Oklch
oklch(56.5% 0.211 12.8)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#776B9A

Deep Indigo · SlateGray · Navy Blue

HEX
#776B9A
RGB
rgb(119, 107, 154)
HSL
hsl(255, 19%, 51%)
HSB
hsb(255, 31%, 60%)
CMYK
cmyk(23%, 31%, 0%, 40%)
Oklch
oklch(55.7% 0.073 295.7)

Traditional「Deep Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

#19B6E1

Lake Blue · DarkTurquoise · Mint Ice

HEX
#19B6E1
RGB
rgb(25, 182, 225)
HSL
hsl(193, 80%, 49%)
HSB
hsb(193, 89%, 88%)
CMYK
cmyk(89%, 19%, 0%, 12%)
Oklch
oklch(72.2% 0.131 223.4)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#51D1F5

Sky Blue · MediumTurquoise · Lake Green

HEX
#51D1F5
RGB
rgb(81, 209, 245)
HSL
hsl(193, 89%, 64%)
HSB
hsb(193, 67%, 96%)
CMYK
cmyk(67%, 15%, 0%, 4%)
Oklch
oklch(80.4% 0.121 220.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F288A6
88F2D4

Analogous

F288DB
F288A6
F29F88

Triadic

F288A6
A6F288
88A6F2

Split-Comp.

F288A6
88F29F
88DBF2

Tetradic

F288A6
DBF288
88F2D4
9F88F2

Contrast Matrix WCAG 2.1 Contrast

F288A6
D41F52
776B9A
19B6E1
51D1F5
—
2.1
Fail
2.0
Fail
1.0
Fail
1.3
Fail
2.1
Fail
—
1.1
Fail
2.1
Fail
2.9
Fail
2.0
Fail
1.1
Fail
—
2.0
Fail
2.7
Fail
1.0
Fail
2.1
Fail
2.0
Fail
—
1.3
Fail
1.3
Fail
2.9
Fail
2.7
Fail
1.3
Fail
—
White BG
2.4Fail
5.1AA
4.8AA
2.4Fail
1.8Fail
Black BG
8.8AAA
4.1AA Large
4.4AA Large
8.8AAA
11.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C4C39F
868446
72728F
5D5ED7
888AEC

Deuteranopia

CAD29D
909E43
73738C
5448D4
8177EA

Tritanopia

ED9998
CB3C3A
768684
21CECD
57E5E4

Achromatopsia

ABABAB
5B5B5B
747474
8C8C8C
AFAFAF

Shades & Tints Shades & Tints

#F288A6

Dark
Light

#D41F52

Dark
Light

#776B9A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f288a6;
  --color-2: #d41f52;
  --color-3: #776b9a;
  --color-4: #19b6e1;
  --color-5: #51d1f5;
}

SCSS

$color-1: #f288a6;
$color-2: #d41f52;
$color-3: #776b9a;
$color-4: #19b6e1;
$color-5: #51d1f5;

TAILWIND

colors: {
  'brand-1': '#f288a6',
  'brand-2': '#d41f52',
  'brand-3': '#776b9a',
  'brand-4': '#19b6e1',
  'brand-5': '#51d1f5',
}

RGB Array

[242, 136, 166], [212, 31, 82], [119, 107, 154], [25, 182, 225], [81, 209, 245]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F288A6, #D41F52, #776B9A, #19B6E1, #51D1F5 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #f288a6; --color-2: #d41f52; --color-3: #776b9a; --color-4: #19b6e1; --color-5: #51d1f5. 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. 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