How to Use the Colour Picker

1. Drag inside the square colour area to choose how light, dark, bright or muted a colour is.
2. Drag the hue slider underneath the square to change the base colour family (red, green, blue and so on).
3. Or type a HEX code straight into the HEX field if you already know the colour you want.
4. Read the RGB, HSL and approximate CMYK values shown under Colour Values.
5. Use the copy buttons to copy any value straight to your clipboard.
6. Check the Lighter and Darker swatches for two quick variations of your chosen colour.
7. Select Random Colour for inspiration, or Reset to return to the starting colour.

The saturation/brightness square and the hue slider are both keyboard accessible: tab to the square and use the arrow keys to nudge the colour, or tab to the slider and use the left and right arrow keys.

How the Colour Picker Works

This tool uses a colour model called HSV, which stands for hue, saturation and value. Hue is the base colour family and runs around the slider from red through orange, yellow, green, blue, purple and back to red. Saturation is how strong or washed-out a colour is, and value is how light or dark it is. Moving your finger or cursor around the square adjusts saturation and value at the same time, which is why it feels natural for finding a specific shade quickly.

Behind the scenes, the picker converts your HSV selection into RGB (red, green and blue light values from 0 to 255) using a standard trigonometric formula, then converts that RGB value into HSL (hue, saturation and lightness, the model used by most design software) and into approximate CMYK percentages (cyan, magenta, yellow and key/black, the values used for four-colour process printing).

The CMYK figures shown here are a maths-only conversion from RGB. Professional printers usually use an ICC colour profile specific to their press, paper and ink set, which can shift the exact percentages. Use the values on this page for planning and comparison, and confirm final print colours with your printer.

The Lighter and Darker swatches are generated by converting your colour to HSL and moving the lightness value up or down by a fixed amount, then converting back. This keeps the same hue and saturation while changing only how light or dark the colour appears on screen.

Artist and Creative Applications

Artists and craft-makers use this Colour Picker for many of the same reasons web designers do, applied to creative projects rather than websites. If you are digitising a painting or illustration, you can sample a colour visually and note down its HEX or RGB value to keep a permanent record, separate from how any one screen or printer might display it later.

If you design printable colouring pages, planning sheets or project instructions in software such as Procreate, Canva or Adobe products, the HSL and CMYK readouts help you choose colours that will translate reasonably well between screen and paper. For colour theory study, the hue slider is a simple way to see how moving around the colour wheel changes a colour's temperature and character, which pairs well with our Interactive Artist Colour Wheel.

Remember that any colour value shown here is a digital approximation. Paint colour depends on the specific brand, pigment, opacity, the surface you are painting on and the lighting in the room, so a HEX code is a useful reference point rather than an exact recipe. When you are ready to plan an actual paint mix, our Paint Colour Mixer is built specifically for that purpose.

Examples