How to identify a link color in a design mockup
Use a browser color picker to sample a link in a mockup, read its HEX or RGB value, and avoid mistakes caused by antialiasing or hover states.
You need the color value for a link in a design mockup, but the shade is hard to judge by eye. You can sample it from the screen and get a HEX or RGB value to use in a design or CSS file.
The Color Picker can pick a color from anywhere on your screen. Its full screen-picking feature works in Chrome and Edge on a computer. Other browsers may offer a reduced version or no screen picking.
Sample the link color
- Open the mockup on your computer, then open the Color Picker in Chrome or Edge.
- Make sure the mockup shows the link state you need, such as its normal appearance rather than hover, pressed, or selected.
- Use the tool's screen-picking action and follow any on-screen prompt to choose the display or area containing the mockup.
- Move the pointer over a flat part of the link's text or underline, away from its edge, and sample a few nearby points. Note the HEX or RGB values shown by the tool.
If the mockup is a file open in a design app, leave the file at a useful zoom level so the link is large enough to inspect. If it is a web page, move the pointer away from the link before sampling when you want its normal state. Hovering can change the color as soon as the pointer reaches the link.
What the result means
Nearby samples show the same value
The link likely has a solid color at the points you checked. Use the HEX value for CSS or many design tools, or use the RGB value if that is the format your workflow needs. Copy the value exactly, including the leading # in a HEX code.
Samples differ around the edges of the letters
This is usually antialiasing. The screen blends edge pixels with the background to make text look smoother, so a pixel on a letter's boundary is a mixture rather than the original text color. Sample inside a thicker part of a letter, or use the center of a solid underline if one is present.
Samples differ across the middle of the link
The design may use a gradient, transparency, a shadow, or more than one link state. It might also be a screenshot with compression or color changes. Sample several points to see whether the variation follows a pattern. If you need the exact design value, check the original editable file or its style settings rather than relying on a screenshot.
The sampled color does not match the value in your design tool
The mockup may be displayed through a color profile, image adjustment, or browser rendering that changes how it looks on your monitor. A screen sample tells you the color currently rendered on screen, not necessarily the original value stored in the design file. Treat the source file as authoritative when its value is available.
How to get a more reliable sample
- Check the link state. Identify whether you need the normal, hover, focused, visited, or active color. These states can be different by design. If the mockup is interactive, move the pointer off the link and use keyboard focus or hover only when that is the state you want to measure.
- Sample a flat area. Avoid letter edges, a thin border, a shadow, and any pixel where text meets the background. A larger, solid underline or a filled link button can give a cleaner sample than small text.
- Make the link easier to inspect. Zoom in enough to see its flat interior, but do not use a tiny, antialiased edge as the sample point. In most browsers, press Ctrl + 0 on Windows or Command + 0 on macOS to return to the default page zoom when you are done.
- Use a supported browser. If screen picking is unavailable or the tool cannot access the screen, try Chrome or Edge on a computer. The full screen-picking feature is not available in every browser, and mobile browsers do not provide the same computer screen access.
- Check the display setup if colors look unusual. On Windows 11, open Settings › System › Display and check for a night light or color-related display setting. On macOS, open System Settings › Displays and check the selected display profile and color settings. Do not change these settings just to force a match if the goal is to capture how the mockup currently appears.
- Confirm against the source. If the sampled value will be used in production, inspect the editable mockup or the link's CSS value when possible. This avoids using a screen-rendered color that was altered by image compression, transparency, or display color management.
Why the color can change with the pointer
Links often have separate colors for normal, hover, focus, visited, and active states. Hover means the pointer is over the link. Focus means the link is selected for keyboard use, often shown with an outline. Active usually appears briefly while a link is being pressed. A mockup may show only one of these states, so check which appearance you are sampling before saving the value.
For a precise design token, the sampled screen color is a useful clue, but the editable design file or source style is the better place to confirm the original value.
