Color palette guide

Every control

Every control in the panel, top to bottom. Harmony, Image, Keyword and Trending only show while their mode is picked.

Load and save

Image A and Image B hold your pictures, kept on this device for every lab tool until you press × on a tile. The other buttons each copy all five colours as text, in upper case. See clipboard.

Image AButton: Your picture. Press it to open one from your device, or drop one on the frame; two at once fill A and B. It is kept on this device, never uploaded, and every lab tool that takes a picture opens with it until you press × on its corner. It turns on From image, and the palette appears as soon as the picture is read. A picture kept from another tool opens the page this way.
SwapButton: Changes which tile Color palette uses, so a picture you added as B in another tool can be used here. When the other tile is empty, the palette the page arrived with comes back.
Image BButton: A second kept picture. Color palette reads one picture at a time: the tile it is not using is dimmed and says Not used here, and pressing it only says so.
CSS variablesButton: Copies five lines such as --color-1: #FF2E63;. See CSS variables.
TailwindButton: Copies a colors block with the keys 1 to 5. See Tailwind colours.
JSONButton: Copies a JSON list of the five hex codes. See JSON palette.
Hex listButton: Copies the five hex codes, one per line.

Mode

Random · Harmonious · From image · From keyword · TrendingPick one: How the five colours are picked. Random, Harmonious and From keyword make a palette as soon as you pick them; From image and Trending wait for your picture or your pick.

Random: A random starting hue, and each colour up to a third of the way round the wheel from it, at middling saturation and lightness. See random palette.

Harmonious: Colours worked out from a base colour by a harmony rule. See harmonious random.

From image: Five colours taken from your picture, the one on the tile in use. Adding a picture turns this mode on. See palette from image.

From keyword: Five colours picked at random inside the hue, saturation and lightness range of a mood word. See palette from keyword.

Trending: A list of twelve named palettes to start from. See trending palettes.

Harmony

Base colorColour · starts #10B981: The colour the harmony is built around. The first bar keeps its hue; the bars get lighter and a little more saturated from left to right, so no bar is exactly this colour. See base colour.
Complementary · Analogous · Triadic · Tetradic · Split complementaryPick one: The angles the base hue is turned by, one per bar, from left to right.

Complementary: 0, 180, 30, 210 and 150 degrees: the base, its opposite, a neighbour of the base, and the two hues either side of the opposite. See complementary colours.

Analogous: 0, 30, 60, −30 and −60 degrees: neighbours on the wheel. See analogous colours.

Triadic: 0, 120, 240, 60 and 180 degrees: three hues evenly spaced, and two between them. See triadic colours.

Tetradic: 0, 90, 180, 270 and 45 degrees: four hues a quarter turn apart. See tetradic colours.

Split complementary: 0, 150, 210, 30 and 330 degrees: the two hues either side of the opposite one. See split-complementary.

Keyword

Ocean · Sunset · Cyberpunk · Forest · Minimal · Retro · Neon · PastelPick one: Eight mood words. Pressing one writes it into the text field above and makes a palette from it. In the field you can type any word and press Enter; a word the tool does not know uses the Neon range.

Ocean: Blues and teals, fairly saturated.

Sunset: Reds, oranges and warm yellows.

Cyberpunk: Purples and magentas.

Forest: Yellow-greens to greens, fairly dark.

Minimal: Near-greys of any hue, from mid to light.

Retro: Muted oranges and ochres.

Neon: Any hue at full saturation. See neon.

Pastel: Any hue, light and soft.

Generate

The line under the button reminds you that Space makes a new palette too.

Generate paletteButton: Makes a new palette in the current mode. Locked bars keep their colour. In From image and Trending modes it does nothing.

Reset

It also brings back the palette the page opened with.

ResetButton: Puts the mode back to Random, the rule to Complementary, the base colour to #10B981, clears the keyword field and every lock.