← Back to Editor

#58808C · #553C6B · #F294A2 · #FFB9B5 · #FFD3C7

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 AppData Visualization

Color Details Color Details

#58808C

Slate Blue · SlateGray · Mint Ice

HEX
#58808C
RGB
rgb(88, 128, 140)
HSL
hsl(194, 23%, 45%)
HSB
hsb(194, 37%, 55%)
CMYK
cmyk(37%, 9%, 0%, 45%)
Oklch
oklch(57.5% 0.048 218.5)

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

#553C6B

Dark Plum · DarkSlateBlue · Eggplant

HEX
#553C6B
RGB
rgb(85, 60, 107)
HSL
hsl(272, 28%, 33%)
HSB
hsb(272, 44%, 42%)
CMYK
cmyk(21%, 44%, 0%, 58%)
Oklch
oklch(40.5% 0.082 307.6)

Traditional「Dark Plum」· Paint「Eggplant」· Creative Blush Sunrise

#F294A2

Peach Pink · LightCoral · Coral Red

HEX
#F294A2
RGB
rgb(242, 148, 162)
HSL
hsl(351, 78%, 76%)
HSB
hsb(351, 39%, 95%)
CMYK
cmyk(0%, 39%, 33%, 5%)
Oklch
oklch(76.7% 0.114 10.5)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Rose Petal

#FFB9B5

Peach Pink · LightPink · Cherry Blossom

HEX
#FFB9B5
RGB
rgb(255, 185, 181)
HSL
hsl(3, 100%, 85%)
HSB
hsb(3, 29%, 100%)
CMYK
cmyk(0%, 27%, 29%, 0%)
Oklch
oklch(85.0% 0.082 22.6)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FFD3C7

Peach Pink · Bisque · Cherry Blossom

HEX
#FFD3C7
RGB
rgb(255, 211, 199)
HSL
hsl(13, 100%, 89%)
HSB
hsb(13, 22%, 100%)
CMYK
cmyk(0%, 17%, 22%, 0%)
Oklch
oklch(90.1% 0.052 35.7)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

58808C
8D6558

Analogous

588D7F
58808C
58668D

Triadic

58808C
8D5881
818D58

Split-Comp.

58808C
8D5866
8D7F58

Tetradic

58808C
7F588D
8D6558
668D58

Contrast Matrix WCAG 2.1 Contrast

58808C
553C6B
F294A2
FFB9B5
FFD3C7
—
2.2
Fail
2.0
Fail
2.6
Fail
3.2
AA Large
2.2
Fail
—
4.2
AA Large
5.7
AA
6.9
AA
2.0
Fail
4.2
AA Large
—
1.3
Fail
1.6
Fail
2.6
Fail
5.7
AA
1.3
Fail
—
1.2
Fail
3.2
AA Large
6.9
AA
1.6
Fail
1.2
Fail
—
White BG
4.3AA Large
9.4AAA
2.2Fail
1.6Fail
1.4Fail
Black BG
4.9AA
2.2Fail
9.5AAA
12.9AAA
15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

696A89
4A4A60
C9C89F
E1E0B6
ECECCA

Deuteranopia

676488
4C4E5D
CFD69E
E5EAB6
EFF2CB

Tritanopia

5A8786
545755
ED9C9B
FCB7B7
FDCCCD

Achromatopsia

757575
494949
B2B2B2
CDCDCD
DFDFDF

Shades & Tints Shades & Tints

#58808C

Dark
Light

#553C6B

Dark
Light

#F294A2

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #58808c;
  --color-2: #553c6b;
  --color-3: #f294a2;
  --color-4: #ffb9b5;
  --color-5: #ffd3c7;
}

SCSS

$color-1: #58808c;
$color-2: #553c6b;
$color-3: #f294a2;
$color-4: #ffb9b5;
$color-5: #ffd3c7;

TAILWIND

colors: {
  'brand-1': '#58808c',
  'brand-2': '#553c6b',
  'brand-3': '#f294a2',
  'brand-4': '#ffb9b5',
  'brand-5': '#ffd3c7',
}

RGB Array

[88, 128, 140], [85, 60, 107], [242, 148, 162], [255, 185, 181], [255, 211, 199]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #58808C, #553C6B, #F294A2, #FFB9B5, #FFD3C7 is ideal for: social media posters, mobile apps, e-commerce promos, health products, baby brands, fresh-style blogs, 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: #58808c; --color-2: #553c6b; --color-3: #f294a2; --color-4: #ffb9b5; --color-5: #ffd3c7. 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 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