← Back to Editor

#535353 · #AE53B2 · #9767CB · #7F8FE7 · #ACACAC

cool

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

#535353

Ink Gray · DarkSlateGray · Charcoal

HEX
#535353
RGB
rgb(83, 83, 83)
HSL
hsl(0, 0%, 33%)
HSB
hsb(0, 0%, 33%)
CMYK
cmyk(0%, 0%, 0%, 67%)
Oklch
oklch(44.2% 0.000 89.9)

Traditional「Ink Gray」· Paint「Charcoal」· Creative Midnight Shadow

#AE53B2

Dark Plum · MediumOrchid · Violet

HEX
#AE53B2
RGB
rgb(174, 83, 178)
HSL
hsl(297, 38%, 51%)
HSB
hsb(297, 53%, 70%)
CMYK
cmyk(2%, 53%, 0%, 30%)
Oklch
oklch(59.0% 0.168 325.8)

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

#9767CB

Deep Indigo · MediumOrchid · Violet

HEX
#9767CB
RGB
rgb(151, 103, 203)
HSL
hsl(269, 49%, 60%)
HSB
hsb(269, 49%, 80%)
CMYK
cmyk(26%, 49%, 0%, 20%)
Oklch
oklch(60.7% 0.153 304.4)

Traditional「Deep Indigo」· Paint「Violet」· Creative Blush Sunrise

#7F8FE7

Azure · CornflowerBlue · Cobalt Blue

HEX
#7F8FE7
RGB
rgb(127, 143, 231)
HSL
hsl(231, 68%, 70%)
HSB
hsb(231, 45%, 91%)
CMYK
cmyk(45%, 38%, 0%, 9%)
Oklch
oklch(67.5% 0.131 274.5)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#ACACAC

Ash · DarkGray · Silver Sand

HEX
#ACACAC
RGB
rgb(172, 172, 172)
HSL
hsl(0, 0%, 67%)
HSB
hsb(0, 0%, 67%)
CMYK
cmyk(0%, 0%, 0%, 33%)
Oklch
oklch(74.4% 0.000 89.9)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

535353
545454

Analogous

545454
535353
545454

Triadic

535353
545454
545454

Split-Comp.

535353
545454
545454

Tetradic

535353
545454
545454
545454

Contrast Matrix WCAG 2.1 Contrast

535353
AE53B2
9767CB
7F8FE7
ACACAC
—
1.7
Fail
1.9
Fail
2.6
Fail
3.4
AA Large
1.7
Fail
—
1.1
Fail
1.5
Fail
2.0
Fail
1.9
Fail
1.1
Fail
—
1.4
Fail
1.8
Fail
2.6
Fail
1.5
Fail
1.4
Fail
—
1.3
Fail
3.4
AA Large
2.0
Fail
1.8
Fail
1.3
Fail
—
White BG
7.7AAA
4.5AA Large
4.1AA Large
3.0AA Large
2.3Fail
Black BG
2.7Fail
4.7AA
5.1AA
7.0AA
9.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

535353
87869B
8282B3
8686D2
ACACAC

Deuteranopia

535353
8C9396
8589AD
8584CD
ACACAC

Tritanopia

535353
A98985
95A09C
80C1BD
ACACAC

Achromatopsia

535353
797979
818181
949494
ACACAC

Shades & Tints Shades & Tints

#535353

Dark
Light

#AE53B2

Dark
Light

#9767CB

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #535353;
  --color-2: #ae53b2;
  --color-3: #9767cb;
  --color-4: #7f8fe7;
  --color-5: #acacac;
}

SCSS

$color-1: #535353;
$color-2: #ae53b2;
$color-3: #9767cb;
$color-4: #7f8fe7;
$color-5: #acacac;

TAILWIND

colors: {
  'brand-1': '#535353',
  'brand-2': '#ae53b2',
  'brand-3': '#9767cb',
  'brand-4': '#7f8fe7',
  'brand-5': '#acacac',
}

RGB Array

[83, 83, 83], [174, 83, 178], [151, 103, 203], [127, 143, 231], [172, 172, 172]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This cool-style palette of #535353, #AE53B2, #9767CB, #7F8FE7, #ACACAC is ideal for: corporate websites, product showcases, portfolios. 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: #535353; --color-2: #ae53b2; --color-3: #9767cb; --color-4: #7f8fe7; --color-5: #acacac. 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 cool-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