CSS and Colour Tools for Interface Work

Interface details like a gradient, a shadow, or a colour pair are quicker to judge visually than to write by hand. These tools let you adjust the result and copy the CSS once it looks right, rather than editing numbers and reloading.

CSS & Design Tools (9)

Contrast Is a Requirement, Not a Preference

WCAG asks for a contrast ratio of at least 4.5:1 between body text and its background, and 3:1 for large text. Light grey on white is the most common failure, and it fails for everyone in bright sunlight, not only for readers with low vision. Checking the ratio takes seconds and is far cheaper than an accessibility audit finding it later.

Colour Formats Serve Different Jobs

HEX is compact and familiar. RGB maps directly to how screens emit light. HSL separates hue from saturation and lightness, which makes it the easiest format for building a palette by hand: fix the hue, then vary lightness to produce a consistent set of tints and shades. Converting between them is mechanical, so pick whichever format makes the current decision easiest.

Restraint Reads as Quality

Gradients with many stops and shadows with large blur values tend to look heavier than intended once they sit next to real content. A subtle shadow with low opacity usually communicates elevation better than a strong one, and a two-stop gradient usually looks more deliberate than a five-stop one. Generate the effect, then reduce it until removing more would lose the point.

Other Categories