Free Design Tools
Colour palettes, shades and contrast checks, CSS gradients and shadows, and icons and favicons for websites and apps.
- Aspect Ratio CalculatorFind the ratio of an image or video and resize it proportionally.In browser
- Chart Maker (bar, line, pie)Turn a few numbers into a clean bar, line, pie or doughnut chart and download it as a PNG for slides, reports and posts.In browser
- Colour Contrast CheckerCheck text/background contrast against WCAG accessibility rules.In browser
- Colour Palette GeneratorMatching colours, tints and shades from one base colour.In browser
- Colour Shades & Tints Scale (50โ950)Turn one brand colour into a 11-step scale (50 to 950) like Tailwind, with CSS variables you can paste into your stylesheet.In browser
- CSS Box Shadow GeneratorTune a shadow and copy the CSS.In browser
- CSS clamp() Fluid Size GeneratorMake font sizes and spacing that scale smoothly between a small and a large screen, as one clamp() line.In browser
- CSS Gradient GeneratorBuild a CSS gradient and copy the code.In browser
- Image Colour Palette ExtractorFind the main colours of a picture (HEX, RGB and share of the image) for design, branding and websites. Never uploaded.In browser
- PX โ REM ConverterConvert CSS pixels to rem and back.In browser
- Screen Colour Picker (eyedropper)Pick any colour from your screen, even outside the browser, and get its HEX, RGB and HSL codes. Works in Chrome and Edge on a computer.In browser
- SVG MinifierShrink SVG files: removes comments, editor metadata and extra spaces, and rounds path numbers. Great for icons and logos.In browser
Questions
Can I check if my colours are readable?
Yes: the Colour Contrast Checker tests them against the WCAG rules.