#5D53AC

Accessibility

6.37:1

Vs white / black

6.37:1 · 3.3:1

Sources

Library color

Codes

Formats

HEX

#5d53ac

RGB

rgb(93, 83, 172)

RGBA

rgba(93, 83, 172, 1)

HSL

hsl(247, 35%, 50%)

HSLA

hsla(247, 35%, 50%, 1)

HSV

hsv(247, 52%, 67%)

LAB

lab(40.4% 27.42 -46.54)

LCH

lch(40.4% 54.02 300.51)

OKLAB

oklab(0.4972 0.0364 -0.1323)

OKLCH

oklch(0.4972 0.1372 285.38)

XYZ

xyz(15.05, 11.49, 40.45)

CMYK

cmyk(46%, 52%, 0%, 33%)

CSS

color: #5d53ac;

CSS variable

--color-5d53ac: #5d53ac;

SCSS

$color-5d53ac: #5d53ac;

JavaScript

const color = "#5d53ac";

TypeScript

const color: string = "#5d53ac";

React

style={{ backgroundColor: "#5d53ac" }}

JSON

{ "hex": "#5d53ac", "rgb": { "r": 93, "g": 83, "b": 172 }, "oklch": "oklch(0.4972 0.1372 285.38)" }

Export

Developer code

css

:root {
  --#5d53ac-1: #5d53ac;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

indigo-600

Very different · ΔE 8.8 · #4F46E5

Nearest CSS named color

SlateBlue

Very different · ΔE 5.75 · #6A5ACD

Nearest Material color

indigo-500

Very different · ΔE 5.62 · #3F51B5

Nearest Bootstrap color

primary

Very different · ΔE 15.91 · #0D6EFD

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50efeeff 100e1e0ff 200cdcbff 300b6b2ff 4009a94f3 5007f78d5 6006a64b4 700554f92 800403b72 9002c2853 950191438

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

f2f1f8 e4e2f1 d7d4ea c9c6e3 bcb7dc aea9d6 a19bcf 938cc8 867ec1 7870ba 6b61b3 5d53ac 554c9e 4e458f 463e81 3e3773 363064 2f2a56 272348 1f1c39 17152b 0f0e1d 08070e

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f2f1f8 e4e2f1 d7d4ea c9c6e3 bcb7dc aea9d6 a19bcf 938cc8 867ec1 7870ba 6b61b3

Palette

Shades

Mixed toward black — depth, text, and emphasis

554c9e 4e458f 463e81 3e3773 363064 2f2a56 272348 1f1c39 17152b 0f0e1d 08070e

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

6057a8 635ba5 665ea1 69629d 6c669a 6f6a96 716d92 74718f 77758b 7a7987 7d7c84

Harmony

Complementary

Opposite on the color wheel for contrast

#5D53ACStop 1 #A2AC53Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#5375ACStop 1 #5D53ACStop 2 #8A53ACStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#5D53ACStop 1 #AC5D53Stop 2 #53AC5DStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#5D53ACStop 1 #AC8A53Stop 2 #75AC53Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#252145Stop 1 #413A78Stop 2 #5D53ACStop 3 #8E87C5Stop 4 #BEBADEStop 5

Using this color

Where #5d53ac works

#5D53AC (#5d53ac) sits in the indigo family at about 247° hue, 35% saturation, and 50% lightness. Contrast is 6.37:1 on white and 3.3:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: indigo-600 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas

On a black or near-black UI, #5d53ac is 3.3:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Intuition, depth, and sincerity. Common in enterprise software and thoughtful products. Common uses still include buttons, charts, and accents in the Indigo range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Material You Primary#6750A4 Spectrum #4F4CAE#4F4CAE Spectrum #464AB4#464AB4 Material Indigo 500#3F51B5 SlateBlue#6A5ACD Spectrum #404FBF#404FBF Spectrum #5F61C4#5F61C4 Spectrum #6964BE#6964BE Radix Violet 9#6E56CF Spectrum #645AD3#645AD3 Material Indigo 600#3949AB System Indigo#5856D6