← Back to Editor

#A8B6AD · #60B4B7 · #3A90C0 · #544F8B · #641E6F

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 LibraryData Visualization

Color Details Color Details

#A8B6AD

Celadon · DarkGray · Silver Sand

HEX
#A8B6AD
RGB
rgb(168, 182, 173)
HSL
hsl(141, 9%, 69%)
HSB
hsb(141, 8%, 71%)
CMYK
cmyk(8%, 0%, 5%, 29%)
Oklch
oklch(76.3% 0.020 157.7)

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

#60B4B7

Slate Blue · MediumAquaMarine · Lake Green

HEX
#60B4B7
RGB
rgb(96, 180, 183)
HSL
hsl(182, 38%, 55%)
HSB
hsb(182, 48%, 72%)
CMYK
cmyk(48%, 2%, 0%, 28%)
Oklch
oklch(71.8% 0.082 198.5)

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

#3A90C0

Lake Blue · SteelBlue · Navy Blue

HEX
#3A90C0
RGB
rgb(58, 144, 192)
HSL
hsl(201, 54%, 49%)
HSB
hsb(201, 70%, 75%)
CMYK
cmyk(70%, 25%, 0%, 25%)
Oklch
oklch(62.2% 0.109 236.8)

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

#544F8B

Deep Indigo · DarkSlateBlue · Navy Blue

HEX
#544F8B
RGB
rgb(84, 79, 139)
HSL
hsl(245, 28%, 43%)
HSB
hsb(245, 43%, 55%)
CMYK
cmyk(40%, 43%, 0%, 45%)
Oklch
oklch(46.1% 0.096 285.8)

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

#641E6F

Royal Purple · Purple · Eggplant

HEX
#641E6F
RGB
rgb(100, 30, 111)
HSL
hsl(292, 57%, 28%)
HSB
hsb(292, 73%, 44%)
CMYK
cmyk(10%, 73%, 0%, 56%)
Oklch
oklch(38.2% 0.144 321.9)

Traditional「Royal Purple」· Paint「Eggplant」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8B6AD
B7A9B2

Analogous

ABB7A9
A8B6AD
A9B7B5

Triadic

A8B6AD
AEA9B7
B7AEA9

Split-Comp.

A8B6AD
B5A9B7
B7A9AB

Tetradic

A8B6AD
A9ABB7
B7A9B2
B7B5A9

Contrast Matrix WCAG 2.1 Contrast

A8B6AD
60B4B7
3A90C0
544F8B
641E6F
—
1.1
Fail
1.7
Fail
3.5
AA Large
5.1
AA
1.1
Fail
—
1.5
Fail
3.0
AA Large
4.5
AA Large
1.7
Fail
1.5
Fail
—
2.1
Fail
3.0
AA Large
3.5
AA Large
3.0
AA Large
2.1
Fail
—
1.5
Fail
5.1
AA
4.5
AA Large
3.0
AA Large
1.5
Fail
—
White BG
2.1Fail
2.4Fail
3.5AA Large
7.3AAA
10.7AAA
Black BG
10.0AAA
8.7AAA
5.9AA
2.9Fail
2.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

AEAEAF
8485B6
5F60B4
52527C
46455B

Deuteranopia

ADACB0
8079B6
5A54B2
525379
4A4F57

Tritanopia

A9B1B1
64B6B6
3EABA9
54716F
614C49

Achromatopsia

B1B1B1
9B9B9B
7C7C7C
575757
3C3C3C

Shades & Tints Shades & Tints

#A8B6AD

Dark
Light

#60B4B7

Dark
Light

#3A90C0

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8b6ad;
  --color-2: #60b4b7;
  --color-3: #3a90c0;
  --color-4: #544f8b;
  --color-5: #641e6f;
}

SCSS

$color-1: #a8b6ad;
$color-2: #60b4b7;
$color-3: #3a90c0;
$color-4: #544f8b;
$color-5: #641e6f;

TAILWIND

colors: {
  'brand-1': '#a8b6ad',
  'brand-2': '#60b4b7',
  'brand-3': '#3a90c0',
  'brand-4': '#544f8b',
  'brand-5': '#641e6f',
}

RGB Array

[168, 182, 173], [96, 180, 183], [58, 144, 192], [84, 79, 139], [100, 30, 111]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A8B6AD, #60B4B7, #3A90C0, #544F8B, #641E6F is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #a8b6ad; --color-2: #60b4b7; --color-3: #3a90c0; --color-4: #544f8b; --color-5: #641e6f. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. 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