Work with #DDC3FF

Inspect equivalent formats, text contrast, palette steps, hue relationships, and copy-ready CSS for any opaque color entered as HEX, RGB, HSL, HWB, OKLCH, or a CSS keyword.

Tune OKLCH, then keep its sRGB fallback honest.

Adjust perceptual lightness, chroma, and hue. The instrument keeps the authored OKLCH value separate from the six-digit fallback used by the rest of this workspace.

Mapped to sRGB Chroma is reduced at constant lightness and hue before HEX conversion.

L Lightness C Chroma H Hue

Equivalent color formats

These CSS notations, including perceptual OKLCH, are calculated from the same normalized six-digit sRGB value.

Black and white text contrast

Compare WCAG relative-luminance ratios before choosing text. A passing ratio still needs to be checked in the complete interface.

Recommended foreground: #000000 · 13.32:1

White text1.58:1

AA normal text: Fail
AA large text: Fail
AAA normal text: Fail
AAA large text: Fail

Black text13.32:1

AA normal text: Pass
AA large text: Pass
AAA normal text: Pass
AAA large text: Pass

Continue in the contrast labCheck #DDC3FF against another colorOpen the full WCAG pair checker with this color and its strongest black-or-white foreground already filled in.

Calculated tints and shades

Use these reproducible sRGB mixtures as starting points, then verify them in the context of your interface.

Tints

Shades

Hue-wheel starting points

These variants rotate HSL hue while preserving saturation and lightness. They are mathematical options, not automatic design recommendations.

Copy-ready CSS

Start with custom properties for the normalized color and the stronger black-or-white foreground.

--color-hex-ddc3ff: #DDC3FF;
--color-hex-ddc3ff-rgb: 221 195 255;
--color-hex-ddc3ff-hsl: 266 100% 88%;
--color-hex-ddc3ff-oklch: oklch(85.9% 0.0862 304.39);
color: #000000;
background-color: var(--color-hex-ddc3ff);