Colour Tools

Palette, Gradient, Tint and Shade, CSS Colour Converter and CMYK Preview

Tools for working with colour. Generate palettes and gradients, build tint and shade scales, convert between HEX, RGB, HSL and CMYK, check contrast and recolour images. They cover both screen and print colour.

37 tools tagged Colour

Accessible Colour Palette Generator

Generate a palette where every colour passes WCAG contrast on your background.

Analogous Colour Generator

Generate neighbouring hues from one colour with tints and CSS.

APCA Contrast Checker

APCA Lc contrast score with WCAG 3 draft levels and minimum text sizes.

CMYK Preview

See which screen colours a press cannot actually print.

Colour Blindness Simulator

View any image through protanopia, deuteranopia, tritanopia or achromatopsia.

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 Name Generator (From A Hex Value)

Turn a hex value into colour names that fit its hue and tone.

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.

Colour Scale And Legend Generator

Build a gradient, stepped or category colour legend, download as SVG or PNG.

Complementary Colour Generator

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

Contrast Checker

Check colour contrast against WCAG and APCA.

CSS Colour Converter

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

CSS Colour Names

All 148 CSS named colours with hex and RGB values.

 New

Duotone Effect

Recolour any photo with two colours for a poster-style duotone.

Gradient Maker

Linear, radial and conic CSS gradients with live preview.

Gradient Text Generator

Fill headline text with a CSS gradient and copy the code.

Halftone Generator

Turn a photo into a halftone dot screen in black, white or CMYK.

 New

Image Colour Picker

Click any point in an image to get its HEX code.

Image Dithering Tool

Dither a photo with Floyd-Steinberg, Atkinson or ordered Bayer patterns to a few colours.

Image Filter Sandbox

Slide eight filter functions and copy the CSS declaration.

 New

Image To SVG

Trace a PNG or JPG into a scalable vector SVG.

Luminance Scorer

Score many colour pairs for contrast at once.

 New

LUT Applier

Apply a .cube colour-grading LUT to any photo.

Mesh Gradient Generator

Pure-CSS mesh gradients from stacked radial layers.

Paint Colour Name Generator

Paint colour names like Cornish Slate, Morning Linen and Drawing Room Blue.

Palette Extractor

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

 New

Posterize Effect

Cut a photo down to a few flat colour bands for a poster look.

Random Colour Generator

Roll random hex, RGB or HSL colours in pastel, vibrant, dark and more.

 New

Replace Colour In Image

Swap one colour in a photo or graphic for another, keeping shading.

Resistor Colour Code Calculator

Resistor value and tolerance from 4 or 5 colour bands, with the code table.

RGB To CMYK

Convert hex or RGB colours to CMYK percentages and back.

SVG Colour Replacer

List every colour in an SVG and swap one, all, or to currentColor.

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.