#89409C

Accessibility

6.41:1

Vs white / black

6.41:1 · 3.28:1

Sources

Library color

Codes

Formats

HEX

#89409c

RGB

rgb(137, 64, 156)

RGBA

rgba(137, 64, 156, 1)

HSL

hsl(288, 42%, 43%)

HSLA

hsla(288, 42%, 43%, 1)

HSV

hsv(288, 59%, 61%)

LAB

lab(40.22% 45.58 -36.98)

LCH

lch(40.22% 58.69 320.95)

OKLAB

oklab(0.504 0.1182 -0.1031)

OKLCH

oklch(0.504 0.1568 318.9)

XYZ

xyz(18.15, 11.39, 32.69)

CMYK

cmyk(12%, 59%, 0%, 39%)

CSS

color: #89409c;

CSS variable

--color-89409c: #89409c;

SCSS

$color-89409c: #89409c;

JavaScript

const color = "#89409c";

TypeScript

const color: string = "#89409c";

React

style={{ backgroundColor: "#89409c" }}

JSON

{ "hex": "#89409c", "rgb": { "r": 137, "g": 64, "b": 156 }, "oklch": "oklch(0.504 0.1568 318.9)" }

Export

Developer code

css

:root {
  --#89409c-1: #89409c;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

fuchsia-700

Very different · ΔE 6.17 · #A21CAF

Nearest CSS named color

DarkOrchid

Very different · ΔE 7.91 · #9932CC

Nearest Material color

purple-500

Very different · ΔE 5.3 · #9C27B0

Nearest Bootstrap color

secondary

Very different · ΔE 18.22 · #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.

50ffe1ff 100ffd2ff 200f7baff 300e4a0f7 400cb7fdf 500ad63c1 6009252a3 700764084 8005b2e67 900411e4a 950290b31

Palette

Tints & shades

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

f5eff7 ebdfef e2cfe6 d8bfde ceafd6 c4a0ce ba90c5 b080bd a770b5 9d60ad 9350a4 89409c 7e3b8f 723582 673075 5b2b68 50255b 45204e 391b41 2e1534 221027 170b1a 0b050d

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f5eff7 ebdfef e2cfe6 d8bfde ceafd6 c4a0ce ba90c5 b080bd a770b5 9d60ad 9350a4

Palette

Shades

Mixed toward black — depth, text, and emphasis

7e3b8f 723582 673075 5b2b68 50255b 45204e 391b41 2e1534 221027 170b1a 0b050d

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

88459a 884b97 875095 865593 855b90 85608e 84658c 836b89 827087 827585 817b82

Harmony

Complementary

Opposite on the color wheel for contrast

#89409CStop 1 #529C40Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#5B409CStop 1 #89409CStop 2 #9C4080Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#89409CStop 1 #9C8940Stop 2 #409C89Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#89409CStop 1 #809C40Stop 2 #409C5BStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#401E48Stop 1 #70347FStop 2 #A04AB5Stop 3 #BC80CBStop 4 #D9B7E1Stop 5

Using this color

Where #89409c works

#89409C (#89409c) sits in the purple family at about 288° hue, 42% saturation, and 43% lightness. Contrast is 6.41:1 on white and 3.28:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: fuchsia-700 (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, #89409c is 3.28:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Imagination, luxury, and wisdom. Frequently used for premium, creative, and tech brands. Common uses still include buttons, charts, and accents in the 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

Wisteria#8E44AD Web Safe #993399#993399 Material Purple 500#9C27B0 Material Purple 600#8E24AA Tailwind fuchsia 700#A21CAF Tailwind fuchsia 800#86198F Web Safe #990099#990099 Material Purple 700#7B1FA2 Web Safe #9933CC#9933CC DarkOrchid#9932CC Material Purple 400#AB47BC RebeccaPurple#663399