← Back to Editor

#F84272 · #AE9E9E · #D32A6D · #B81B6A · #952B59

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#F84272

Rouge · Tomato · Rose Pink

HEX
#F84272
RGB
rgb(248, 66, 114)
HSL
hsl(344, 93%, 62%)
HSB
hsb(344, 73%, 97%)
CMYK
cmyk(0%, 73%, 54%, 3%)
Oklch
oklch(65.8% 0.218 10.3)

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

#AE9E9E

Peach Pink · DarkGray · Silver Sand

HEX
#AE9E9E
RGB
rgb(174, 158, 158)
HSL
hsl(0, 9%, 65%)
HSB
hsb(0, 9%, 68%)
CMYK
cmyk(0%, 9%, 9%, 32%)
Oklch
oklch(71.3% 0.019 17.6)

Traditional「Peach Pink」· Paint「Silver Sand」· Creative Urban Concrete

#D32A6D

Dark Violet · MediumVioletRed · Camellia

HEX
#D32A6D
RGB
rgb(211, 42, 109)
HSL
hsl(336, 67%, 50%)
HSB
hsb(336, 80%, 83%)
CMYK
cmyk(0%, 80%, 48%, 17%)
Oklch
oklch(57.7% 0.207 3.2)

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

#B81B6A

Dark Violet · MediumVioletRed · Camellia

HEX
#B81B6A
RGB
rgb(184, 27, 106)
HSL
hsl(330, 74%, 41%)
HSB
hsb(330, 85%, 72%)
CMYK
cmyk(0%, 85%, 42%, 28%)
Oklch
oklch(51.9% 0.197 357.1)

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

#952B59

Dark Violet · Brown · Camellia

HEX
#952B59
RGB
rgb(149, 43, 89)
HSL
hsl(334, 55%, 38%)
HSB
hsb(334, 71%, 58%)
CMYK
cmyk(0%, 71%, 40%, 42%)
Oklch
oklch(46.5% 0.147 358.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F84272
44F8C8

Analogous

F844CE
F84272
F86E44

Triadic

F84272
74F844
4474F8

Split-Comp.

F84272
44F86E
44CEF8

Tetradic

F84272
CEF844
44F8C8
6E44F8

Contrast Matrix WCAG 2.1 Contrast

F84272
AE9E9E
D32A6D
B81B6A
952B59
—
1.4
Fail
1.4
Fail
1.8
Fail
2.2
Fail
1.4
Fail
—
1.9
Fail
2.4
Fail
3.0
Fail
1.4
Fail
1.9
Fail
—
1.3
Fail
1.6
Fail
1.8
Fail
2.4
Fail
1.3
Fail
—
1.2
Fail
2.2
Fail
3.0
Fail
1.6
Fail
1.2
Fail
—
White BG
3.5AA Large
2.6Fail
4.9AA
6.2AA
7.6AAA
Black BG
6.0AA
8.2AAA
4.3AA Large
3.4AA Large
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A9A866
A7A79E
8A885D
747357
67664E

Deuteranopia

B4C164
A8A99E
94A059
7D8952
6D754B

Tritanopia

EF5D5B
AD9E9E
CB504D
B04844
904543

Achromatopsia

7E7E7E
A3A3A3
646464
535353
505050

Shades & Tints Shades & Tints

#F84272

Dark
Light

#AE9E9E

Dark
Light

#D32A6D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f84272;
  --color-2: #ae9e9e;
  --color-3: #d32a6d;
  --color-4: #b81b6a;
  --color-5: #952b59;
}

SCSS

$color-1: #f84272;
$color-2: #ae9e9e;
$color-3: #d32a6d;
$color-4: #b81b6a;
$color-5: #952b59;

TAILWIND

colors: {
  'brand-1': '#f84272',
  'brand-2': '#ae9e9e',
  'brand-3': '#d32a6d',
  'brand-4': '#b81b6a',
  'brand-5': '#952b59',
}

RGB Array

[248, 66, 114], [174, 158, 158], [211, 42, 109], [184, 27, 106], [149, 43, 89]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F84272, #AE9E9E, #D32A6D, #B81B6A, #952B59 is ideal for: corporate websites, product showcases, portfolios. 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: #f84272; --color-2: #ae9e9e; --color-3: #d32a6d; --color-4: #b81b6a; --color-5: #952b59. 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 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