Tool index

100+ tools for choosing color on the web

Every one of them works offline, keeps your data on your machine, and shares the same color engine — so a value you copy out of one tool means exactly the same thing in the next.

Search all 103 tools, the articles and the glossary

Backgrounds

Pick, pair and pressure-test the color behind everything else.

7

Background Color Picker

The main event — pick a background and watch a whole interface build itself around it.

Surface System Generator

One background in, a full elevation stack out.

Readable Text Finder

Given this background, what text color actually works?

Dark Mode Generator

Turn a light theme into a dark one that does not look inverted.

Overlay & Scrim Calculator

How dark does the scrim need to be for the text to survive?

CSS Pattern Backgrounds

Dots, grids, stripes and checks — pure CSS, no images.

Noise & Grain Generator

Kill the banding, add the film grain.

Background Color Tools — what they do and how to choose

Palettes

Build a set of colors that belong together.

25

Palette Generator

Nine harmony rules, computed in a perceptual color space.

Opposite Color Finder

Three different answers to “what’s the opposite of this?”

Complementary Colors

The 180° pair, done properly.

Analogous Colors

Neighbors on the wheel. The quietest palette that still has a hue.

Triadic Colors

Three hues, 120° apart, evenly loud.

Split Complementary Colors

Complementary contrast without the vibration.

Tetradic & Square Colors

Four hues. Two complementary pairs. Handle with care.

Monochromatic Palette

One hue, eleven convictions.

Shades, Tints & Tones

Toward black, toward white, toward gray.

Color Mixer

Mix two colors in five different color spaces and see why it matters.

Palette from Image

Drop an image, get the colors — and the background it wants.

Random Palette Generator

Constrained randomness. Press space until something lands.

Interactive Color Wheel

The wheel, but plotted in OKLCH where the maths is honest.

Shades of Red

Every useful red, generated rather than hand-listed.

Shades of Orange

Every useful orange, generated rather than hand-listed.

Shades of Yellow

Every useful yellow, generated rather than hand-listed.

Shades of Green

Every useful green, generated rather than hand-listed.

Shades of Teal

Every useful teal, generated rather than hand-listed.

Shades of Cyan

Every useful cyan, generated rather than hand-listed.

Shades of Blue

Every useful blue, generated rather than hand-listed.

Shades of Purple

Every useful purple, generated rather than hand-listed.

Shades of Magenta

Every useful magenta, generated rather than hand-listed.

Shades of Pink

Every useful pink, generated rather than hand-listed.

Shades of Brown

Every useful brown, generated rather than hand-listed.

Shades of Gray

Every useful gray, generated rather than hand-listed.

Color Palette Generators — what they do and how to choose

Conversion

Move between every notation the web understands.

52

Universal Color Converter

Every notation the web understands, at once.

OKLCH Explorer

The color space CSS finally gave us. Learn it here.

Color Name Finder

What do I even call this?

Color Temperature Converter

Kelvin to RGB, warm to cool.

HEX to RGB Converter

HEX color code in, RGB out — with the working shown.

HEX to HSL Converter

HEX color code in, HSL out — with the working shown.

HEX to HSB Converter

HEX color code in, HSB (HSV) out — with the working shown.

HEX to CMYK Converter

HEX color code in, CMYK out — with the working shown.

HEX to OKLCH Converter

HEX color code in, OKLCH out — with the working shown.

RGB to HEX Converter

RGB in, HEX color code out — with the working shown.

RGB to HSL Converter

RGB in, HSL out — with the working shown.

RGB to HSB Converter

RGB in, HSB (HSV) out — with the working shown.

RGB to CMYK Converter

RGB in, CMYK out — with the working shown.

RGB to OKLCH Converter

RGB in, OKLCH out — with the working shown.

HSL to HEX Converter

HSL in, HEX color code out — with the working shown.

HSL to RGB Converter

HSL in, RGB out — with the working shown.

HSL to HSB Converter

HSL in, HSB (HSV) out — with the working shown.

HSL to CMYK Converter

HSL in, CMYK out — with the working shown.

HSL to OKLCH Converter

HSL in, OKLCH out — with the working shown.

HSB to HEX Converter

HSB (HSV) in, HEX color code out — with the working shown.

HSB to RGB Converter

HSB (HSV) in, RGB out — with the working shown.

HSB to HSL Converter

