← Back to Editor

#1F2339 · #F54FBC · #C59FEB · #01DBE4 · #ABE3C4

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

#1F2339

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#1F2339
RGB
rgb(31, 35, 57)
HSL
hsl(231, 30%, 17%)
HSB
hsb(231, 46%, 22%)
CMYK
cmyk(46%, 39%, 0%, 78%)
Oklch
oklch(26.3% 0.042 275.3)

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

#F54FBC

Mauve · Orchid · Rose Pink

HEX
#F54FBC
RGB
rgb(245, 79, 188)
HSL
hsl(321, 89%, 64%)
HSB
hsb(321, 68%, 96%)
CMYK
cmyk(0%, 68%, 23%, 4%)
Oklch
oklch(68.9% 0.228 344.4)

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

#C59FEB

Lilac · LightSteelBlue · Lilac Purple

HEX
#C59FEB
RGB
rgb(197, 159, 235)
HSL
hsl(270, 66%, 77%)
HSB
hsb(270, 32%, 92%)
CMYK
cmyk(16%, 32%, 0%, 8%)
Oklch
oklch(76.4% 0.113 306.8)

Traditional「Lilac」· Paint「Lilac Purple」· Creative Lavender Dream

#01DBE4

Lake Blue · DarkTurquoise · Mint Ice

HEX
#01DBE4
RGB
rgb(1, 219, 228)
HSL
hsl(182, 99%, 45%)
HSB
hsb(182, 100%, 89%)
CMYK
cmyk(100%, 4%, 0%, 11%)
Oklch
oklch(81.0% 0.138 200.1)

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

#ABE3C4

Celadon · LightBlue · Apple Green

HEX
#ABE3C4
RGB
rgb(171, 227, 196)
HSL
hsl(147, 50%, 78%)
HSB
hsb(147, 25%, 89%)
CMYK
cmyk(25%, 0%, 14%, 11%)
Oklch
oklch(86.9% 0.072 160.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1F2339
38341E

Analogous

1E2F38
1F2339
271E38

Triadic

1F2339
381E22
22381E

Split-Comp.

1F2339
38271E
2F381E

Tetradic

1F2339
381E2F
38341E
1E3827

Contrast Matrix WCAG 2.1 Contrast

1F2339
F54FBC
C59FEB
01DBE4
ABE3C4
—
5.0
AA
7.0
AAA
9.0
AAA
10.7
AAA
5.0
AA
—
1.4
Fail
1.8
Fail
2.2
Fail
7.0
AAA
1.4
Fail
—
1.3
Fail
1.5
Fail
9.0
AAA
1.8
Fail
1.3
Fail
—
1.2
Fail
10.7
AAA
2.2
Fail
1.5
Fail
1.2
Fail
—
White BG
15.5AAA
3.1AA Large
2.2Fail
1.7Fail
1.4Fail
Black BG
1.4Fail
6.7AA
9.5AAA
12.3AAA
14.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

212134
ADACA2
B5B4D9
5F61E2
C3C4CC

Deuteranopia

212032
B7C39B
B7BAD4
5342E1
C0BCCD

Tritanopia

1F2F2F
ED8D88
C3CAC7
0CE0E0
AED1D3

Achromatopsia

242424
8D8D8D
B3B3B3
9B9B9B
CFCFCF

Shades & Tints Shades & Tints

#1F2339

Dark
Light

#F54FBC

Dark
Light

#C59FEB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1f2339;
  --color-2: #f54fbc;
  --color-3: #c59feb;
  --color-4: #01dbe4;
  --color-5: #abe3c4;
}

SCSS

$color-1: #1f2339;
$color-2: #f54fbc;
$color-3: #c59feb;
$color-4: #01dbe4;
$color-5: #abe3c4;

TAILWIND

colors: {
  'brand-1': '#1f2339',
  'brand-2': '#f54fbc',
  'brand-3': '#c59feb',
  'brand-4': '#01dbe4',
  'brand-5': '#abe3c4',
}

RGB Array

[31, 35, 57], [245, 79, 188], [197, 159, 235], [1, 219, 228], [171, 227, 196]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1F2339, #F54FBC, #C59FEB, #01DBE4, #ABE3C4 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: #1f2339; --color-2: #f54fbc; --color-3: #c59feb; --color-4: #01dbe4; --color-5: #abe3c4. 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