Colours guide

Getting started with Colours

Colours is a colour picker, a palette maker and a contrast checker in one page. Pictures and palettes are read in your browser and never uploaded.

Open Colours

The page

At the top is the current colour, with its value in HEX, RGB, HSL, OKLCH and CMYK and a Copy button for each. Below it are four cards: Pick from a picture, Palette, Made from this colour and Contrast check.

The panel on the right has the colour's fields, what to make from it, how many colours to find in a picture and the export. On a phone it is a sheet at the bottom: tap Settings to open it.

Pick colours from a picture

1. Drop a picture on the page, or click Open picture….
2. Move over it and click to pick a colour; the magnifier shows the pixels under the point.
3. Use the arrow keys to move one pixel at a time, and Enter to add the colour to the palette.
4. Click Add all to the palette to keep the picture's main colours.

Tip: In Chrome and Edge, Pick from screen picks a colour from anywhere on your screen.

Build the palette

1. Click Add this colour to add the current colour.
2. Pick a Harmony and a Scale in the panel, then Use as the palette under a row.
3. Under each colour of the palette, ‹ and › move it, ✎ names it and × removes it.

Check contrast

Type a text colour and a background, or use Use as text colour and Use as background in the panel. The ratio and the WCAG levels show at once, and Fix the text colour finds the nearest colour that passes AA.

Export and keep it

1. Name the palette and choose a Format under Export.
2. Click Download palette, Copy code or Save to Files…; Open in… sends the file to another app.
3. To open a palette again, drop its .gpl, .ase, .json or .css file on the page.