Design and colour tools

Colour maths, contrast checking and gradients, in the place you are already working.

1 tool ready to use

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 work is small, frequent and interrupting. You need a contrast ratio, a hex value in another notation, or a gradient that does not go grey in the middle, and you need it without leaving what you were doing. Every tool here answers in the tab you already have open and costs one page load.

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.

4 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.

Colour ConverterHEX, RGB, HSL, OKLCH and CSS names, converted live and copied in one press.In build

Contrast CheckerWCAG 2.2 ratios for text and UI, with the nearest passing shade suggested when a pair fails.In build

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 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.