How to sample an accent color from an illustration

You spot a color in an illustration that would work well for a button, title, or matching graphic, but guessing by eye is unreliable. A nearby shade can look almost identical and still have a different color value.

Use the Color Picker to read the color shown on your screen. A few careful samples can help you choose a representative accent and avoid values altered by outlines, shading, or the display.

Sample the accent color

1. Open the Color Picker in Chrome or Edge on a computer. Display the illustration in the app or browser where you can see the accent clearly.
2. Start the on-screen picker and follow the browser's prompt to allow screen access. Select the screen or window that shows the illustration.
3. Move the picker to a flat area near the center of the accent shape. Avoid its outline, shadow, texture, or any area where it blends into another color.
4. Read the displayed HEX, RGB, or HSL value. Sample a few nearby points in the same flat area and see whether they give you the same value.

If you need the color for a particular design app, choose a format that app accepts. HEX values such as #C45A82 are common in web design. RGB gives red, green, and blue channel values, while HSL describes hue, saturation, and lightness.

Choose the right sample

The same value appears across a flat area

This is a good sample for a solid accent. Use the repeated value rather than a point close to the outline. If the illustration contains several shapes in the same color, check one more shape to see whether the accent is consistent.

Nearby points give slightly different values

The area may contain a gradient, brush texture, or subtle shading. It may also be an edge where the illustration blends with its background. If you want a representative accent, sample several points in the main area and choose a value from the part that best represents the color. Do not treat a single unusual pixel as the intended color.

The color looks right but the values are unfamiliar

HEX and RGB describe the same basic color in different formats. For example, a HEX value combines the red, green, and blue components in one code. HSL separates the overall hue from how vivid or light it is, which can make it easier to compare related shades. Copy the format your next app or document needs.

The value changes between apps or display settings

The picker reads the color currently rendered on your screen. An app's color management, display profile, or image effects can change how the illustration appears. A screen sample is useful for matching what you see, but it cannot always recover the original color stored in the illustration file.

If the sample does not match

1. Use a supported browser. Color picking from anywhere on the screen works in Chrome and Edge on a computer. Other browsers may offer a reduced version or no screen picker. If the browser shows a screen access prompt, allow it and choose the display containing the illustration.
2. Pick a larger, flatter area. Increase the illustration's on-screen size if needed, then sample well inside the shape. Avoid zooming so far that you are sampling a smoothed edge or a pixel enlarged by the viewer.
3. Hide temporary overlays. Selection borders, editing handles, cursor highlights, and guides can change what appears on screen. Hide them if they are not part of the final image, then sample again.
4. Keep the display mode consistent. If you are matching the illustration as it looks on your screen, sample and use the value under the same display settings. On Windows 11, check Settings › System › Display › HDR. On a Mac, check System Settings › Displays and keep the selected display preset or color profile consistent.
5. Check the source file when you need its original color. Screen sampling reports the rendered result, not necessarily the color value assigned in the illustration document. If you need the original design value, inspect the shape or layer in the app used to create the artwork.

Use the accent in context

A sampled color is a starting point, not a guarantee that it will work everywhere. A shade that stands out against a pale illustration may disappear on a white page or become hard to read behind small text. Preview the color where you plan to use it, at the intended size and against the actual background.

If you are sampling a gradient or a textured brush stroke, decide what you need the accent to do before choosing a point. For a solid button or icon, use a representative value from the main color area. For a visual match to one specific part of the artwork, sample that exact area and keep the result with a note about where it came from.

The Color Picker works on what is visible on your screen, so the illustration stays in its current app while you take the sample.