Tailwind Color Mapper

Type any colour and get the nearest Tailwind CSS v3 token — perceptual matching (CIE Lab ΔE), full family scale, one click to copy.

ANY COLOR VALUE

blue-500

Exact match · Tailwind v3

blue

Color Converter

One value in — HEX, RGB, HSL, HSV, CMYK, Lab, OKLCH, CSS name and Tailwind out. Copy any format.

Contrast Checker

WCAG 2.1 ratio and WCAG 3.0 APCA Lc side by side, with a live preview and a fix suggestion when a pair fails.

Palette Generator

6 harmony modes from one base colour, including double-complementary. Export as CSS, SCSS, Tailwind or JSON.

Tints & Shades

A 10-step 50-900 scale for design tokens. Tints lighten, shades darken — never swapped.

Gradient Generator

Linear, radial and conic CSS gradients with a live preview and 22 curated presets.

Color Picker

A canvas hue/saturation/lightness picker with keyboard control and your last 10 colours.

Color Blindness Simulator

See any palette or image through 8 types of colour vision deficiency.

Image Color Extractor

Upload an image, get its 5 dominant colours — nothing leaves your browser.

CSS Variables Exporter

Turn a list of named colours into CSS custom properties, SCSS, Tailwind config or JSON.