Design & Color
Build colors, gradients, shadows, and CSS.
About Design & Color
Design tools work best when the feedback is immediate: you move a slider, the shadow changes, and the code updates underneath. That loop is what these are for — building a gradient, a shadow, a corner radius, or a full colour palette by eye, then copying CSS you can paste straight into a stylesheet. The contrast checker is the one to run before shipping: it scores a foreground against a background using the WCAG formula, so you find out that light grey on white fails at 2.8:1 while you can still change it. Everything is generated in the browser.
Contrast is the one place in this category where there is a right answer rather than a preference. The standard asks for 4.5:1 for normal text and 3:1 for large text, and the numbers are not arbitrary — they approximate what someone with moderately reduced vision can still read. Placeholder text, disabled states, and pale captions are where sites usually fail, because those are chosen to look quiet and quiet is exactly what low contrast looks like to everyone else.
The colour tools are most useful together. Pick a colour, convert it into the notation your codebase uses, then generate its tints and shades so hover and active states are related to the base rather than guessed at. Building a palette this way keeps a set of colours consistent across a design in a way that choosing each one separately almost never does.