Colour, contrast, codes and placeholder copy.

About these tools

Eleven tools for the moments in a design where you need something quickly — a palette to start from, a contrast ratio to check against WCAG, a gradient, box-shadow or border-radius to copy straight out as CSS, a colour converted between HEX, RGB and HSL, an aspect ratio worked out, fancy text for a bio, or a block of placeholder copy that flows like the real thing.

These are the small interruptions that break concentration mid-project. Each one is a single page that loads instantly and gives you something you can paste straight back into your work.

Nothing here needs an account, and nothing you put into any of them is uploaded or stored. Every tool is a single page that does one job, so you can bookmark the one you use and skip this page entirely next time.

What these are for

These eleven tools cover the small, repeated decisions that sit between a design idea and working CSS. Colour work is the largest group: palette generation for building a scheme, format conversion for moving between HEX, RGB and HSL, and contrast checking for confirming that text will actually be readable rather than merely looking fine to you on your own screen.

The generators — gradients, shadows, border radius, type scale — exist because the CSS syntax for each is fiddly enough that adjusting values by hand and reloading is slow. Seeing the result change as you move a control is a different working method from writing a value and guessing, and it is generally faster to arrive somewhere good.

Contrast is the one to take seriously

Of everything here, the contrast checker is the tool most likely to change a design decision. The WCAG standard sets a minimum ratio of 4.5:1 for normal body text against its background, and 3:1 for large text, which is defined as 18.66px bold or 24px and above. The AAA level asks for 7:1 and 4.5:1 respectively.

Light grey text on white is the most common failure, and it fails for a reason worth understanding: it looks acceptable on a bright calibrated screen in a dark room and becomes unreadable on a phone outdoors, on an older display, or to anyone with reduced contrast sensitivity, which includes a large proportion of readers over fifty. Checking the ratio takes seconds and removes the guesswork entirely. It is also frequently a legal requirement rather than a nicety, depending on the sector and jurisdiction a site operates in.

A note on colour and screens

What you see depends on your display. Uncalibrated monitors, colour profile mismatches and phone screens with saturation boosting all shift the same hex value's appearance. For anything that has to match across devices or go to print, trust the numbers rather than your eye — which is precisely what these tools are for.

Browse the rest