← Back to Editor

#58BDAF · #FCE49C · #F1905B · #5D5D8F · #030538

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

#58BDAF

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#58BDAF
RGB
rgb(88, 189, 175)
HSL
hsl(172, 43%, 54%)
HSB
hsb(172, 53%, 74%)
CMYK
cmyk(53%, 0%, 7%, 26%)
Oklch
oklch(73.4% 0.097 183.3)

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

#FCE49C

Goose Yellow · Khaki · Lemon Cream

HEX
#FCE49C
RGB
rgb(252, 228, 156)
HSL
hsl(45, 94%, 80%)
HSB
hsb(45, 38%, 99%)
CMYK
cmyk(0%, 10%, 38%, 1%)
Oklch
oklch(92.2% 0.094 91.8)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F1905B

Apricot · SandyBrown · Warm Sun

HEX
#F1905B
RGB
rgb(241, 144, 91)
HSL
hsl(21, 84%, 65%)
HSB
hsb(21, 62%, 95%)
CMYK
cmyk(0%, 40%, 62%, 5%)
Oklch
oklch(74.5% 0.136 48.3)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

#5D5D8F

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#5D5D8F
RGB
rgb(93, 93, 143)
HSL
hsl(240, 21%, 46%)
HSB
hsb(240, 35%, 56%)
CMYK
cmyk(35%, 35%, 0%, 44%)
Oklch
oklch(50.0% 0.079 283.2)

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

#030538

Indigo · Black · Deep Sea Blue

HEX
#030538
RGB
rgb(3, 5, 56)
HSL
hsl(238, 90%, 12%)
HSB
hsb(238, 95%, 22%)
CMYK
cmyk(95%, 91%, 0%, 78%)
Oklch
oklch(17.0% 0.096 268.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

58BDAF
BC5765

Analogous

57BC7C
58BDAF
5797BC

Triadic

58BDAF
AF57BC
BCAF57

Split-Comp.

58BDAF
BC5797
BC7C57

Tetradic

58BDAF
7C57BC
BC5765
97BC57

Contrast Matrix WCAG 2.1 Contrast

58BDAF
FCE49C
F1905B
5D5D8F
030538
—
1.8
Fail
1.0
Fail
2.7
Fail
8.6
AAA
1.8
Fail
—
1.9
Fail
4.9
AA
15.4
AAA
1.0
Fail
1.9
Fail
—
2.6
Fail
8.2
AAA
2.7
Fail
4.9
AA
2.6
Fail
—
3.2
AA Large
8.6
AAA
15.4
AAA
8.2
AAA
3.2
AA Large
—
White BG
2.3Fail
1.3Fail
2.4Fail
6.1AA
19.4AAA
Black BG
9.3AAA
16.7AAA
8.9AAA
3.4AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8485B2
F2F1AD
C7C668
5D5D83
04042C

Deuteranopia

7E76B3
F3F5B2
CDD46B
5D5D80
040429

Tritanopia

5DB5B6
FBBBBE
EC7274
5D7977
032220

Achromatopsia

9D9D9D
E3E3E3
A7A7A7
636363
0A0A0A

Shades & Tints Shades & Tints

#58BDAF

Dark
Light

#FCE49C

Dark
Light

#F1905B

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #58bdaf;
  --color-2: #fce49c;
  --color-3: #f1905b;
  --color-4: #5d5d8f;
  --color-5: #030538;
}

SCSS

$color-1: #58bdaf;
$color-2: #fce49c;
$color-3: #f1905b;
$color-4: #5d5d8f;
$color-5: #030538;

TAILWIND

colors: {
  'brand-1': '#58bdaf',
  'brand-2': '#fce49c',
  'brand-3': '#f1905b',
  'brand-4': '#5d5d8f',
  'brand-5': '#030538',
}

RGB Array

[88, 189, 175], [252, 228, 156], [241, 144, 91], [93, 93, 143], [3, 5, 56]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #58BDAF, #FCE49C, #F1905B, #5D5D8F, #030538 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: #58bdaf; --color-2: #fce49c; --color-3: #f1905b; --color-4: #5d5d8f; --color-5: #030538. 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