Web and design tools

Every tool in this section makes something you look at: a gradient, a shadow, a palette, a preview card. You need the result to change while you drag the slider. Send that to a server and the delay lands exactly where it ruins the work.

There is a second reason, the same one behind the rest of the site. The CSS you paste into a minifier is unreleased. The image you inline is an unannounced logo. The meta tags describe a page nobody has seen. None of it has to leave your machine, so none of it does.

Which is also why they work with the network off. Disconnect, reload, and the colour converter and the generators and the minifiers all still run. There was never a server involved.

Colour

The converter takes a colour in any format a stylesheet accepts and gives you all of them — hex, rgb, hsl, hsv, cmyk, and the CSS name where one exists. The palette generator builds a whole scheme from one colour, including the 50–900 tint scale a design system runs on, and simulates how it looks to someone with colour vision deficiency. The contrast checker measures text against its background for WCAG and hands back the nearest shade of the same hue that passes.

CSS you would otherwise guess at

Gradients in all three forms, with as many stops as you need. Box shadows stacked in layers, because one shadow always looks flat. Border radius per corner, including the elliptical form that produces organic blob shapes and which almost no other generator offers.

Code and markup

The CSS minifier compresses or expands a stylesheet without breaking calc(), which is the mistake that costs a layout silently. The HTML minifier refuses to delete the whitespace between inline elements, because that whitespace is a word gap. The entity encoder escapes markup so it displays as text, and decodes it back.

Shipping a page

Meta tags for search and social, with a preview of the card people will actually see and automatic escaping of the quotes that silently truncate a description. Data URIs for inlining a small image, with an honest warning when the file is too large for it to be worth doing. Aspect ratios for getting dimensions right, and for the CSS property that stops your page jumping as images arrive.