Colour Tools for Designers and Developers

Choosing colours, and checking that they work. Build a palette from a base colour by rule, test whether text is readable against its background by the standard everyone is measured against, generate the lighter and darker steps a design system needs, pull the colours out of a photograph, and see which screen colours will disappoint on paper.

Every Colour tool

Analogous Colour Generator

Generate neighbouring hues from one colour with tints and CSS.

CMYK Preview

See which screen colours a press cannot actually print.

CSS Colour Converter

Convert CSS colours between hex, rgb, hsl, hwb, lab, lch and oklch.

Colour Harmonizer

Generate harmonious palettes in OKLCH, HSL, RGB and hex.

Colour Mixer

Blend two colours at any ratio and copy the color-mix() CSS.

Colour Palette Generator

Generate a full UI palette with light and dark modes from one colour.

Colour Picker

Pick a colour and copy it in every CSS format at once.

Complementary Colour Generator

Find a colour's complement with tints, shades and copyable CSS.

Contrast Checker

Check colour contrast against WCAG and APCA.

Luminance Scorer

Score many colour pairs for contrast at once.

Palette Extractor

Pull the dominant colours out of a photo as hex codes.

Tailwind Colour Converter

Convert hex codes to the nearest Tailwind class, or Tailwind classes to hex.

Tint & Shade Scale

One brand colour into a full 50–950 palette scale.

Triadic Colour Generator

Build triadic and tetradic schemes with tints, a wheel and CSS.

Building palettes

The colour harmoniser takes one colour and generates complementary, analogous, triadic, split-complementary and tetradic schemes by rotating around the hue wheel, with the results shown as swatches and as hex, RGB, HSL and OKLCH values. Tint and shade scale produces the numbered steps — 50 through 900 in the Tailwind convention, or however many you want — that turn a brand colour into a usable scale, mixing in a perceptual colour space so the steps look evenly spaced rather than merely being evenly numbered.

Checking readability

The contrast checker computes the WCAG contrast ratio between foreground and background and reports pass or fail at AA and AAA for normal and large text, along with the APCA score that better predicts real legibility. It suggests the nearest passing colour when a pair fails. The luminance scorer shows the relative luminance of any colour — the number contrast is built from — and is useful for deciding whether text over a colour should be black or white.

From images and to print

Palette extractor reads an image you drop in and returns its dominant colours, ordered by coverage, so a design can be matched to a photograph or a logo. CMYK preview converts screen colours to the nearest CMYK approximation and shows both side by side, which is how you discover before the print run that the bright blue in the design is not a colour ink can produce.

Formats

Every tool accepts and outputs hex, RGB, HSL and the newer OKLCH and display-p3 notations, and copies the CSS value in whichever form you need. Paste a colour in one format and read it back in another; the conversion is exact where the gamut allows and clearly marked where it has been clipped.

Local processing

Images stay in your browser; extraction is done on your device, and nothing is uploaded or stored.