How to sample a color from a screenshot for dark mode

You have a screenshot with a dark interface color you want to reuse, but guessing by eye can leave your new design looking slightly off. Sampling the color gives you a value you can copy into a design or code file.

TooLab’s Color Picker can sample a color from anywhere on your screen and show its HEX, RGB, HSL, and other values. Use it on a computer in Chrome or Edge, where the screen-wide picker works. Other browsers may offer a reduced version or no screen sampling.

Sample the screenshot color

1. Open the screenshot on your computer, then open the Color Picker in Chrome or Edge. Keep the screenshot visible on the screen.
2. Start the tool’s screen color picker. If the browser shows a prompt or picker, follow it and choose the screenshot window or screen as needed. The exact interaction can depend on your browser.
3. Move the picker to the color you want and select a point well inside that area, away from text, borders, icons, and other colors.
4. Read the displayed HEX, RGB, or HSL value. Copy the format your design tool or code needs, and repeat for any other colors you want to match.

If the color picker is unavailable, make sure you are using Chrome or Edge on a computer. A phone or tablet browser may not support screen-wide sampling. You can also open the screenshot on a supported computer and sample it there.

Choose the right kind of sample

A screenshot can contain several different colors that look similar at a glance. Pick the pixel that represents the role you want in your interface, not just the area that seems closest in brightness.

For a dark background

Sample the middle of a large, flat section of the interface, such as a page background or panel. Avoid the edges of cards and overlays, where a shadow or antialiased border can change the pixel value. If separate panels use different shades, sample each one instead of assuming they share a color.

For text or an icon

Choose the center of a thick, solid part of a letter or icon. Small text has blended edge pixels: the screenshot smooths the boundary between the foreground and background, so those edge pixels are neither the true text color nor the true background color. Thin strokes may not have a clean interior pixel to sample.

For a gradient or translucent layer

Sample a specific point and note where it is. A gradient changes color across its surface, while a translucent layer blends with what is behind it. One sampled value will not represent the whole gradient or reveal the original color of a transparent overlay.

For a hover, selected, or disabled state

Sample the element in the state you want to reproduce. A selected button may use a different fill from its resting state, and disabled text may be deliberately muted. If the screenshot shows only one state, it cannot tell you how the design looks before or after interaction.

How to get a more reliable sample

1. Display the screenshot at a useful size. Open it large enough to see the target clearly. If you zoom in, choose a broad, uniform patch rather than a spot blurred by scaling.
2. Sample away from edges. Text, shadows, thin outlines, and rounded corners mix neighboring colors. A few pixels can make a substantial difference in a small dark interface element.
3. Check the image itself, not a photo of the screen. A camera photo adds reflections, exposure changes, and color shifts. Use the original screenshot file displayed on the screen.
4. Repeat a sample if the area looks uneven. If nearby points return different values, the area may contain a gradient, texture, compression artifacts, or a shadow. Sample the specific spot you intend to match.
5. Keep the format consistent. HEX is common in web styles, for example #252A34. RGB expresses the same kind of color as red, green, and blue channel values. HSL describes hue, saturation, and lightness, which can be convenient when making a lighter or less saturated variation.

Use the sampled color in dark mode

A sampled value is a starting point, not proof that the color will work well in your interface. Put it into the actual background, text, or control where you plan to use it. Then check the result at the size and brightness people will see it.

Dark backgrounds often work better as very dark gray or tinted colors than as pure black, but there is no single correct shade. A screenshot might use a slightly blue or warm gray to give the interface a particular feel. Sample the surface and nearby text separately so you can judge their relationship, not just each color on its own.

Check text readability with a contrast checker or your design system’s accessibility review. The Color Picker reports color values, but it does not tell you whether a text and background combination meets an accessibility contrast target. Also inspect small labels, disabled controls, and focus indicators, which can be harder to see than large headings.

The displayed screenshot can look different from its original source because of the monitor, display profile, brightness, or night-light settings. If the exact encoded color matters, sample the original file in a compatible image or design tool and compare it with the screen sample. For visual matching, use the color in context and adjust it until the interface reads clearly.