Design Tools
Pick colours, generate palettes, craft CSS gradients, check WCAG contrast and optimise SVG markup. Built for designers and front-end developers.
14 tools available
⌘K
Color Picker
Pick colours and convert between HEX, RGB, HSL.
Open
Color Palette Generator
Generate harmonious colour palettes from a base colour.
Open
CSS Gradient Generator
Build linear and radial CSS gradients visually.
Open
Contrast Checker
Check WCAG colour contrast between two colours.
Open
SVG Optimizer
Minify and clean SVG markup safely.
Open
Color Shade Generator
Generate lighter and darker shades of a colour.
Open
PX to REM Converter
Convert pixels to REM and EM units.
Open
Color Accessibility Tester
Simulate how colours look to colour-blind users.
Open
Typography Scale Generator
Generate a modular typography scale.
Open
Icon Optimizer
Optimize SVG icons for production use.
Open
Design Token Generator
Generate design tokens from a colour palette.
Open
Border Radius Playground
Visually design complex border-radius values.
Open
Component Spacing Calculator
Generate a consistent spacing system.
Open
Shadow Generator
Visually design CSS box shadows.
Open