← Back to Editor

#58F8FF · #58CDD8 · #58A3B0 · #587889 · #0C1214

sunset

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#58F8FF

Sky Blue · Turquoise · Lake Green

HEX
#58F8FF
RGB
rgb(88, 248, 255)
HSL
hsl(183, 100%, 67%)
HSB
hsb(183, 65%, 100%)
CMYK
cmyk(65%, 3%, 0%, 0%)
Oklch
oklch(90.0% 0.131 199.3)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#58CDD8

Lake Blue · MediumTurquoise · Lake Green

HEX
#58CDD8
RGB
rgb(88, 205, 216)
HSL
hsl(185, 62%, 60%)
HSB
hsb(185, 59%, 85%)
CMYK
cmyk(59%, 5%, 0%, 15%)
Oklch
oklch(78.6% 0.105 203.8)

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

#58A3B0

Slate Blue · CadetBlue · Lake Green

HEX
#58A3B0
RGB
rgb(88, 163, 176)
HSL
hsl(189, 36%, 52%)
HSB
hsb(189, 50%, 69%)
CMYK
cmyk(50%, 7%, 0%, 31%)
Oklch
oklch(67.2% 0.077 210.0)

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

#587889

Slate Blue · SlateGray · Navy Blue

HEX
#587889
RGB
rgb(88, 120, 137)
HSL
hsl(201, 22%, 44%)
HSB
hsb(201, 36%, 54%)
CMYK
cmyk(36%, 12%, 0%, 46%)
Oklch
oklch(55.5% 0.045 231.8)

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

#0C1214

Slate Blue · Black · Peacock Green

HEX
#0C1214
RGB
rgb(12, 18, 20)
HSL
hsl(195, 25%, 6%)
HSB
hsb(195, 40%, 8%)
CMYK
cmyk(40%, 10%, 0%, 92%)
Oklch
oklch(17.7% 0.010 220.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

58F8FF
FF5F57

Analogous

57FFB3
58F8FF
57A2FF

Triadic

58F8FF
FF57F7
F7FF57

Split-Comp.

58F8FF
FF57A2
FFB357

Tetradic

58F8FF
B357FF
FF5F57
A2FF57

Contrast Matrix WCAG 2.1 Contrast

58F8FF
58CDD8
58A3B0
587889
0C1214
—
1.5
Fail
2.2
Fail
3.6
AA Large
14.6
AAA
1.5
Fail
—
1.5
Fail
2.5
Fail
10.0
AAA
2.2
Fail
1.5
Fail
—
1.6
Fail
6.5
AA
3.6
AA Large
2.5
Fail
1.6
Fail
—
4.0
AA Large
14.6
AAA
10.0
AAA
6.5
AA
4.0
AA Large
—
White BG
1.3Fail
1.9Fail
2.9Fail
4.7AA
18.9AAA
Black BG
16.3AAA
11.1AAA
7.3AAA
4.5AA Large
1.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

9D9FFD
8B8CD5
7879AD
666685
0F0F14

Deuteranopia

9488FD
847BD5
746FAC
646284
0E0E13

Tritanopia

60FCFC
5ED3D3
5CAAAA
5A8281
0C1313

Achromatopsia

C9C9C9
ABABAB
8E8E8E
707070
101010

Shades & Tints Shades & Tints

#58F8FF

Dark
Light

#58CDD8

Dark
Light

#58A3B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #58f8ff;
  --color-2: #58cdd8;
  --color-3: #58a3b0;
  --color-4: #587889;
  --color-5: #0c1214;
}

SCSS

$color-1: #58f8ff;
$color-2: #58cdd8;
$color-3: #58a3b0;
$color-4: #587889;
$color-5: #0c1214;

TAILWIND

colors: {
  'brand-1': '#58f8ff',
  'brand-2': '#58cdd8',
  'brand-3': '#58a3b0',
  'brand-4': '#587889',
  'brand-5': '#0c1214',
}

RGB Array

[88, 248, 255], [88, 205, 216], [88, 163, 176], [88, 120, 137], [12, 18, 20]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This sunset-style palette of #58F8FF, #58CDD8, #58A3B0, #587889, #0C1214 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #58f8ff; --color-2: #58cdd8; --color-3: #58a3b0; --color-4: #587889; --color-5: #0c1214. 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 sunset-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