Colour, type and spacing you can paste straight into CSS.
Colour, type, and spacing utilities that output CSS you can paste. Everything is generated locally in your browser — no sign-in, no saved projects.
The field 6 utilities · judged on neutral grey
Colour Palette Generator
Build a harmonised palette from one base colour.
color-palette-generatorContrast Checker
Check a foreground and background pair against WCAG contrast ratios.
contrast-checkerCSS Gradient Generator
Compose a linear gradient and copy the CSS.
css-gradient-generatorBox Shadow Generator
Tune offset, blur, spread, and colour, then copy the CSS.
box-shadow-generatorType Scale Generator
Generate a modular type scale from a base size and ratio.
type-scale-generatorSpacing Scale Generator
Produce a consistent spacing scale from a base unit.
spacing-scale-generatorContrast results follow the WCAG 2 relative-luminance formula. Meeting a ratio is one part of accessibility — colour should never be the only way meaning is conveyed.