How to sample a shadow tint for a social media campaign

A shadow in a social media post can look gray, purple, or warm brown depending on the background and the colors nearby. If you want to reuse that tint across posts, stories, and other campaign graphics, guessing by eye can leave each design slightly different.

Use the Color Picker to sample a pixel on your screen and read its HEX, RGB, and HSL values. You can use those values as a reference while building or adjusting your campaign artwork.

Sample the shadow tint

1. Open the Color Picker in Chrome or Edge on a computer. The screen picker works in these browsers. Other browsers may offer fewer features or none.
2. Open the post mockup or reference image on your screen. Make the shadow large enough to inspect, and keep the area you want to sample visible.
3. Start the picker in the tool, then select a point inside the shadow. Choose an even, solid-looking part rather than the soft edge where the shadow fades into the background.
4. Note the HEX, RGB, or HSL value shown. If the shadow has a gradient or varies across the design, sample more than one area and compare the readings.

A HEX value is a compact color code, such as #786D7A. RGB describes the red, green, and blue amounts. HSL describes hue, saturation, and lightness, which can be easier to adjust when you want a tint to feel warmer, cooler, or more subtle.

Choose the right shadow tint

One consistent shade across the campaign

If your design uses a simple, opaque shadow, pick a representative point and use that reading as your reference. Reusing the same color value in each graphic makes the campaign feel more consistent than selecting a similar-looking shade by eye every time.

A gradient or soft shadow

A gradient does not have just one color. It changes from one point to another, and a soft shadow blends into the background. Sample the darker inner area if you need a single reference value. If the fade itself matters, record readings from the dark area and the lighter edge so you can compare the range.

A semi-transparent shadow

If the shadow is partly transparent, the pixel you see is a blend of the shadow color and the surface behind it. A sample from the finished image gives you the displayed, blended color, not necessarily the shadow's original fill color. That visible result is useful when matching an exported post, but it may not match the color value in the editable design layer.

A tint that needs a small adjustment

Use the sampled value as a starting point, not a rule that every shadow must match exactly. HSL can help you make a gentle adjustment: change the hue to shift the color family, lower saturation to make it less colorful, or adjust lightness to make the shadow feel lighter or darker. Keep a note of the chosen value so later graphics use the same version.

If the sample looks off

1. Sample away from the edge. A shadow edge contains a blend of shadow and background colors. Move to a darker, more even area and sample again.
2. Check more than one point. If two readings differ, the shadow may be a gradient, transparent, or uneven. Decide whether the campaign needs one central value or a range of values.
3. Use the original design view when possible. A screenshot or preview can include compression, overlays, or changes made by the app displaying it. Sample the finished post if you are matching its appearance, or the original design if you are trying to identify the artwork's color.
4. Make the shadow easier to inspect. Enlarge the artwork on screen so you can choose a point precisely. Avoid tiny previews, where one pixel near the edge can give a different reading from the shadow's center.
5. Compare on the intended background. A shadow tint that looks balanced on a white card may appear too strong on a saturated color. Check the sample in the same background and layout where your campaign will use it.

Why the background changes what you see

Shadows are often created by placing a colored layer with reduced opacity over another color. The resulting pixel depends on both colors and the opacity. That is why the same shadow layer can look different over a light background and a dark one. A screen picker reads the pixel that is visible on your display, so it is best for matching appearance, not for recovering hidden layer settings from a flattened image.

When you are sampling from a finished image, the color picker reads the screen. You do not need to upload the campaign image to select a pixel.