#DE4DFF

Accessibility

6.61:1

Vs white / black

3.18:1 · 6.61:1

Sources

Library color

Codes

Formats

HEX

#de4dff

RGB

rgb(222, 77, 255)

RGBA

rgba(222, 77, 255, 1)

HSL

hsl(289, 100%, 65%)

HSLA

hsla(289, 100%, 65%, 1)

HSV

hsv(289, 70%, 100%)

LAB

lab(59.94% 78.5 -61.72)

LCH

lch(59.94% 99.86 321.82)

OKLAB

oklab(0.6891 0.2027 -0.173)

OKLCH

oklch(0.6891 0.2665 319.52)

XYZ

xyz(50.83, 28.06, 97.33)

CMYK

cmyk(13%, 70%, 0%, 0%)

CSS

color: #de4dff;

CSS variable

--color-de4dff: #de4dff;

SCSS

$color-de4dff: #de4dff;

JavaScript

const color = "#de4dff";

TypeScript

const color: string = "#de4dff";

React

style={{ backgroundColor: "#de4dff" }}

JSON

{ "hex": "#de4dff", "rgb": { "r": 222, "g": 77, "b": 255 }, "oklch": "oklch(0.6891 0.2665 319.52)" }

Export

Developer code

css

:root {
  --#de4dff-1: #de4dff;
}

Design systems

Nearest official tokens

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

Nearest Tailwind color

fuchsia-500

Noticeably different · ΔE 2.65 · #D946EF

Nearest CSS named color

Fuchsia

Noticeably different · ΔE 4.96 · #FF00FF

Nearest Material color

purple-300

Very different · ΔE 9.21 · #BA68C8

Nearest Bootstrap color

secondary

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

50ffd1ff 100ffbfff 200ffa3ff 300fd81ff 400e555ff 500c730e7 600a725c3 70088179f 80069097d 9004d005c 95032003f

Palette

Tints & shades

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

fcf0ff fae1ff f7d3ff f4c4ff f1b5ff efa6ff ec97ff e988ff e67aff e46bff e15cff de4dff cc47ea b940d5 a73abf 9433aa 812d95 6f2780 5c206a 4a1a55 381340 250d2a 130615

Palette

Tints

Mixed toward white — soft backgrounds and highlights

fcf0ff fae1ff f7d3ff f4c4ff f1b5ff efa6ff ec97ff e988ff e67aff e46bff e15cff

Palette

Shades

Mixed toward black — depth, text, and emphasis

cc47ea b940d5 a73abf 9433aa 812d95 6f2780 5c206a 4a1a55 381340 250d2a 130615

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

d651f4 ce56ea c75adf bf5ed5 b762ca af67c0 a76bb5 9f6faa 9873a0 907895 887c8b

Harmony

Complementary

Opposite on the color wheel for contrast

#DE4DFFStop 1 #6DFF4DStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#854DFFStop 1 #DE4DFFStop 2 #FF4DC6Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#DE4DFFStop 1 #FFDE4DStop 2 #4DFFDEStop 3

Harmony

Split complementary

Base plus two accents beside the complement

#DE4DFFStop 1 #C6FF4DStop 2 #4DFF85Stop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#530066Stop 1 #9200B3Stop 2 #D000FFStop 3 #DE4DFFStop 4 #EC99FFStop 5

Using this color

Where #de4dff works

#DE4DFF (#de4dff) sits in the purple family at about 289° hue, 100% saturation, and 65% lightness. Contrast is 3.18:1 on white and 6.61:1 on black, so near-black labels read more clearly on the swatch itself. Nearest Tailwind token: fuchsia-500 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
large titles on light backgrounds (WCAG AA Large)
text or icons on charcoal / dark mode

Do not use #de4dff as small body text on white — 3.18:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.

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

Tailwind fuchsia 500#D946EF Web Safe #CC66FF#CC66FF Web Safe #FF33FF#FF33FF Fuchsia#FF00FF Web Safe #CC33FF#CC33FF MediumOrchid#BA55D3 Web Safe #FF66FF#FF66FF Tailwind fuchsia 400#E879F9 Web Safe #CC00FF#CC00FF Web Safe #CC66CC#CC66CC System Purple#AF52DE Orchid#DA70D6

Where #de4dff works

Sensible jobs for this swatch

supporting UI accents

large titles on light backgrounds (WCAG AA Large)

text or icons on charcoal / dark mode

Do not use #de4dff as small body text on white — 3.18:1 misses WCAG AA (4.5:1). Pair it with a darker shade from the scale below, or check pairs in the contrast checker.