Design tools

Colour and layout helpers for designers, developers and anyone making slides.

1 tool

Which tool should you use?

This section currently has one tool: Color Converter & Palette. Pick or paste a colour to get its HEX, RGB and HSL codes, see whether text on it passes WCAG contrast, and generate shades and matching palettes you can copy as CSS.

For work on pictures rather than colours, see the image tools such as JPG PNG WebP Converter and Bulk Image Resizer. To make a QR code in your brand colour, use QR Code Generator.

Frequently asked questions

Why does contrast matter?

Text that doesn’t stand out from its background is hard to read for many people, especially on phones outdoors. WCAG asks for a ratio of at least 4.5:1 for normal text.

Will more design tools be added?

Yes. More colour and layout tools are planned, and each one is added once its page and testing are complete.

Related guides

Other categories