← Back to Editor

#58A2A9 · #81B3AE · #9FCFC6 · #D6F396 · #D6FEE6

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#58A2A9

Slate Blue · CadetBlue · Mint Ice

HEX
#58A2A9
RGB
rgb(88, 162, 169)
HSL
hsl(185, 32%, 50%)
HSB
hsb(185, 48%, 66%)
CMYK
cmyk(48%, 4%, 0%, 34%)
Oklch
oklch(66.7% 0.074 203.5)

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

#81B3AE

Mineral Blue · DarkSeaGreen · Lake Green

HEX
#81B3AE
RGB
rgb(129, 179, 174)
HSL
hsl(174, 25%, 60%)
HSB
hsb(174, 28%, 70%)
CMYK
cmyk(28%, 0%, 3%, 30%)
Oklch
oklch(73.0% 0.053 188.3)

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

#9FCFC6

Jade · LightSteelBlue · Lake Green

HEX
#9FCFC6
RGB
rgb(159, 207, 198)
HSL
hsl(169, 33%, 72%)
HSB
hsb(169, 23%, 81%)
CMYK
cmyk(23%, 0%, 4%, 19%)
Oklch
oklch(81.8% 0.052 182.2)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#D6F396

Willow Green · Khaki · Apple Green

HEX
#D6F396
RGB
rgb(214, 243, 150)
HSL
hsl(79, 79%, 77%)
HSB
hsb(79, 38%, 95%)
CMYK
cmyk(12%, 0%, 38%, 5%)
Oklch
oklch(92.2% 0.122 122.9)

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

#D6FEE6

Emerald · Beige · Mint Green

HEX
#D6FEE6
RGB
rgb(214, 254, 230)
HSL
hsl(144, 95%, 92%)
HSB
hsb(144, 16%, 100%)
CMYK
cmyk(16%, 0%, 9%, 0%)
Oklch
oklch(96.2% 0.052 158.9)

Traditional「Emerald」· Paint「Mint Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

58A2A9
A85D57

Analogous

57A886
58A2A9
5779A8

Triadic

58A2A9
A857A2
A2A857

Split-Comp.

58A2A9
A85779
A88657

Tetradic

58A2A9
8657A8
A85D57
79A857

Contrast Matrix WCAG 2.1 Contrast

58A2A9
81B3AE
9FCFC6
D6F396
D6FEE6
—
1.3
Fail
1.7
Fail
2.4
Fail
2.7
Fail
1.3
Fail
—
1.4
Fail
1.9
Fail
2.1
Fail
1.7
Fail
1.4
Fail
—
1.4
Fail
1.6
Fail
2.4
Fail
1.9
Fail
1.4
Fail
—
1.1
Fail
2.7
Fail
2.1
Fail
1.6
Fail
1.1
Fail
—
White BG
2.9Fail
2.3Fail
1.7Fail
1.2Fail
1.1Fail
Black BG
7.2AAA
9.0AAA
12.2AAA
17.1AAA
19.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7879A7
9797AF
B4B4C8
E3E3AD
E7E8EC

Deuteranopia

746EA7
9490B0
B1ADC9
E1DFB2
E5E2ED

Tritanopia

5CA6A6
84B0B0
A1CACA
D7BEC2
D8F0F1

Achromatopsia

8D8D8D
A3A3A3
C0C0C0
E0E0E0
EFEFEF

Shades & Tints Shades & Tints

#58A2A9

Dark
Light

#81B3AE

Dark
Light

#9FCFC6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #58a2a9;
  --color-2: #81b3ae;
  --color-3: #9fcfc6;
  --color-4: #d6f396;
  --color-5: #d6fee6;
}

SCSS

$color-1: #58a2a9;
$color-2: #81b3ae;
$color-3: #9fcfc6;
$color-4: #d6f396;
$color-5: #d6fee6;

TAILWIND

colors: {
  'brand-1': '#58a2a9',
  'brand-2': '#81b3ae',
  'brand-3': '#9fcfc6',
  'brand-4': '#d6f396',
  'brand-5': '#d6fee6',
}

RGB Array

[88, 162, 169], [129, 179, 174], [159, 207, 198], [214, 243, 150], [214, 254, 230]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #58A2A9, #81B3AE, #9FCFC6, #D6F396, #D6FEE6 is ideal for: health products, baby brands, fresh-style blogs, 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: #58a2a9; --color-2: #81b3ae; --color-3: #9fcfc6; --color-4: #d6f396; --color-5: #d6fee6. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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