Color Picker

Pick colours and copy them in any format

Explore colours visually and read off the values in whichever notation you need. Useful when you are building a palette, matching an existing shade, or just need a specific tint without hunting through a chart of hex codes.

How to use it

  1. Drag across the gradient or adjust the hue to find a colour.
  2. Read the HEX and RGB values, which update live.
  3. Compare against the preview swatch.
  4. Copy the value in the format your project uses.

Frequently asked questions

What is the difference between HEX, RGB and HSL?

HEX and RGB describe the same thing in different notation. HSL describes colour as hue, saturation and lightness, which is far more useful when you want a lighter or more muted version of a colour, because you can adjust one axis without disturbing the others.

Will these colours be accessible?

The picker does not check contrast. Before using a colour for text, verify it against its background: normal text needs a ratio of at least 4.5 to 1, and large text at least 3 to 1.

Can I sample a colour from an image?

Not directly in this tool. Some browsers offer a native eyedropper that can sample anywhere on screen, which is the quickest route if yours supports it.

How do I build a palette around one colour?

Keep the hue fixed and vary lightness to produce tints and shades that stay in the same family. For accent colours, move the hue by roughly 30 degrees for something harmonious or 180 degrees for a complementary contrast.