← Back to Editor

#3C6E87 · #565A73 · #4DADAB · #739F86 · #889196

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 Library

Color Details Color Details

#3C6E87

Slate Blue · SteelBlue · Prussian Blue

HEX
#3C6E87
RGB
rgb(60, 110, 135)
HSL
hsl(200, 38%, 38%)
HSB
hsb(200, 56%, 53%)
CMYK
cmyk(56%, 19%, 0%, 47%)
Oklch
oklch(51.4% 0.067 231.8)

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

#565A73

Indigo · DimGray · Prussian Blue

HEX
#565A73
RGB
rgb(86, 90, 115)
HSL
hsl(232, 14%, 39%)
HSB
hsb(232, 25%, 45%)
CMYK
cmyk(25%, 22%, 0%, 55%)
Oklch
oklch(47.4% 0.041 277.6)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

#4DADAB

Mineral Blue · CadetBlue · Mint Ice

HEX
#4DADAB
RGB
rgb(77, 173, 171)
HSL
hsl(179, 38%, 49%)
HSB
hsb(179, 55%, 68%)
CMYK
cmyk(55%, 0%, 1%, 32%)
Oklch
oklch(69.0% 0.090 193.4)

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

#739F86

Celadon · LightSlateGray · Olive Green

HEX
#739F86
RGB
rgb(115, 159, 134)
HSL
hsl(146, 19%, 54%)
HSB
hsb(146, 28%, 62%)
CMYK
cmyk(28%, 0%, 16%, 38%)
Oklch
oklch(66.3% 0.061 159.3)

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

#889196

Ash · LightSlateGray · Silver Sand

HEX
#889196
RGB
rgb(136, 145, 150)
HSL
hsl(201, 6%, 56%)
HSB
hsb(201, 9%, 59%)
CMYK
cmyk(9%, 3%, 0%, 41%)
Oklch
oklch(65.1% 0.013 231.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

3C6E87
86553C

Analogous

3C8679
3C6E87
3C4886

Triadic

3C6E87
863C6D
6D863C

Split-Comp.

3C6E87
863C48
86793C

Tetradic

3C6E87
793C86
86553C
48863C

Contrast Matrix WCAG 2.1 Contrast

3C6E87
565A73
4DADAB
739F86
889196
—
1.2
Fail
2.1
Fail
1.9
Fail
1.7
Fail
1.2
Fail
—
2.5
Fail
2.3
Fail
2.1
Fail
2.1
Fail
2.5
Fail
—
1.1
Fail
1.2
Fail
1.9
Fail
2.3
Fail
1.1
Fail
—
1.1
Fail
1.7
Fail
2.1
Fail
1.2
Fail
1.1
Fail
—
White BG
5.6AA
6.8AA
2.7Fail
3.0Fail
3.2AA Large
Black BG
3.8AA Large
3.1AA Large
7.9AAA
7.0AAA
6.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

525281
58586D
7777AB
86868C
8C8C95

Deuteranopia

4F4B80
58576C
716AAC
84808E
8B8B95

Tritanopia

3F7C7B
566867
52ACAC
759192
889494

Achromatopsia

626262
5C5C5C
909090
8F8F8F
8F8F8F

Shades & Tints Shades & Tints

#3C6E87

Dark
Light

#565A73

Dark
Light

#4DADAB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #3c6e87;
  --color-2: #565a73;
  --color-3: #4dadab;
  --color-4: #739f86;
  --color-5: #889196;
}

SCSS

$color-1: #3c6e87;
$color-2: #565a73;
$color-3: #4dadab;
$color-4: #739f86;
$color-5: #889196;

TAILWIND

colors: {
  'brand-1': '#3c6e87',
  'brand-2': '#565a73',
  'brand-3': '#4dadab',
  'brand-4': '#739f86',
  'brand-5': '#889196',
}

RGB Array

[60, 110, 135], [86, 90, 115], [77, 173, 171], [115, 159, 134], [136, 145, 150]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #3C6E87, #565A73, #4DADAB, #739F86, #889196 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: #3c6e87; --color-2: #565a73; --color-3: #4dadab; --color-4: #739f86; --color-5: #889196. 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 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