Color Picker

A color picker lets you choose a colour visually and gives you its codes for design and CSS. This free tool shows HEX, RGB, HSL and CMYK values, generates tints, shades and colour harmonies, checks WCAG contrast against white and black, and can pick colours or dominant colours from an uploaded image or, in supporting browsers, anywhere on screen.

Free, no signup. Runs entirely in your browser; files and text are not uploaded.

How to use the Color Picker

  1. Choose a colour with the colour box, or type a HEX, RGB or HSL value.
  2. Copy the HEX, RGB, HSL or CMYK code you need.
  3. Click a tint, shade or harmony swatch to explore related colours.
  4. To match an image, click Choose image, then click the picture or a dominant colour swatch.

Features

  • HEX (3- or 6-digit), RGB and HSL input with instant conversion
  • Copy HEX, RGB, HSL and CMYK codes
  • Tints, shades, complementary, analogous and triadic colours
  • WCAG 2 contrast ratio against white and black with AA/AAA result
  • Pick a colour from an uploaded image and see its six dominant colours
  • Screen eyedropper in browsers that support the EyeDropper API

Frequently asked questions

How do I find the HEX code of a colour in an image?

Click Choose image under Pick a colour from an image, then click the exact spot in the picture. The colour and all its codes update, and the six dominant colours of the image appear as swatches you can click.

What contrast ratio do I need for accessible text?

WCAG 2 level AA requires at least 4.5:1 for normal text and 3:1 for large text; level AAA requires 7:1. The tool shows the ratio of your colour against white and black and which level it passes.

What is the difference between RGB and CMYK?

RGB mixes red, green and blue light for screens; CMYK describes cyan, magenta, yellow and black ink for print. The CMYK values here use a simple formula without colour profiles, so ask your printer for exact values.

Can I pick a colour from anywhere on my screen?

Yes, in browsers that support the EyeDropper API, such as recent Chrome and Edge, a Pick from screen button appears. In other browsers, take a screenshot and use the image picker instead.

Related tools

  • Color Converter – Convert HEX, RGB, HSL, HSV and CMYK color codes
  • Text to Image – Turn a heading and text into a PNG or JPG graphic for quotes and social media posts
  • QR Code Generator – Create static QR codes for links, Wi-Fi, email, SMS and vCards, then download PNG or SVG
  • CSS Formatter – Beautify or minify CSS with safe handling of selectors, strings and url() values

Built and reviewed by Naqash Thaheem, Technical Project Manager. Last reviewed 2026-09-24.