How do I get the color of small text or a thin line in an image when every click gives a lighter shade?
Thin text and lines are smoothed at their edges, so most of their pixels are a mix of the text color and the background. Use the magnifier and the arrow keys to step onto the darkest pixel in the center of the stroke, and compare a few neighbors. The most saturated one is closest to the real color.
Why your click misses the text color
A letter two or three pixels wide is not drawn with hard edges; its edges are smoothed so it looks clean to the eye. A pixel half covered by the letter takes a color halfway between the letter and the background. When the letter is thin, most of its pixels are like that. So your click most likely lands on a mix, not on the color itself.
An example in numbers: maroon text on white
A small line of maroon text in an ad image. Three neighboring readings across the width of one stroke:
- On the outer edge: #DEC8CA, which is hsl(355, 25%, 83%). A pale pink, closer to the background than to the text.
- One pixel in: #B2787D, which is hsl(355, 27%, 58%). Darker, but still mixed.
- In the heart of the stroke: #781E28, which is hsl(353, 60%, 29%). Saturation jumps to 60% and lightness drops to 29%. That is the text color.
Notice that the hue barely moves (355 and 353) while saturation and lightness change a lot. That is the signature of blending with a white background: the same color fades as you approach the edge.
Steps to reach the right pixel
- Open the image in the Image color picker and click roughly on a letter. Choose a relatively wide one, such as a bold M or D.
- Look at the magnifier: it shows the 11 × 11 pixels around the marker enlarged, so you can see where the letter is darkest.
- Focus the image and move the marker with the arrow keys, one pixel per press, across the stroke from edge to edge.
- Watch the HSL value and stop on the pixel where saturation is highest and lightness is furthest from the background.
- Press Enter to add it to the history, and try another letter in the same line to confirm.
When there is no honest pixel at all
If the line is one pixel wide, or the image was heavily downscaled, the text may not fully cover any pixel. Then every pixel is a mix, and even the darkest one is lighter than the real color. No trick in the tool fixes that, because it reads exactly what is in the image. The fix is to ask for a higher resolution image, the original design file, or simply the code from whoever made the design.
In JPEG images compression adds noise around letters, so you may find a few oddly colored pixels around the text. Ignore them and look for the value that repeats in the heart of more than one letter.
Common questions
Can I zoom the image itself inside the tool?
The magnifier shows the pixels around the marker enlarged, and the arrow keys give you single-pixel precision, which is enough to reach any pixel.
The text sits on a colorful photo, not white. Does the method change?
The method is the same, but the edges will blend with the photo behind them. Rely only on the pixel in the heart of the letter.
Could a center pixel read darker than the real color?
Rarely, in JPEG images, because of compression noise. That is why you compare the centers of two or three letters and take the value that repeats.