CSS Variables Exporter

Name your colours, pick a format — CSS custom properties are the default, SCSS, Tailwind config and JSON are one click away.

Prefix

Export

:root {
  --color-primary: #F59E0B;
  --color-secondary: #4169E1;
  --color-surface: #1C1B1D;
}

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.

Tailwind Color Mapper

Find the nearest Tailwind CSS v3 token for any colour, with the full family scale.