Palette Generator

One base colour, six harmony modes — complementary, analogous, triadic, split-complementary, tetradic, double-complementary. Export as CSS, SCSS, Tailwind or JSON.

Complementary · 2 colours

#F59E0Borange
#0B62F5royalblue

Export

:root {
  --palette-complementary-1: #F59E0B;
  --palette-complementary-2: #0B62F5;
}

Related tools

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.

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.

CSS Variables Exporter

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