Color tools

How to use

Pick a color, convert between HEX, RGB and HSL, and check WCAG contrast for a pair. Everything runs in your browser; nothing is uploaded. Swatches are drawn on a canvas so the strict CSP stays unchanged (no inline styles).

Picker and convert

Color picker

HEX

RGB (0–255)

HSL

H (°)

S (%)

L (%)

WCAG contrast

Compare foreground text against a background. Ratios use WCAG 2 relative luminance.

Notes

Contrast follows WCAG 2 relative luminance and the contrast ratio formula. AA normal needs 4.5:1; AA large 3:1; AAA normal 7:1; AAA large 4.5:1.
“Large” text means 18 pt (or 14 pt bold) and up, per WCAG.