Color Picker

One colour, every format

Different tools want different notation and converting by hand is tedious. HEX is what CSS and design tools mostly use. RGB is the same colour as three channel values, which is what you need when something takes numbers rather than a hex string. HSL and HSV describe a colour as hue, saturation and lightness or value — far more intuitive when you want "the same colour but lighter", because you change one number instead of guessing at three. CMYK is for print.

The opacity slider covers the case where a colour needs transparency, and the nearest CSS named colour is shown too — handy for recognising that the blue you just picked is essentially cornflowerblue, or for writing quick prototype styles.

Tints, shades and harmonies

The tint and shade rows give you systematically lighter and darker versions of your colour. That is how a one-colour choice becomes a usable set: a base for buttons, a darker shade for the hover state, a light tint for backgrounds and panels. Picking those by eye tends to produce variations that drift in hue; deriving them keeps the family consistent.

The harmony sets do the same job across the colour wheel. Complementary gives the opposite colour, which is the strongest contrast available and right for a call to action. Analogous gives neighbours, which sit together calmly and are the safe choice for a whole interface. Triadic and Tetradic give three and four evenly spaced colours for a fuller palette. Every swatch is clickable, so you can jump to one and get all its codes.

Recently used colours are kept as you work, which saves re-finding a shade you tried five minutes ago.

What this tool does not do

It does not pick a colour out of an uploaded image, and it does not sample a colour from elsewhere on your screen. It works from a colour you choose or a hex code you paste. If you need the colour of one pixel in a photo, a browser eyedropper extension or your operating system's own colour picker is the right tool — most desktop systems include one.

Related tools

Color Palette Generator builds a full palette when you want a scheme rather than a single colour with variations. QR Code Generator takes custom foreground and background colours, so a code you generate can match whatever you settle on here.