Color & Design
A universal color converter, pickers, palette generators, contrast checkers, and gradient builders.
15 tools available
Color & Design tools help you build, convert, and validate the colours behind a brand or interface. Pick colours from an interactive wheel, generate harmonious palettes, build CSS gradients, and — crucially — check that your text meets accessibility contrast requirements before it ships.
Colour on screens lives in several models at once. RGB/HEX describes what the display emits; HSL/HSV describe colour the way humans reason about it (hue, then saturation and lightness); CMYK targets print. Good design tooling moves losslessly between them and flags where a colour will fall apart — for example, when a foreground/background pair drops below the WCAG 4.5:1 contrast ratio needed for normal text. These tools turn colour from guesswork into something measurable, all computed live in the browser.
Colour model cheat sheet
| Model | Channels | Range | Best for |
|---|---|---|---|
RGB / HEX | Red, Green, Blue | 0–255 / #000–#FFF | Screens, CSS |
HSL | Hue, Saturation, Lightness | 0–360°, 0–100% | Intuitive editing, themes |
HSV/HSB | Hue, Saturation, Value | 0–360°, 0–100% | Colour pickers |
CMYK | Cyan, Magenta, Yellow, Key | 0–100% | Print production |
For accessible text aim for a contrast ratio of at least 4.5:1 (normal) or 3:1 (large/bold).