Tools

Pick one base colour and the tool builds a scale of eleven shades from lightest to darkest. Click a shade to copy its code.

• Harmonies suggest colours that go with yours.
• The preview shows the palette on a sample interface, light and dark, with readability checks.
• Export gives code for Tailwind, plain CSS or JSON.
• Use in components recolours the previews of every component on the site.

Pick a heading font and a body font and see them on a sample website straight away, so you know whether they work together before using them. The tool then gives you the code to load them.

Build a gradient from up to five colours: linear, radial or conic, at the angle you want. Copy the result as CSS or as a Tailwind class. The Random button gives you a starting point.