Color Picker
Choose a color with the color selector, type a code you already have, or open an image and tap any pixel. You get the HEX, RGB and HSL values with one-click copy, plus a contrast check for text.
Click or tap any point to pick its color. On a touch screen, slide your finger and lift it on the pixel you want.
Text contrast (WCAG 2)
Recent colors
Your image is opened inside your browser and is never uploaded to our server.
How to use the Color Picker
- To start from a color you have in mind, click the color square and choose one, or type a code such as #FF8800, rgb(255, 136, 0) or hsl(32, 100%, 50%) into the text box.
- To find a color in a picture, drop an image (a logo, a screenshot, a photo) onto the box. Move over it and the zoom circle shows the pixels under your pointer; click or tap to pick.
- Press Copy next to HEX, RGB or HSL to copy that code, ready to paste into CSS, a design app or a document.
- Check the contrast boxes to see whether white or black text would be readable on that color. Click a swatch under Recent colors to go back to an earlier pick.
HEX, RGB and HSL: the same color, three ways
All three codes describe one color on a screen. RGB gives the amount of red, green and blue light, each from 0 to 255. HEX is the same three numbers written in base 16 and joined together, so rgb(29, 158, 117) becomes #1D9E75. HSL describes the color as a hue angle on the color wheel (0 is red, 120 green, 240 blue), a saturation percentage and a lightness percentage, which makes it easier to create a lighter or duller version of a color by changing one number. HSL values here are rounded to whole numbers, so converting them back can land one step away from the exact RGB value.
Picking colors from an image
The tool reads the exact pixel you click. In photographs neighboring pixels often differ slightly because of shading, noise and compression, so the zoom circle helps you land on a representative spot; try a few clicks and compare. For brand colors, pick from a sharp original such as a PNG logo rather than a compressed screenshot. The browser converts images with embedded color profiles to standard sRGB for display, so values can differ slightly from what a photo editor reports in another color space.
About the contrast check
The contrast figures use the contrast ratio formula from the W3C Web Content Accessibility Guidelines (WCAG) 2: each color's relative luminance is calculated, and the ratio runs from 1:1 (no contrast) to 21:1 (black on white). Under success criterion 1.4.3, level AA needs at least 4.5:1 for normal text and 3:1 for large text; the stricter level AAA needs 7:1 and 4.5:1. WCAG defines large text as at least 18 point, or 14 point when bold. The check covers color only. Font weight, size and the text's surroundings also affect readability, so treat a pass as a minimum rather than proof that text is easy to read.
Frequently asked questions
Is my image uploaded to find the colors?
No. The image is drawn onto a canvas inside the page and the pixel values are read there by your browser. Nothing leaves your device.
Can I pick a color from my screen outside the browser?
Not directly. Take a screenshot (for example with Print Screen, or Shift + Command + 4 on a Mac), then drop the screenshot here and click the color.
Why does the same area give slightly different codes on each click?
Photos are rarely one flat color. Lighting, sensor noise and JPG compression make neighboring pixels vary. Use the zoom circle to aim, or pick from a flat area or an original graphic file.
What does "AA large text only" mean?
The contrast is at least 3:1 but below 4.5:1. Under WCAG 2 that is enough for large text (18 point, or 14 point bold) at level AA, but not for normal-sized body text.
Which code should I use in CSS?
Any of them works in modern CSS: color: #1D9E75, color: rgb(29, 158, 117) and color: hsl(161, 69%, 37%) are all valid. HEX is the shortest and most common; HSL is handy when you want to tweak lightness.
Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.1: definitions of contrast ratio and relative luminance; W3C, Understanding Success Criterion 1.4.3: Contrast (Minimum)