Color Picker

Click anywhere on the colour canvas to select a colour, then fine-tune it using the hue slider and saturation/brightness controls. The tool shows your selected colour in hex, RGB, and HSL formats simultaneously, ready to copy and paste into CSS, design tools, or any application that accepts colour codes.

The colour canvas uses the HSV (Hue, Saturation, Value) model. The horizontal axis controls saturation (vivid to muted) and the vertical axis controls value (bright to dark). The hue slider along the top or side cycles through the full colour spectrum from red through yellow, green, cyan, blue, magenta, and back to red.

When choosing colours for text and backgrounds, contrast matters. The WCAG accessibility guidelines recommend a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Dark text on light backgrounds or light text on dark backgrounds generally meets these requirements.

A good rule of thumb is to avoid mid-range colours for text. Very light pastels and very dark shades work well as backgrounds, while pure or near-pure white and dark colours work for text. If you are choosing brand colours, test them against both white and dark backgrounds to ensure readability in all contexts.