← Back to Editor

#3C8489 · #5A8F89 · #799A88 · #97A588 · #B5B087

cool

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#3C8489

Slate Blue · SteelBlue · Mint Ice

HEX
#3C8489
RGB
rgb(60, 132, 137)
HSL
hsl(184, 39%, 39%)
HSB
hsb(184, 56%, 54%)
CMYK
cmyk(56%, 4%, 0%, 46%)
Oklch
oklch(57.0% 0.072 201.5)

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

#5A8F89

Mineral Blue · SlateGray · Mint Ice

HEX
#5A8F89
RGB
rgb(90, 143, 137)
HSL
hsl(173, 23%, 46%)
HSB
hsb(173, 37%, 56%)
CMYK
cmyk(37%, 0%, 4%, 44%)
Oklch
oklch(61.1% 0.057 186.7)

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

#799A88

Celadon · LightSlateGray · Olive Green

HEX
#799A88
RGB
rgb(121, 154, 136)
HSL
hsl(147, 14%, 54%)
HSB
hsb(147, 21%, 60%)
CMYK
cmyk(21%, 0%, 12%, 40%)
Oklch
oklch(65.6% 0.045 161.0)

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

#97A588

Grass Green · DarkSeaGreen · Olive Green

HEX
#97A588
RGB
rgb(151, 165, 136)
HSL
hsl(89, 14%, 59%)
HSB
hsb(89, 18%, 65%)
CMYK
cmyk(8%, 0%, 18%, 35%)
Oklch
oklch(70.3% 0.044 128.5)

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

#B5B087

Fresh Green · Tan · Sunflower

HEX
#B5B087
RGB
rgb(181, 176, 135)
HSL
hsl(53, 24%, 62%)
HSB
hsb(53, 25%, 71%)
CMYK
cmyk(0%, 3%, 25%, 29%)
Oklch
oklch(75.1% 0.056 101.8)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C8489
8A423D

Analogous

3D8A69
3C8489
3D5E8A

Triadic

3C8489
8A3D85
858A3D

Split-Comp.

3C8489
8A3D5E
8A693D

Tetradic

3C8489
693D8A
8A423D
5E8A3D

Contrast Matrix WCAG 2.1 Contrast

3C8489
5A8F89
799A88
97A588
B5B087
—
1.2
Fail
1.4
Fail
1.7
Fail
2.0
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
1.4
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
1.2
Fail
2.0
Fail
1.7
Fail
1.4
Fail
1.2
Fail
—
White BG
4.3AA Large
3.7AA Large
3.1AA Large
2.6Fail
2.2Fail
Black BG
4.9AA
5.7AA
6.8AA
8.1AAA
9.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5C88
71718A
87888C
9D9D8F
B3B391

Deuteranopia

575288
6E6A8B
85838D
9C9B91
B3B493

Tritanopia

408787
5D8C8C
7B9091
989596
B5999A

Achromatopsia

6F6F6F
7E7E7E
8E8E8E
9E9E9E
ADADAD

Shades & Tints Shades & Tints

#3C8489

Dark
Light

#5A8F89

Dark
Light

#799A88

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c8489;
  --color-2: #5a8f89;
  --color-3: #799a88;
  --color-4: #97a588;
  --color-5: #b5b087;
}

SCSS

$color-1: #3c8489;
$color-2: #5a8f89;
$color-3: #799a88;
$color-4: #97a588;
$color-5: #b5b087;

TAILWIND

colors: {
  'brand-1': '#3c8489',
  'brand-2': '#5a8f89',
  'brand-3': '#799a88',
  'brand-4': '#97a588',
  'brand-5': '#b5b087',
}

RGB Array

[60, 132, 137], [90, 143, 137], [121, 154, 136], [151, 165, 136], [181, 176, 135]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #3C8489, #5A8F89, #799A88, #97A588, #B5B087 is ideal for: brand design, premium product pages, magazine layouts. Low-saturation colors convey a sophisticated, premium feel. 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: #3c8489; --color-2: #5a8f89; --color-3: #799a88; --color-4: #97a588; --color-5: #b5b087. 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. 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 cool-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