← Back to Editor

#458485 · #419596 · #3DA4A6 · #05F6FA · #071C1C

A 5-color palette 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

#458485

Slate Blue · SlateGray · Mint Ice

HEX
#458485
RGB
rgb(69, 132, 133)
HSL
hsl(181, 32%, 40%)
HSB
hsb(181, 48%, 52%)
CMYK
cmyk(48%, 1%, 0%, 48%)
Oklch
oklch(57.2% 0.065 196.8)

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

#419596

Slate Blue · CadetBlue · Mint Ice

HEX
#419596
RGB
rgb(65, 149, 150)
HSL
hsl(181, 40%, 42%)
HSB
hsb(181, 57%, 59%)
CMYK
cmyk(57%, 1%, 0%, 41%)
Oklch
oklch(61.9% 0.081 196.3)

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

#3DA4A6

Slate Blue · LightSeaGreen · Mint Ice

HEX
#3DA4A6
RGB
rgb(61, 164, 166)
HSL
hsl(181, 46%, 45%)
HSB
hsb(181, 63%, 65%)
CMYK
cmyk(63%, 1%, 0%, 35%)
Oklch
oklch(66.1% 0.093 197.0)

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

#05F6FA

Lake Blue · Cyan · Mint Ice

HEX
#05F6FA
RGB
rgb(5, 246, 250)
HSL
hsl(181, 96%, 50%)
HSB
hsb(181, 98%, 98%)
CMYK
cmyk(98%, 2%, 0%, 2%)
Oklch
oklch(88.3% 0.150 196.9)

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

#071C1C

Lake Blue · Black · Peacock Green

HEX
#071C1C
RGB
rgb(7, 28, 28)
HSL
hsl(180, 60%, 7%)
HSB
hsb(180, 75%, 11%)
CMYK
cmyk(75%, 0%, 0%, 89%)
Oklch
oklch(20.9% 0.027 195.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

458485
874645

Analogous

458767
458485
456587

Triadic

458485
874586
868745

Split-Comp.

458485
874565
876745

Tetradic

458485
674587
874645
658745

Contrast Matrix WCAG 2.1 Contrast

458485
419596
3DA4A6
05F6FA
071C1C
—
1.2
Fail
1.4
Fail
3.2
AA Large
4.1
AA Large
1.2
Fail
—
1.2
Fail
2.6
Fail
5.0
AA
1.4
Fail
1.2
Fail
—
2.2
Fail
5.9
AA
3.2
AA Large
2.6
Fail
2.2
Fail
—
13.1
AAA
4.1
AA Large
5.0
AA
5.9
AA
13.1
AAA
—
White BG
4.3AA Large
3.5AA Large
3.0Fail
1.3Fail
17.6AAA
Black BG
4.9AA
6.0AA
7.1AAA
15.6AAA
1.2Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

606185
656696
6A6BA6
6D70F9
10101C

Deuteranopia

5D5885
615A96
645CA5
5F4DF9
0F0D1C

Tritanopia

488585
459696
42A5A5
11F8F8
081C1C

Achromatopsia

717171
7C7C7C
858585
AEAEAE
161616

Shades & Tints Shades & Tints

#458485

Dark
Light

#419596

Dark
Light

#3DA4A6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #458485;
  --color-2: #419596;
  --color-3: #3da4a6;
  --color-4: #05f6fa;
  --color-5: #071c1c;
}

SCSS

$color-1: #458485;
$color-2: #419596;
$color-3: #3da4a6;
$color-4: #05f6fa;
$color-5: #071c1c;

TAILWIND

colors: {
  'brand-1': '#458485',
  'brand-2': '#419596',
  'brand-3': '#3da4a6',
  'brand-4': '#05f6fa',
  'brand-5': '#071c1c',
}

RGB Array

[69, 132, 133], [65, 149, 150], [61, 164, 166], [5, 246, 250], [7, 28, 28]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #458485, #419596, #3DA4A6, #05F6FA, #071C1C is ideal for: tech websites, dark mode UIs, game UIs, 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: #458485; --color-2: #419596; --color-3: #3da4a6; --color-4: #05f6fa; --color-5: #071c1c. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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 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