PickColour · Free
Pick and convert colours in OKLCH, with gamut warnings for sRGB and P3.
Design tools
Small tools for colour, type, motion, icons and layout
51 tools. Each opens in a new tab.
Tools
- Pick
PickTypography · Free
Generates fluid type and space scales that grow smoothly between two viewport widths.
Motion · Free
Draw and animate ASCII art in the browser, frame by frame, and export it.
Backgrounds · Free
Background patterns and gradients as small snippets of Tailwind to copy.
3D · Free
A free low-poly 3D modeller with texturing and animation, in the browser or on the desktop.
SVG · Free
A free set of abstract shapes with grainy gradients, as SVG and React components.
Typography · Free
Font pairings chosen by a model of what pairs well: lock a face and generate its partners.
Typography · Free
Indian Type Foundry's free library of quality typefaces, licensed for personal and commercial use.
Typography · Free
A curated gallery of free typefaces, each shown set in its own specimen.
Motion · Free
A timeline for animating interface components, now free and open source.
Icons · Free
Heroicons that move on hover, as React components to copy.
Icons · Free
Make app icons and favicons from a clip-art icon, text or a picture, exported for every platform.
SVG · Free
Placeholder logos to drop into a design before the real ones arrive.
Effects · Free
A studio for generative shaders: tune the parameters and export the result.
Motion · Free
Write animations in TypeScript and edit their timing in a live editor; open source.
Colour · Free
Colour palettes drawn along lines through colour space between anchor colours you place.
Prototyping · Free
Google's tool for generating interface designs and their code from a prompt or a sketch.
SVG · Free
Brand logos as clean SVG files, searchable, with light and dark versions where they exist.
Typography · Free
A catalogue of free and open-source typefaces made by independent designers.
Typography · Free
Upload a picture of lettering and get the typefaces it most resembles.
Accessibility · Free
Build colour systems whose shades hit consistent, accessible contrast ratios.
Motion · Free
Drag the handles of a cubic Bézier easing curve and compare it against others.
Motion · Free
A cheat sheet of common easing curves, with previews and copyable code.
Prototyping · Free
A hand-drawn style whiteboard for quick sketches, diagrams and wireframes.
Backgrounds · Free
A collection of free SVG generators for patterns, gradients, noise and shapes.
Icons · Free
Search and copy icons from over a hundred open-source icon sets in one place.
Layout · Free
Build CSS Grid layouts visually and copy the generated HTML and CSS.
Icons · Free
A consistent open-source icon set with packages for most frameworks.
Icons · Free
A flexible icon family in six weights, from thin to duotone.
Colour · Free
Try a palette and type pairing on a live sample website before you commit to it.
Effects · Free
Create a cohesive set of shadows tuned to your background colour and light source.
Effects · Free
Generate layered, natural-looking box shadows with a few sliders.
Images · Free
Compress and convert images in the browser, comparing codecs side by side.
SVG · Free
Edit SVG path commands point by point and watch the shape update live.
SVG · Free
Optimise SVG files in the browser with a visual preview of every SVGO option.
Prototyping · Free
A fast, friendly infinite canvas for sketching and diagramming together.
Typography · Free
Preview a modular type scale with your own font and ratio, then copy the CSS.
Colour · Free
Turn one brand colour into a full Tailwind-style shade scale from 50 to 950.
Typography · Free
Drop in a font file to see its OpenType features, variable axes and supported characters.
Accessibility · Free
Check a colour pair's contrast and see who it works for across types of vision.
Typography · Free
Type a word and see it set in every font installed on your computer.