Design and colour tools

Check colour contrast, convert colours, build gradients and create an email signature in your browser.

4 tools ready to use

Email Signature GeneratorCreate a clickable HTML signature or a team batch from CSV. Preview, copy with formatting and install it yourself.Open toolFree · in-browser CSS Gradient GeneratorLinear, radial and conic gradients with per-stop control. Copy the CSS, or save the same gradient as a PNG.Open toolFree · in-browser Colour ConverterConvert HEX, RGB, HSL, OKLCH and more. Keep opacity, check gamut and export a whole palette.Open toolFree · in-browser Contrast CheckerCheck WCAG 2.2 colour ratios, preview text and copy AA, AAA and UI pass levels.Open toolFree · in-browser

Check a text colour against its background, convert a hex value, build a CSS gradient or copy an email signature. The live tools on this shelf handle those jobs in your browser. Palette tools are still in build, listed separately further down.

It is also the shelf where the browser is genuinely the best place for the job. CSS is where these values are going to end up, so a tool that renders with the same engine your site will use is showing you the real answer rather than an approximation of it.

2 more in build

Named and designed, but not written yet. They are listed so you can see where this shelf is going. No dates, because a promised date on a free project is a broken one waiting to happen.

Palette GeneratorBuild a tint and shade ramp from one seed colour, interpolated in a perceptual space.In build

Image Colour ExtractorPull the dominant colours out of a photo and take them away as a palette.In build

Guides for these tools

How to add an HTML email signaturePaste formatted text into Gmail, Outlook or Apple Mail. Fix visible HTML, missing images and team rollout mistakes.WCAG contrast ratios: what passes, and what to testText size rules, UI adjacency, transparency and testing real pages. Worked WCAG 2.2 examples.HEX, RGB, HSL and OKLCH: which colour format should you use?Worked conversions, transparency and gamut explained. Why an RGB to CMYK estimate is not a print match.How to make a gradient in CSSLinear, radial and conic syntax explained, why a two-colour blend goes grey in the middle, and how to put a gradient on text and on a border.

This is one shelf of the full floi directory. The rest is media, text, developer, documents, education and design.