← Back to Editor

#A8BDB8 · #8AB5B4 · #71A9B0 · #568DA6 · #507699

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

#A8BDB8

Jade · DarkGray · Lake Green

HEX
#A8BDB8
RGB
rgb(168, 189, 184)
HSL
hsl(166, 14%, 70%)
HSB
hsb(166, 11%, 74%)
CMYK
cmyk(11%, 0%, 3%, 26%)
Oklch
oklch(78.1% 0.024 179.8)

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

#8AB5B4

Jade · DarkGray · Lake Green

HEX
#8AB5B4
RGB
rgb(138, 181, 180)
HSL
hsl(179, 23%, 63%)
HSB
hsb(179, 24%, 71%)
CMYK
cmyk(24%, 0%, 1%, 29%)
Oklch
oklch(74.2% 0.046 194.4)

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

#71A9B0

Slate Blue · CadetBlue · Lake Green

HEX
#71A9B0
RGB
rgb(113, 169, 176)
HSL
hsl(187, 29%, 57%)
HSB
hsb(187, 36%, 69%)
CMYK
cmyk(36%, 4%, 0%, 31%)
Oklch
oklch(69.9% 0.059 205.8)

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

#568DA6

Slate Blue · CadetBlue · Mint Ice

HEX
#568DA6
RGB
rgb(86, 141, 166)
HSL
hsl(199, 32%, 49%)
HSB
hsb(199, 48%, 65%)
CMYK
cmyk(48%, 15%, 0%, 35%)
Oklch
oklch(61.5% 0.069 228.8)

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

#507699

Slate Blue · SteelBlue · Navy Blue

HEX
#507699
RGB
rgb(80, 118, 153)
HSL
hsl(209, 31%, 46%)
HSB
hsb(209, 48%, 60%)
CMYK
cmyk(48%, 23%, 0%, 40%)
Oklch
oklch(55.2% 0.070 247.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8BDB8
BDA8AD

Analogous

A8BDAE
A8BDB8
A8B7BD

Triadic

A8BDB8
B8A8BD
BDB8A8

Split-Comp.

A8BDB8
BDA8B7
BDAEA8

Tetradic

A8BDB8
AEA8BD
BDA8AD
B7BDA8

Contrast Matrix WCAG 2.1 Contrast

A8BDB8
8AB5B4
71A9B0
568DA6
507699
—
1.1
Fail
1.3
Fail
1.8
Fail
2.4
Fail
1.1
Fail
—
1.2
Fail
1.6
Fail
2.1
Fail
1.3
Fail
1.2
Fail
—
1.4
Fail
1.8
Fail
1.8
Fail
1.6
Fail
1.4
Fail
—
1.3
Fail
2.4
Fail
2.1
Fail
1.8
Fail
1.3
Fail
—
White BG
2.0Fail
2.2Fail
2.6Fail
3.6AA Large
4.8AA
Black BG
10.6AAA
9.3AAA
8.0AAA
5.8AA
4.4AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

B1B1B9
9D9DB4
898AAE
6E6EA0
606191

Deuteranopia

B0AEB9
9A97B4
8682AE
6B679F
5E5B8F

Tritanopia

A9BABA
8CB4B4
74ADAD
599B9A
528A88

Achromatopsia

B6B6B6
A8A8A8
999999
7F7F7F
6F6F6F

Shades & Tints Shades & Tints

#A8BDB8

Dark
Light

#8AB5B4

Dark
Light

#71A9B0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8bdb8;
  --color-2: #8ab5b4;
  --color-3: #71a9b0;
  --color-4: #568da6;
  --color-5: #507699;
}

SCSS

$color-1: #a8bdb8;
$color-2: #8ab5b4;
$color-3: #71a9b0;
$color-4: #568da6;
$color-5: #507699;

TAILWIND

colors: {
  'brand-1': '#a8bdb8',
  'brand-2': '#8ab5b4',
  'brand-3': '#71a9b0',
  'brand-4': '#568da6',
  'brand-5': '#507699',
}

RGB Array

[168, 189, 184], [138, 181, 180], [113, 169, 176], [86, 141, 166], [80, 118, 153]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8BDB8, #8AB5B4, #71A9B0, #568DA6, #507699 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: #a8bdb8; --color-2: #8ab5b4; --color-3: #71a9b0; --color-4: #568da6; --color-5: #507699. 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