Swatch turns any color you type — a hex code, an rgb() or hsl() value, or a CSS name like "tomato" — into every other format, with a tint-and-shade scale and a WCAG contrast checker so you can see whether text will be readable. Type a color, copy what you need, and check a pairing. Everything runs in your browser; nothing is uploaded.

Convert

Tints & shades

Lighter on the left, darker on the right — click any swatch to load it.

Contrast checker (WCAG)

Text color

Background

Big text sample

Normal-size body text — the quick brown fox jumps over the lazy dog.

— contrast ratio

Colors are parsed by your browser's own CSS engine, so anything valid in CSS works. Contrast ratios use the WCAG 2.1 relative-luminance formula. "AA" needs 4.5:1 for normal text or 3:1 for large text (18pt / 14pt bold); "AAA" needs 7:1 or 4.5:1. Everything runs on your device; nothing is uploaded.