← Back to Editor

#5F756F · #98CCCC · #F5FAF4 · #9DC29F · #5F7560

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

#5F756F

Mineral Blue · DimGray · Mint Ice

HEX
#5F756F
RGB
rgb(95, 117, 111)
HSL
hsl(164, 10%, 42%)
HSB
hsb(164, 19%, 46%)
CMYK
cmyk(19%, 0%, 5%, 54%)
Oklch
oklch(54.3% 0.028 176.8)

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

#98CCCC

Sky Blue · LightSteelBlue · Lake Green

HEX
#98CCCC
RGB
rgb(152, 204, 204)
HSL
hsl(180, 34%, 70%)
HSB
hsb(180, 25%, 80%)
CMYK
cmyk(25%, 0%, 0%, 20%)
Oklch
oklch(80.9% 0.054 196.1)

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

#F5FAF4

Celadon · Snow · Mint Green

HEX
#F5FAF4
RGB
rgb(245, 250, 244)
HSL
hsl(110, 37%, 97%)
HSB
hsb(110, 2%, 98%)
CMYK
cmyk(2%, 0%, 2%, 2%)
Oklch
oklch(98.0% 0.009 140.5)

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

#9DC29F

Celadon · DarkSeaGreen · Apple Green

HEX
#9DC29F
RGB
rgb(157, 194, 159)
HSL
hsl(123, 23%, 69%)
HSB
hsb(123, 19%, 76%)
CMYK
cmyk(19%, 0%, 18%, 24%)
Oklch
oklch(77.7% 0.063 146.4)

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

#5F7560

Celadon · DimGray · Olive Green

HEX
#5F7560
RGB
rgb(95, 117, 96)
HSL
hsl(123, 10%, 42%)
HSB
hsb(123, 19%, 46%)
CMYK
cmyk(19%, 0%, 18%, 54%)
Oklch
oklch(53.8% 0.041 146.2)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5F756F
766066

Analogous

607665
5F756F
607176

Triadic

5F756F
706076
767060

Split-Comp.

5F756F
766071
766560

Tetradic

5F756F
656076
766066
717660

Contrast Matrix WCAG 2.1 Contrast

5F756F
98CCCC
F5FAF4
9DC29F
5F7560
—
2.8
Fail
4.7
AA
2.5
Fail
1.0
Fail
2.8
Fail
—
1.7
Fail
1.1
Fail
2.8
Fail
4.7
AA
1.7
Fail
—
1.9
Fail
4.7
AA
2.5
Fail
1.1
Fail
1.9
Fail
—
2.5
Fail
1.0
Fail
2.8
Fail
4.7
AA
2.5
Fail
—
White BG
4.9AA
1.8Fail
1.1Fail
2.0Fail
5.0AA
Black BG
4.3AA Large
11.8AAA
19.9AAA
10.7AAA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

696970
AFAFCC
F7F7F5
ADADA7
696965

Deuteranopia

676671
ACA8CC
F7F7F6
ABA8AA
676666

Tritanopia

607272
9BCCCC
F5F7F7
9FAEB0
60696A

Achromatopsia

6E6E6E
BCBCBC
F8F8F8
B3B3B3
6C6C6C

Shades & Tints Shades & Tints

#5F756F

Dark
Light

#98CCCC

Dark
Light

#F5FAF4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5f756f;
  --color-2: #98cccc;
  --color-3: #f5faf4;
  --color-4: #9dc29f;
  --color-5: #5f7560;
}

SCSS

$color-1: #5f756f;
$color-2: #98cccc;
$color-3: #f5faf4;
$color-4: #9dc29f;
$color-5: #5f7560;

TAILWIND

colors: {
  'brand-1': '#5f756f',
  'brand-2': '#98cccc',
  'brand-3': '#f5faf4',
  'brand-4': '#9dc29f',
  'brand-5': '#5f7560',
}

RGB Array

[95, 117, 111], [152, 204, 204], [245, 250, 244], [157, 194, 159], [95, 117, 96]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5F756F, #98CCCC, #F5FAF4, #9DC29F, #5F7560 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #5f756f; --color-2: #98cccc; --color-3: #f5faf4; --color-4: #9dc29f; --color-5: #5f7560. 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 tech, SaaS, healthcare, eco industries. Restrained colors convey professionalism and trust. 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