Free Design Tools

Which one do you actually need?

Four of these are about colour and four are about the shapes and measurements around it. On the colour side, the converter moves one value between hex, RGB and HSL, the palette generator builds a set that holds together, and the contrast checker is the one that decides whether any of it can be read. Run the checker before you commit to a palette rather than after, because a pair that fails at 4.5:1 usually fails by enough that no amount of adjustment saves both colours.

On the other side, the gradient, box shadow and border radius generators exist because these three properties have syntax that is easy to read and tedious to write from memory. The aspect ratio calculator and the unit converter answer arithmetic that comes up constantly and that nobody enjoys doing twice.

What this category will not do for you

None of these have an opinion about whether a design is good. The palette generator produces combinations that are mathematically related, which is not the same as appropriate for your subject, and the contrast checker enforces a floor rather than a target. Passing WCAG AA means text is legible, not that it is comfortable to read for a thousand words.

There is also no image editing here and no layout tool. These produce values you paste into CSS, and the design writing covers what those values actually control.

Frequently asked questions

What contrast ratio do I need to pass WCAG?

For normal body text, 4.5:1 against its background meets AA and 7:1 meets AAA. Large text, meaning at least 24px, or 18.66px when bold, needs 3:1 for AA and 4.5:1 for AAA. Interface components and meaningful graphics need 3:1. The ratio runs from 1:1 to a maximum of 21:1, which is pure black on pure white.

Should I write colours as hex, RGB or HSL?

They describe the same colours, so it is about what you are doing. Hex is compact and universal. RGB is what the screen works in. HSL is the one worth using when you need to generate a variation, because making something lighter or less saturated is a change to one number instead of three.

Why does my gradient have a grey band through the middle?

Because the browser interpolates between the two colours in sRGB, and the path between two saturated hues passes through a desaturated middle. Adding an intermediate colour stop at the midpoint, or choosing two hues that are closer together, avoids the dead zone.