Color Tool
How to use
What it does
An all-in-one colour workbench: pick any colour and read it as HEX, RGB or HSL, derive palettes from a base hue, build linear and radial gradients, and check whether a foreground and background pair meets WCAG contrast targets. Handy for trying out options while designing, or for picking a site theme that is both readable and easy on the eyes.
How to use it
Choose the base colour with the picker or by typing a value; every panel below refreshes in step. Palette swatches and gradient stops can be clicked to copy their code. In the contrast panel, set the text colour and the background colour separately and the tool reports the ratio plus whether it clears AA or AAA.
FAQ
How is contrast checked?
Against WCAG contrast targets - enter a foreground and background pair and it tells you whether the ratio passes the accessibility thresholds.
Can I copy a colour in another format?
Yes - every panel reads the base colour as HEX, RGB and HSL, and swatches or gradient stops copy their code on click.
Related articles
More tools
Countdowns, time zones, timestamps and date calculations
Compare, stitch, watermark, Base64, plus GIF making and a pixel-art editor.
Random anime-ish pictures and sized placeholder images
Convert between JSON, CSV, XML, YAML and Markdown
Focus on work, rest efficiently
QR code and Code128 barcode generator