How to get the color code from an image

Three ways to write the same color

• HEX, like #FF0000: the most common in websites and design tools.
• RGB, like rgb(255, 0, 0): the amount of red, green and blue from 0 to 255.
• HSL, like hsl(0, 100%, 50%): hue, saturation and lightness, handy when you want a lighter or darker version of the same color.

How to do it

1. Open the Image color picker and choose your image.
2. Click or tap the point whose color you want. You can drag the marker and watch the magnifier to see the pixels up close.
3. For precision, move the marker with the arrow keys one pixel at a time, or type the coordinates.
4. Copy the value in the format you need.

Why do two neighboring points differ slightly?

In JPEG photos, neighboring pixels differ a little because of compression, even when an area looks like one color. Use the magnifier and pick a pixel that represents the area well. If you want all the main colors of the picture rather than one point, the right tool is the Image palette extractor extractor.

Details worth knowing

• The value comes from a single pixel of the original full-resolution image, not from the scaled preview.
• Values are sRGB as decoded by the browser. Images with other color profiles can give numbers slightly different from design software.
• A fully transparent pixel has no real color, and the tool warns you about it.
• The history keeps the last 12 distinct colors for the current image only.

Once you have the color, check that text on top of it is readable with the Color contrast checker, especially if it is for buttons or headings.