Free tools for design
Colour Contrast Tool
See how any text colour sits on any background, solid or gradient, with the WCAG contrast ratio checked as you go. Every Tailwind colour scale is built in, or paste your own colours in hex, RGB, or OKLCH.
Choose what you are colouring, then click a swatch. Add a second background colour to preview a gradient.
Sage
Tailwind
Your colours
Paste one or more colours in hex (with or without the #), RGB, OKLCH, or HSL.
The quick brown fox jumps over the lazy dog
Body text at a reading size. Click any of these lines and type to try your own words, a heading, or a full paragraph of copy.
Small caption text