Design tools
Colour conversion, palettes, gradients, box shadows, border radius and WCAG contrast checks — with copyable CSS.
8 tools · free · no account · nothing uploaded
All 8 design tools
Color Converter
Convert colours between HEX, RGB, HSL and HSV, check contrast ratios and copy ready-to-use CSS values.
Open toolCSS Gradient Generator
Design a gradient with two or three colours, adjust the angle and copy the CSS.
Open toolBox Shadow Generator
Create a box shadow with live preview and copy the exact CSS declaration.
Open toolColor Palette Generator
Start from any colour and get five tints, five shades and three harmony colours with one-click copying.
Open toolFavicon Generator
Design a simple favicon from a letter or emoji, then download a multi-size .ico plus PNG versions.
Open toolBorder Radius Generator
Set each corner independently and copy the ready-to-use border-radius CSS.
Open toolColor Contrast Checker
Check the contrast ratio between text and background and see WCAG AA and AAA results.
Open toolColor Picker
Pick the exact colour of any pixel in a photo and read it as HEX, RGB and HSL — useful for matching a brand colour from a screenshot.
Open toolWhat these design tools cover
The fiddly parts of interface work. Convert a colour between HEX, RGB, HSL and HSV, build a palette from one base hue, generate a CSS gradient or box shadow, round a corner radius, and check a foreground and background pair against the WCAG contrast thresholds before it ships. Every result is copy-ready CSS rather than a picture of a colour.
Common jobs
- Checking whether grey text on white passes WCAG AA
- Turning a brand HEX into HSL for a gradient
- Generating a layered box shadow without hand-tuning four values
Why they run on your device
These pages are static files. The work is done by JavaScript in your tab, so a file or a password never leaves your machine — there is no upload endpoint on this site to send it to. That also means no account, no usage counter and no queue.
Questions
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text. The checker labels which threshold a pair passes.
Can I paste the output straight into CSS?
Yes. Colour, gradient, shadow and radius tools produce valid CSS declarations.