← Back to Editor

#A7A3AD · #5D8F8A · #08748E · #173D8F · #3C1261

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

#A7A3AD

Ash · DarkGray · Silver Sand

HEX
#A7A3AD
RGB
rgb(167, 163, 173)
HSL
hsl(264, 6%, 66%)
HSB
hsb(264, 6%, 68%)
CMYK
cmyk(3%, 6%, 0%, 32%)
Oklch
oklch(72.2% 0.015 304.0)

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

#5D8F8A

Mineral Blue · SlateGray · Mint Ice

HEX
#5D8F8A
RGB
rgb(93, 143, 138)
HSL
hsl(174, 21%, 46%)
HSB
hsb(174, 35%, 56%)
CMYK
cmyk(35%, 0%, 3%, 44%)
Oklch
oklch(61.3% 0.054 187.9)

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

#08748E

Lake Blue · Teal · Mint Ice

HEX
#08748E
RGB
rgb(8, 116, 142)
HSL
hsl(192, 89%, 29%)
HSB
hsb(192, 94%, 56%)
CMYK
cmyk(94%, 18%, 0%, 44%)
Oklch
oklch(51.8% 0.093 221.0)

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

#173D8F

Indigo · MidnightBlue · Prussian Blue

HEX
#173D8F
RGB
rgb(23, 61, 143)
HSL
hsl(221, 72%, 33%)
HSB
hsb(221, 84%, 56%)
CMYK
cmyk(84%, 57%, 0%, 44%)
Oklch
oklch(38.7% 0.143 262.8)

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

#3C1261

Royal Purple · MidnightBlue · Eggplant

HEX
#3C1261
RGB
rgb(60, 18, 97)
HSL
hsl(272, 69%, 23%)
HSB
hsb(272, 81%, 38%)
CMYK
cmyk(38%, 81%, 0%, 62%)
Oklch
oklch(29.9% 0.130 303.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A7A3AD
A9AEA3

Analogous

A3A4AE
A7A3AD
ACA3AE

Triadic

A7A3AD
AEA7A3
A3AEA7

Split-Comp.

A7A3AD
AEACA3
A4AEA3

Tetradic

A7A3AD
AEA3A4
A9AEA3
A3AEAC

Contrast Matrix WCAG 2.1 Contrast

A7A3AD
5D8F8A
08748E
173D8F
3C1261
—
1.5
Fail
2.2
Fail
4.0
AA Large
5.8
AA
1.5
Fail
—
1.5
Fail
2.7
Fail
4.0
AA Large
2.2
Fail
1.5
Fail
—
1.9
Fail
2.7
Fail
4.0
AA Large
2.7
Fail
1.9
Fail
—
1.4
Fail
5.8
AA
4.0
AA Large
2.7
Fail
1.4
Fail
—
White BG
2.5Fail
3.6AA Large
5.4AA
10.0AAA
14.5AAA
Black BG
8.5AAA
5.8AA
3.9AA Large
2.1Fail
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A5A5AB
73738B
373888
27287B
2A294E

Deuteranopia

A6A6AA
706C8C
312886
252276
2C2F49

Tritanopia

A7A9A8
608C8C
0D8382
196B68
3A3F3B

Achromatopsia

A5A5A5
7F7F7F
575757
3B3B3B
282828

Shades & Tints Shades & Tints

#A7A3AD

Dark
Light

#5D8F8A

Dark
Light

#08748E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a7a3ad;
  --color-2: #5d8f8a;
  --color-3: #08748e;
  --color-4: #173d8f;
  --color-5: #3c1261;
}

SCSS

$color-1: #a7a3ad;
$color-2: #5d8f8a;
$color-3: #08748e;
$color-4: #173d8f;
$color-5: #3c1261;

TAILWIND

colors: {
  'brand-1': '#a7a3ad',
  'brand-2': '#5d8f8a',
  'brand-3': '#08748e',
  'brand-4': '#173d8f',
  'brand-5': '#3c1261',
}

RGB Array

[167, 163, 173], [93, 143, 138], [8, 116, 142], [23, 61, 143], [60, 18, 97]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #A7A3AD, #5D8F8A, #08748E, #173D8F, #3C1261 is ideal for: tech websites, dark mode UIs, game UIs, 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: #a7a3ad; --color-2: #5d8f8a; --color-3: #08748e; --color-4: #173d8f; --color-5: #3c1261. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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