Design Tools

What these design tools cover

Fourteen tools, and nearly all of them are about colour: choosing it, converting it, building a scheme from it, and checking that the result is legible. A few go further and let you see the colour in context or export it in the form your code expects.

They split into four jobs. Generators produce a set of colours from a starting point. Converters move one value between notations. Checkers measure a pair or a palette against the WCAG contrast thresholds. And the visualizer puts a palette and a type pairing onto a mock interface so you can judge it as a design rather than as swatches.

Picking the right one

If you have nothing yet, start with the palette generator, which works from an industry, a mood and a preferred colour rather than asking you to nominate a hex value cold. If you already have a brand colour and need colours to go with it, the scheme generators are the faster route: complementary for the opposite hue, analogous for neighbours with an adjustable spread, triadic for three hues spaced evenly around the circle, and shade-and-tint to turn one colour into a full scale.

If you have a palette and need to know whether it is usable, that is a contrast question. The contrast checker measures a single text-and-background pair against every WCAG threshold; the accessibility checker audits an eight-role interface palette as a whole, which is the one to use before shipping a UI.

• Starting from nothing — Color Palette Generator.
• Building around a colour you already have — the complementary, analogous, triadic and shade-and-tint generators.
• Pulling colours out of a photograph — Image Color Palette Extractor.
• Checking one text and background pair — Color Contrast Checker.
• Auditing a whole interface palette — WCAG Accessibility Checker.
• Seeing colour and type in context — Website Color Visualizer.
• Exporting gradients as CSS, Tailwind or SCSS — CSS Gradient Generator.
• Moving between notations — HEX to RGB and RGB to HSL converters.

Contrast is not optional

A palette that looks good on a designer's monitor can be unreadable on a phone in daylight, and that failure lands hardest on people with low vision. WCAG puts numbers on it: 4.5:1 for body text at AA, 3:1 for large text, and 7:1 for body text at AAA. Those are measurements, not opinions, which is why two of these tools do nothing but measure them.

Check the pairs you will actually ship — body text on its background, muted text on cards, white text on an accent fill. The accessibility checker exists because palettes usually fail on one role rather than all of them, and finding out which one before release is considerably cheaper than afterwards.