← Back to Editor

#5E9B98 · #6CA3AD · #6C83AD · #866CAD · #AD6CAB

A 5-color palette 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

#5E9B98

Mineral Blue · CadetBlue · Mint Ice

HEX
#5E9B98
RGB
rgb(94, 155, 152)
HSL
hsl(177, 24%, 49%)
HSB
hsb(177, 39%, 61%)
CMYK
cmyk(39%, 0%, 2%, 39%)
Oklch
oklch(64.7% 0.064 191.7)

TraditionalMineral Blue」· PaintMint Ice」· Creative Blush Sunrise

#6CA3AD

Slate Blue · CadetBlue · Lake Green

HEX
#6CA3AD
RGB
rgb(108, 163, 173)
HSL
hsl(189, 28%, 55%)
HSB
hsb(189, 38%, 68%)
CMYK
cmyk(38%, 6%, 0%, 32%)
Oklch
oklch(68.1% 0.060 210.2)

TraditionalSlate Blue」· PaintLake Green」· Creative Blush Sunrise

#6C83AD

Azure · LightSlateGray · Navy Blue

HEX
#6C83AD
RGB
rgb(108, 131, 173)
HSL
hsl(219, 28%, 55%)
HSB
hsb(219, 38%, 68%)
CMYK
cmyk(38%, 24%, 0%, 32%)
Oklch
oklch(60.8% 0.070 262.2)

TraditionalAzure」· PaintNavy Blue」· Creative Blush Sunrise

#866CAD

Deep Indigo · LightSlateGray · Violet

HEX
#866CAD
RGB
rgb(134, 108, 173)
HSL
hsl(264, 28%, 55%)
HSB
hsb(264, 38%, 68%)
CMYK
cmyk(23%, 38%, 0%, 32%)
Oklch
oklch(58.2% 0.101 301.8)

TraditionalDeep Indigo」· PaintViolet」· Creative Blush Sunrise

#AD6CAB

Rose Purple · MediumOrchid · Violet

HEX
#AD6CAB
RGB
rgb(173, 108, 171)
HSL
hsl(302, 28%, 55%)
HSB
hsb(302, 38%, 68%)
CMYK
cmyk(0%, 38%, 1%, 32%)
Oklch
oklch(62.3% 0.118 328.0)

TraditionalRose Purple」· PaintViolet」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

5E9B98
9B5F62

Analogous

5F9B7A
5E9B98
5F809B

Triadic

5E9B98
985F9B
9B985F

Split-Comp.

5E9B98
9B5F80
9B7A5F

Tetradic

5E9B98
7A5F9B
9B5F62
809B5F

Contrast Matrix WCAG 2.1 Contrast

5E9B98
6CA3AD
6C83AD
866CAD
AD6CAB
1.1
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.1
Fail
1.4
Fail
1.6
Fail
1.4
Fail
1.2
Fail
1.4
Fail
1.2
Fail
1.0
Fail
1.4
Fail
1.6
Fail
1.2
Fail
1.2
Fail
1.2
Fail
1.4
Fail
1.0
Fail
1.2
Fail
White BG
3.2AA Large
2.8Fail
3.8AA Large
4.4AA Large
3.8AA Large
Black BG
6.6AA
7.5AAA
5.5AA
4.8AA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

787999
8484AB
7676A3
7B7B9D
91909C

Deuteranopia

757099
817DAA
7573A0
7C7E9A
959A98

Tritanopia

619999
6FA9A8
6D9B99
85918E
AA908D

Achromatopsia

888888
949494
818181
7B7B7B
878787

Shades & Tints Shades & Tints

#5E9B98

Dark
Light

#6CA3AD

Dark
Light

#6C83AD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #5e9b98;
  --color-2: #6ca3ad;
  --color-3: #6c83ad;
  --color-4: #866cad;
  --color-5: #ad6cab;
}

SCSS

$color-1: #5e9b98;
$color-2: #6ca3ad;
$color-3: #6c83ad;
$color-4: #866cad;
$color-5: #ad6cab;

TAILWIND

colors: {
  'brand-1': '#5e9b98',
  'brand-2': '#6ca3ad',
  'brand-3': '#6c83ad',
  'brand-4': '#866cad',
  'brand-5': '#ad6cab',
}

RGB Array

[94, 155, 152], [108, 163, 173], [108, 131, 173], [134, 108, 173], [173, 108, 171]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #5E9B98, #6CA3AD, #6C83AD, #866CAD, #AD6CAB 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: #5e9b98; --color-2: #6ca3ad; --color-3: #6c83ad; --color-4: #866cad; --color-5: #ad6cab. 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