#552B79

Accessibility

AAA

10.46:1

Vs white / black

10.46:1 · 2.01:1

Sources

Library color

Codes

Formats

HEX

#552b79

RGB

rgb(85, 43, 121)

RGBA

rgba(85, 43, 121, 1)

HSL

hsl(272, 48%, 32%)

HSLA

hsla(272, 48%, 32%, 1)

HSV

hsv(272, 64%, 47%)

LAB

lab(26.85% 34.99 -37.16)

LCH

lch(26.85% 51.04 313.28)

OKLAB

oklab(0.3844 0.0763 -0.1051)

OKLCH

oklch(0.3844 0.1299 305.98)

XYZ

xyz(8.06, 5.04, 18.63)

CMYK

cmyk(30%, 64%, 0%, 53%)

CSS

color: #552b79;

CSS variable

--color-552b79: #552b79;

SCSS

$color-552b79: #552b79;

JavaScript

const color = "#552b79";

TypeScript

const color: string = "#552b79";

React

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

JSON

{ "hex": "#552b79", "rgb": { "r": 85, "g": 43, "b": 121 }, "oklch": "oklch(0.3844 0.1299 305.98)" }

Export

Developer code

css

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

Design systems

Nearest official tokens

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

Nearest Tailwind color

purple-900

Noticeably different · ΔE 4.34 · #581C87

Nearest CSS named color

RebeccaPurple

Very different · ΔE 5.93 · #663399

Nearest Material color

purple-900

Very different · ΔE 6.72 · #4A148C

Nearest Bootstrap color

dark

Very different · ΔE 19.2 · #212529

OKLCH

Perceptual 50–950 scale

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

50ffe8ff 100f6daff 200e4c3ff 300d0aaf9 400b68be1 5009a70c4 600815da5 700684986 8004f3668 90038244b 950221132

Palette

Tints & shades

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

f1edf4 e3dce9 d5cade c6b8d2 b8a7c7 aa95bc 9c83b1 8e72a6 80609b 714e8f 633d84 552b79 4e276f 472465 40205b 391d51 321947 2b163d 231232 1c0e28 150b1e 0e0714 07040a

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f1edf4 e3dce9 d5cade c6b8d2 b8a7c7 aa95bc 9c83b1 8e72a6 80609b 714e8f 633d84

Palette

Shades

Mixed toward black — depth, text, and emphasis

4e276f 472465 40205b 391d51 321947 2b163d 231232 1c0e28 150b1e 0e0714 07040a

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

59327a 5c397a 60407b 63477b 674e7c 6b567d 6e5d7d 72647e 756b7e 79727f 7c797f

Harmony

Complementary

Opposite on the color wheel for contrast

#552B79Stop 1 #4F792AStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#2D2A79Stop 1 #552B79Stop 2 #792A76Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#552B79Stop 1 #79542AStop 2 #2A7954Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#552B79Stop 1 #76792AStop 2 #2A792DStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#351B4BStop 1 #5C2E84Stop 2 #8442BDStop 3 #A97BD1Stop 4 #CEB4E4Stop 5

Using this color

Where #552b79 works

#552B79 (#552b79) sits in the deep purple family at about 272° hue, 48% saturation, and 32% lightness. Contrast is 10.46:1 on white and 2.01:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: purple-900 (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, #552b79 is 2.01: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

Fluent Purple#5C2D91 Tailwind purple 900#581C87 RebeccaPurple#663399 Material Purple 900#4A148C Tailwind violet 900#4C1D95 Material Purple 800#6A1B9A Tailwind fuchsia 900#701A75 Spectrum #3B3187#3B3187 DarkSlateBlue#483D8B Indigo#4B0082 Web Safe #660099#660099 Spectrum #2E2768#2E2768