HSB (HSV) in, HSL out — with the working shown.

HSB to CMYK Converter

HSB (HSV) in, CMYK out — with the working shown.

HSB to OKLCH Converter

HSB (HSV) in, OKLCH out — with the working shown.

CMYK to HEX Converter

CMYK in, HEX color code out — with the working shown.

CMYK to RGB Converter

CMYK in, RGB out — with the working shown.

CMYK to HSL Converter

CMYK in, HSL out — with the working shown.

CMYK to HSB Converter

CMYK in, HSB (HSV) out — with the working shown.

CMYK to OKLCH Converter

CMYK in, OKLCH out — with the working shown.

OKLCH to HEX Converter

OKLCH in, HEX color code out — with the working shown.

OKLCH to RGB Converter

OKLCH in, RGB out — with the working shown.

OKLCH to HSL Converter

OKLCH in, HSL out — with the working shown.

OKLCH to HSB Converter

OKLCH in, HSB (HSV) out — with the working shown.

OKLCH to CMYK Converter

OKLCH in, CMYK out — with the working shown.

HEX to Lab Converter

HEX color code in, CIE Lab out — with the working shown.

Lab to HEX Converter

CIE Lab in, HEX color code out — with the working shown.

RGB to Lab Converter

RGB in, CIE Lab out — with the working shown.

Lab to RGB Converter

CIE Lab in, RGB out — with the working shown.

HEX to LCH Converter

HEX color code in, LCH out — with the working shown.

LCH to HEX Converter

LCH in, HEX color code out — with the working shown.

RGB to LCH Converter

RGB in, LCH out — with the working shown.

LCH to RGB Converter

LCH in, RGB out — with the working shown.

HEX to OKLab Converter

HEX color code in, OKLab out — with the working shown.

OKLab to HEX Converter

OKLab in, HEX color code out — with the working shown.

RGB to OKLab Converter

RGB in, OKLab out — with the working shown.

OKLab to RGB Converter

OKLab in, RGB out — with the working shown.

Lighten a Color

Make a color lighter without wrecking its hue.

Darken a Color

Make a color darker without clipping it into a different hue.

Saturate a Color

Add chroma, and find out where the display stops you.

Desaturate a Color

Pull chroma out without moving lightness.

Invert a Color

The RGB inversion and the lightness inversion are not the same thing.

Grayscale a Color

The correct luminance-weighted conversion, next to the common wrong one.

Color Converters — what they do and how to choose

Accessibility

Prove your colors work for everyone before you ship them.

9

WCAG Contrast Checker

The ratio, the grades, and the nearest passing color.

APCA Contrast Calculator

The model behind WCAG 3, which knows dark mode exists.

Color Blindness Simulator

Eight kinds of vision, one palette, no guessing.

Accessible Palette Builder

Build the palette from the contrast requirement backwards.

Contrast Grid

Every pair in your palette, checked at once.

Protanopia Simulator

See your palette the way someone with no red cones sees it.

Deuteranopia Simulator

See your palette the way someone with no green cones sees it.

Tritanopia Simulator

See your palette the way someone with no blue cones sees it.

Achromatopsia Simulator

See your palette the way someone with no color vision at all sees it.

Color Accessibility Tools — what they do and how to choose

Gradients & effects

Gradients, glass, shadow, grain, blend modes.

6

Gradients & effects

CSS Gradient Generator

Interpolate in OKLab and the gray dead zone disappears.

Gradients & effects

Mesh Gradient Generator

Soft, layered, expensive-looking backgrounds. Pure CSS.

Gradients & effects

Duotone Generator

Two colors, one image, instant art direction.

Gradients & effects

Colored Shadow Generator

Black shadows are a bug. Tint them to the background.

Gradients & effects

Glassmorphism Generator

Frosted glass that still passes contrast.

Gradients & effects

CSS Blend Mode Lab

All twelve separable modes, computed live.

Gradient and Color Effect Tools — what they do and how to choose

Design systems

Turn one color into a documented, exportable system.

4

Tailwind Palette Generator

A full 50–950 ramp from one brand color.

Design Token Exporter

One background, exported to eight formats.

CSS Variables Generator

A themed :root block, light and dark, ready to paste.

Palette Analyzer

Paste a palette. Find out what is wrong with it.

Design System Color Tools — what they do and how to choose