How to find a suitable link color for a design system audit

A link looks blue on one page, purple on another, and almost black in a dark theme. During a design system audit, those differences can make it hard to tell whether the site uses deliberate color tokens or has drifted over time.

Sample the colors as they appear on screen, then record them beside the component and state where you found them. TooLab’s Color Picker can read a color from anywhere on your screen and show its HEX, RGB, HSL, and other values. It works fully in Chrome and Edge on a computer. Other browsers may offer fewer features or none.

Sample link colors consistently

1. Open the Color Picker in Chrome or Edge on a computer. Keep the page you are auditing visible so you can sample its rendered colors.
2. Choose a representative link in the default state. Sample a solid part of a letter stroke, away from the antialiased edge, where the text blends with nearby pixels. If the text is small, zoom in before sampling.
3. Record the displayed HEX and RGB values, along with the page, component, and state. For example, note whether the sample is a navigation link in its default state or a text link after hovering.
4. Repeat for links in different components and contexts, including buttons styled as links, visited links, hover states, and dark themes if your product has them.
5. Compare the records. Group samples that appear to use the same color, and flag values that differ unexpectedly. Check whether the difference comes from a distinct state or background before calling it an inconsistency.

A screen sample shows the color that the browser rendered at that point. It does not reveal the original design token or the code that produced the color. Record the context so another person can reproduce the sample and verify it against the source files.

Choose which colors belong in the audit

The default link color

Start with links in their ordinary, unhovered state. If the same kind of link uses several different colors across similar pages, check whether those differences are intentional. A link inside a warning or a branded callout may have a separate role from a regular paragraph link.

Interaction states

Hover, focus, active, and visited states can use different colors or other visual changes. Keep each state separate in your notes. A hover color is not evidence of a second default link token, and keyboard focus may be shown with an outline rather than a text-color change.

Different backgrounds and themes

A link color that works on a white page may be difficult to read on a tinted card or a dark background. Sample the link and note its background in each context. If the design uses separate light and dark themes, audit them separately rather than treating the values as accidental variation.

Colors that only look different

Small text, antialiased edges, browser zoom, and display settings can affect a sampled screen pixel. If two samples differ by only a small amount, zoom in and sample the same part of each link again. Treat the result as a clue to investigate, not proof that the source values differ.

Turn the samples into useful audit notes

1. Use a consistent record. For each sample, note the page or screen, component, link state, background, theme, and HEX value. Include RGB if your team uses it in design or development tools.
2. Group by purpose. Compare ordinary text links with navigation links, calls to action, and links inside alerts. Similar-looking controls can have different roles and may correctly use different tokens.
3. Check the source token. Compare screen samples with the design file or code once you have access. A sampled value can help you find the relevant token, but it cannot identify that token by itself.
4. Separate visual consistency from accessibility. Check text contrast against each actual background with a contrast checker or accessibility tool. The Color Picker reports color values, but it does not calculate contrast or certify compliance.
5. Review the full link treatment. Check whether links are distinguishable from surrounding text without relying on color alone. Underlines, clear focus indicators, and visible hover changes can help people recognize and use them.
6. Flag unclear differences. Ask the design system owner whether an unusual color represents an intentional state, a theme-specific token, or an implementation mismatch. Avoid replacing a value until its purpose is understood.

What the Color Picker can and cannot tell you

The picker is useful for collecting visible color values across pages without guessing from memory. Its HEX and RGB readings make it easier to compare samples and share exact values in an audit note.

It cannot tell whether a color is the intended brand value, whether two elements share a design token, or whether the link passes accessibility requirements. A sampled pixel may also be blended with its background at the edge of small text. Use it to locate and compare visible differences, then confirm important findings in the design source and test contrast separately.

For a fair comparison, sample links at the same zoom level and on the same display when possible, and note any differences in theme or background.