#552FAC

Accessibility

AAA

8.79:1

Vs white / black

8.79:1 · 2.39:1

Sources

Library color

Codes

Formats

HEX

#552fac

RGB

rgb(85, 47, 172)

RGBA

rgba(85, 47, 172, 1)

HSL

hsl(258, 57%, 43%)

HSLA

hsla(258, 57%, 43%, 1)

HSV

hsv(258, 73%, 67%)

LAB

lab(31.68% 46.77 -60.7)

LCH

lch(31.68% 76.63 307.61)

OKLAB

oklab(0.4317 0.0645 -0.1743)

OKLCH

oklch(0.4317 0.1859 290.31)

XYZ

xyz(12.21, 6.94, 39.72)

CMYK

cmyk(51%, 73%, 0%, 33%)

CSS

color: #552fac;

CSS variable

--color-552fac: #552fac;

SCSS

$color-552fac: #552fac;

JavaScript

const color = "#552fac";

TypeScript

const color: string = "#552fac";

React

style={{ backgroundColor: "#552fac" }}

JSON

{ "hex": "#552fac", "rgb": { "r": 85, "g": 47, "b": 172 }, "oklch": "oklch(0.4317 0.1859 290.31)" }

Export

Developer code

css

:root {
  --#552fac-1: #552fac;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

violet-800

Noticeably different · ΔE 2.85 · #5B21B6

Nearest CSS named color

RebeccaPurple

Noticeably different · ΔE 4.94 · #663399

Nearest Material color

deep-purple-700

Very similar · ΔE 0.93 · #512DA8

Nearest Bootstrap color

secondary

Very different · ΔE 21.32 · #6C757D

OKLCH

Perceptual 50–950 scale

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

50f4e9ff 100e7daff 200d4c3ff 300bea9ff 400a388ff 500886bec 6007259c8 7005b46a3 800453380 90030215e 9501d0d41

Palette

Tints & shades

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

f1eef8 e3dcf1 d5cbea c6bae3 b8a8dc aa97d6 9c86cf 8e74c8 8063c1 7152ba 6340b3 552fac 4e2b9e 47278f 402381 391f73 321b64 2b1856 231448 1c1039 150c2b 0e081d 07040e

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f1eef8 e3dcf1 d5cbea c6bae3 b8a8dc aa97d6 9c86cf 8e74c8 8063c1 7152ba 6340b3

Palette

Shades

Mixed toward black — depth, text, and emphasis

4e2b9e 47278f 402381 391f73 321b64 2b1856 231448 1c1039 150c2b 0e081d 07040e

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

5936a8 5c3da5 6043a1 634a9d 67519a 6b5896 6e5e92 72658f 756c8b 797387 7c7984

Harmony

Complementary

Opposite on the color wheel for contrast

#552FACStop 1 #87AC2FStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#2F48ACStop 1 #552FACStop 2 #932FACStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#552FACStop 1 #AC552FStop 2 #2FAC55Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#552FACStop 1 #AC932FStop 2 #48AC2FStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#271650Stop 1 #45268CStop 2 #6237C8Stop 3 #9173D9Stop 4 #C0AFE9Stop 5

Using this color

Where #552fac works

#552FAC (#552fac) sits in the deep purple family at about 258° hue, 57% saturation, and 43% lightness. Contrast is 8.79:1 on white and 2.39:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: violet-800 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

primary buttons and key accents
text or icons on a white canvas

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

Family context: Mystery, ambition, and creativity. Strong for artistic and spiritual associations. Common uses still include buttons, charts, and accents in the Deep Purple 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 Deep Purple 700#512DA8 Material Deep Purple 600#5E35B1 Tailwind violet 800#5B21B6 Material Deep Purple 800#4527A0 Spectrum #4638A3#4638A3 Material Deep Purple 500#673AB7 Spectrum #3A34AD#3A34AD Tailwind purple 800#6B21A8 Tailwind indigo 800#3730A3 Fluent Purple#5C2D91 RebeccaPurple#663399 Tailwind violet 900#4C1D95