← Back to Editor

#84D0CA · #6C9BA6 · #5A7188 · #4C516E · #41385A

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

#84D0CA

Jade · SkyBlue · Lake Green

HEX
#84D0CA
RGB
rgb(132, 208, 202)
HSL
hsl(175, 45%, 67%)
HSB
hsb(175, 37%, 82%)
CMYK
cmyk(37%, 0%, 3%, 18%)
Oklch
oklch(80.6% 0.076 189.4)

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

#6C9BA6

Slate Blue · CadetBlue · Lake Green

HEX
#6C9BA6
RGB
rgb(108, 155, 166)
HSL
hsl(191, 25%, 54%)
HSB
hsb(191, 35%, 65%)
CMYK
cmyk(35%, 7%, 0%, 35%)
Oklch
oklch(66.0% 0.053 213.9)

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

#5A7188

Indigo · SlateGray · Navy Blue

HEX
#5A7188
RGB
rgb(90, 113, 136)
HSL
hsl(210, 20%, 44%)
HSB
hsb(210, 34%, 53%)
CMYK
cmyk(34%, 17%, 0%, 47%)
Oklch
oklch(53.9% 0.045 248.7)

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

#4C516E

Indigo · DarkSlateBlue · Prussian Blue

HEX
#4C516E
RGB
rgb(76, 81, 110)
HSL
hsl(231, 18%, 36%)
HSB
hsb(231, 31%, 43%)
CMYK
cmyk(31%, 26%, 0%, 57%)
Oklch
oklch(44.2% 0.048 276.7)

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

#41385A

Deep Indigo · DarkSlateGray · Prussian Blue

HEX
#41385A
RGB
rgb(65, 56, 90)
HSL
hsl(256, 23%, 29%)
HSB
hsb(256, 38%, 35%)
CMYK
cmyk(28%, 38%, 0%, 65%)
Oklch
oklch(36.5% 0.058 295.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

84D0CA
D1858B

Analogous

85D1A5
84D0CA
85B1D1

Triadic

84D0CA
CA85D1
D1CA85

Split-Comp.

84D0CA
D185B1
D1A585

Tetradic

84D0CA
A585D1
D1858B
B1D185

Contrast Matrix WCAG 2.1 Contrast

84D0CA
6C9BA6
5A7188
4C516E
41385A
—
1.7
Fail
2.9
Fail
4.4
AA Large
6.1
AA
1.7
Fail
—
1.7
Fail
2.5
Fail
3.5
AA Large
2.9
Fail
1.7
Fail
—
1.5
Fail
2.1
Fail
4.4
AA Large
2.5
Fail
1.5
Fail
—
1.4
Fail
6.1
AA
3.5
AA Large
2.1
Fail
1.4
Fail
—
White BG
1.8Fail
3.1AA Large
5.1AA
7.8AAA
10.8AAA
Black BG
11.9AAA
6.9AA
4.2AA Large
2.7Fail
1.9Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A6CB
8081A3
646482
4E4E67
3D3D52

Deuteranopia

A19BCC
7E7AA3
636181
4E4E65
3E3E50

Tritanopia

88CDCD
6EA1A1
5B7E7D
4C6160
414B4A

Achromatopsia

B9B9B9
8E8E8E
6D6D6D
535353
3F3F3F

Shades & Tints Shades & Tints

#84D0CA

Dark
Light

#6C9BA6

Dark
Light

#5A7188

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #84d0ca;
  --color-2: #6c9ba6;
  --color-3: #5a7188;
  --color-4: #4c516e;
  --color-5: #41385a;
}

SCSS

$color-1: #84d0ca;
$color-2: #6c9ba6;
$color-3: #5a7188;
$color-4: #4c516e;
$color-5: #41385a;

TAILWIND

colors: {
  'brand-1': '#84d0ca',
  'brand-2': '#6c9ba6',
  'brand-3': '#5a7188',
  'brand-4': '#4c516e',
  'brand-5': '#41385a',
}

RGB Array

[132, 208, 202], [108, 155, 166], [90, 113, 136], [76, 81, 110], [65, 56, 90]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #84D0CA, #6C9BA6, #5A7188, #4C516E, #41385A 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: #84d0ca; --color-2: #6c9ba6; --color-3: #5a7188; --color-4: #4c516e; --color-5: #41385a. 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