Skip to content

Design Tools

Colour, spacing and asset helpers for designers and front-end developers.

Color ConverterHex, RGB, HSL and OKLCH in one place, with sliders and an eyedropper.Contrast CheckerWCAG contrast ratio with AA and AAA verdicts, judged before rounding.

Other categories

About Design Tools

This category exists for the moments when design work runs into arithmetic: a palette that has to be restated in another notation, a text color that has to survive an accessibility audit, a value that looks right on your monitor and wrong in the specification. These are small jobs with exact answers, and they deserve tools that show their working instead of handing down a number.

The color converter treats the newer OKLCH notation as a first-class citizen rather than an afterthought. A value that cannot exist on an sRGB screen is mapped into range and labeled as mapped, never silently redrawn as something else. The contrast checker brings the same seriousness to WCAG arithmetic: thresholds are compared against the exact ratio, not the rounded display, because a rounded pass that fails in an audit helps nobody.

Both tools read the same family of CSS color notations, so a value copied from one pastes straight into the other — check the contrast of a color you just converted, or convert the color that just failed a check.

And because a brand palette in progress or an unreleased interface color is confidential material, everything here computes locally. The colors you work with stay on your machine.

Questions

Which color notations do these tools understand?

Hex in all four lengths, rgb() and hsl() in modern or legacy syntax, and oklch() including deg, percentages and the none keyword. The same parser sits behind every tool in the category.

Do I need design software installed?

No. Everything runs in the browser you already have, on any operating system, with nothing to install and no account to create.

Can anyone see the colors I work with?

No — the calculations happen in your browser, and the page can only connect back to its own origin. An unreleased brand color never leaves your machine.

Will more design tools appear here?

That is the intent. The category opens with color because color is the most frequent conversion job, and new tools will join as they are built.

Esc

16 results