← Back to Editor

#A8A7A7 · #CC527A · #E8175D · #474747 · #363636

space

A 5-color space palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#A8A7A7

Ash · DarkGray · Silver Sand

HEX
#A8A7A7
RGB
rgb(168, 167, 167)
HSL
hsl(0, 1%, 66%)
HSB
hsb(0, 1%, 66%)
CMYK
cmyk(0%, 1%, 1%, 34%)
Oklch
oklch(72.9% 0.001 17.2)

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

#CC527A

Dark Violet · LightCoral · Rose Pink

HEX
#CC527A
RGB
rgb(204, 82, 122)
HSL
hsl(340, 54%, 56%)
HSB
hsb(340, 60%, 80%)
CMYK
cmyk(0%, 60%, 40%, 20%)
Oklch
oklch(60.8% 0.159 2.6)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#E8175D

Dark Violet · Crimson · Camellia

HEX
#E8175D
RGB
rgb(232, 23, 93)
HSL
hsl(340, 82%, 50%)
HSB
hsb(340, 90%, 91%)
CMYK
cmyk(0%, 90%, 60%, 9%)
Oklch
oklch(60.0% 0.231 11.1)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#474747

Dark Cyan · DarkSlateGray · Charcoal

HEX
#474747
RGB
rgb(71, 71, 71)
HSL
hsl(0, 0%, 28%)
HSB
hsb(0, 0%, 28%)
CMYK
cmyk(0%, 0%, 0%, 72%)
Oklch
oklch(39.8% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Charcoal」· Creative Midnight Shadow

#363636

Dark Cyan · DarkSlateGray · Dark Stone

HEX
#363636
RGB
rgb(54, 54, 54)
HSL
hsl(0, 0%, 21%)
HSB
hsb(0, 0%, 21%)
CMYK
cmyk(0%, 0%, 0%, 79%)
Oklch
oklch(33.3% 0.000 89.9)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

A8A7A7
A7A9A9

Analogous

A9A7A8
A8A7A7
A9A8A7

Triadic

A8A7A7
A7A9A7
A7A7A9

Split-Comp.

A8A7A7
A7A9A8
A7A8A9

Tetradic

A8A7A7
A8A9A7
A7A9A9
A8A7A9

Contrast Matrix WCAG 2.1 Contrast

A8A7A7
CC527A
E8175D
474747
363636
—
1.7
Fail
1.9
Fail
3.9
AA Large
5.0
AA
1.7
Fail
—
1.1
Fail
2.2
Fail
2.9
Fail
1.9
Fail
1.1
Fail
—
2.1
Fail
2.7
Fail
3.9
AA Large
2.2
Fail
2.1
Fail
—
1.3
Fail
5.0
AA
2.9
Fail
2.7
Fail
1.3
Fail
—
White BG
2.4Fail
4.2AA Large
4.5AA Large
9.3AAA
12.1AAA
Black BG
8.8AAA
5.1AA
4.7AA
2.3Fail
1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

A8A8A7
979670
8E8C4C
474747
363636

Deuteranopia

A8A8A7
9EA76E
9AA948
474747
363636

Tritanopia

A8A7A7
C66967
DE3F3C
474747
363636

Achromatopsia

A7A7A7
7B7B7B
5D5D5D
474747
363636

Shades & Tints Shades & Tints

#A8A7A7

Dark
Light

#CC527A

Dark
Light

#E8175D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #a8a7a7;
  --color-2: #cc527a;
  --color-3: #e8175d;
  --color-4: #474747;
  --color-5: #363636;
}

SCSS

$color-1: #a8a7a7;
$color-2: #cc527a;
$color-3: #e8175d;
$color-4: #474747;
$color-5: #363636;

TAILWIND

colors: {
  'brand-1': '#a8a7a7',
  'brand-2': '#cc527a',
  'brand-3': '#e8175d',
  'brand-4': '#474747',
  'brand-5': '#363636',
}

RGB Array

[168, 167, 167], [204, 82, 122], [232, 23, 93], [71, 71, 71], [54, 54, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #A8A7A7, #CC527A, #E8175D, #474747, #363636 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. 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: #a8a7a7; --color-2: #cc527a; --color-3: #e8175d; --color-4: #474747; --color-5: #363636. 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 space-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