← Back to Editor

#FF366B · #C56388 · #8B91A5 · #51BEC2 · #000517

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

#FF366B

Rouge · DeepPink · Rose Pink

HEX
#FF366B
RGB
rgb(255, 54, 107)
HSL
hsl(344, 100%, 61%)
HSB
hsb(344, 79%, 100%)
CMYK
cmyk(0%, 79%, 58%, 0%)
Oklch
oklch(65.9% 0.233 12.1)

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

#C56388

Dark Violet · LightCoral · Rose Pink

HEX
#C56388
RGB
rgb(197, 99, 136)
HSL
hsl(337, 46%, 58%)
HSB
hsb(337, 50%, 77%)
CMYK
cmyk(0%, 50%, 31%, 23%)
Oklch
oklch(62.6% 0.131 357.7)

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

#8B91A5

Azure · LightSlateGray · Navy Blue

HEX
#8B91A5
RGB
rgb(139, 145, 165)
HSL
hsl(226, 13%, 60%)
HSB
hsb(226, 16%, 65%)
CMYK
cmyk(16%, 12%, 0%, 35%)
Oklch
oklch(65.8% 0.030 272.3)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#51BEC2

Slate Blue · MediumTurquoise · Lake Green

HEX
#51BEC2
RGB
rgb(81, 190, 194)
HSL
hsl(182, 48%, 54%)
HSB
hsb(182, 58%, 76%)
CMYK
cmyk(58%, 2%, 0%, 24%)
Oklch
oklch(74.0% 0.099 198.6)

Traditional「Slate Blue」· Paint「Lake Green」· Creative Blush Sunrise

#000517

Indigo · Black · Deep Sea Blue

HEX
#000517
RGB
rgb(0, 5, 23)
HSL
hsl(227, 100%, 5%)
HSB
hsb(227, 100%, 9%)
CMYK
cmyk(100%, 78%, 0%, 91%)
Oklch
oklch(12.1% 0.046 258.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF366B
38FFCA

Analogous

FF38D1
FF366B
FF6738

Triadic

FF366B
6DFF38
386DFF

Split-Comp.

FF366B
38FF67
38D1FF

Tetradic

FF366B
D1FF38
38FFCA
6738FF

Contrast Matrix WCAG 2.1 Contrast

FF366B
C56388
8B91A5
51BEC2
000517
—
1.1
Fail
1.1
Fail
1.6
Fail
5.8
AA
1.1
Fail
—
1.2
Fail
1.7
Fail
5.3
AA
1.1
Fail
1.2
Fail
—
1.4
Fail
6.5
AA
1.6
Fail
1.7
Fail
1.4
Fail
—
9.2
AAA
5.8
AA
5.3
AA
6.5
AA
9.2
AAA
—
White BG
3.5AA Large
3.8AA Large
3.1AA Large
2.2Fail
20.3AAA
Black BG
6.0AA
5.5AA
6.7AA
9.5AAA
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A65E
9B9A7F
8E8EA0
8081C1
020213

Deuteranopia

B4C35B
A0A87D
8D8D9F
7A72C1
020212

Tritanopia

F55452
C07876
8B9C9C
56C0C0
000F0E

Achromatopsia

787878
858585
919191
9E9E9E
060606

Shades & Tints Shades & Tints

#FF366B

Dark
Light

#C56388

Dark
Light

#8B91A5

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff366b;
  --color-2: #c56388;
  --color-3: #8b91a5;
  --color-4: #51bec2;
  --color-5: #000517;
}

SCSS

$color-1: #ff366b;
$color-2: #c56388;
$color-3: #8b91a5;
$color-4: #51bec2;
$color-5: #000517;

TAILWIND

colors: {
  'brand-1': '#ff366b',
  'brand-2': '#c56388',
  'brand-3': '#8b91a5',
  'brand-4': '#51bec2',
  'brand-5': '#000517',
}

RGB Array

[255, 54, 107], [197, 99, 136], [139, 145, 165], [81, 190, 194], [0, 5, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF366B, #C56388, #8B91A5, #51BEC2, #000517 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: #ff366b; --color-2: #c56388; --color-3: #8b91a5; --color-4: #51bec2; --color-5: #000517. 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