Color palette guide

Overview

Color palette makes five colours at a time that you can lock, change and copy as code.

Five colour bars in brick red, green-teal, blue, warm yellow and pink, each with its hex code and RGB values
A split-complementary palette built around the orange-red base colour #E4572E.

A palette here is five colour bars side by side. Each bar shows its hex code and its RGB values.

The idea under Harmonious mode is colour harmony. The tool reads your base colour as HSL and turns its hue by fixed angles on the colour wheel, so the colours sit well together.

The other modes pick colours in other ways: at random, from a picture's own pixels with k-means clustering, from a mood word, or from a list of named sets.

Lock the colours you like and make new ones around them. When the palette is right, copy it as CSS variables, Tailwind, JSON or a hex list.

Open Color palette Start here

In this guide

  1. StartYour first palette, locks, and copying it.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree palettes and the settings that made them.
  4. Keep your workThe four copy formats and the single hex.
  5. KeysSpace, Enter, and the lab shortcut.
  6. HelpWhat to do when something goes wrong.

It runs in your browser with plain page elements, no WebGL. Nothing is uploaded, not even a picture you pick. A mouse, a trackpad and a finger all work.