Choosing Brand Colors That Work on Screens

A brand colour must survive more than a presentation slide. It appears beside dense text, under a pressed button state, inside a small app icon and on screens with different brightness settings. Selecting it means balancing a recognisable identity with a useful range of digital applications. Start with the product's hardest everyday surfaces, not its largest promotional banner.

Translate brand intent into screen requirements

Describe the impression the colour should support, then identify where that impression matters. A financial planning product might want a reassuring identity without making every surface dark blue. An entertainment product might need energetic campaign artwork while keeping account settings quiet. These are design constraints, not universal claims about colour psychology.

Open the contrast checker and test candidate colours with both white and dark text. Use exact values rather than sampling a screenshot. Keep a record of each pair, its ratio and its intended purpose. This makes usable combinations part of selection rather than a late accessibility repair.

Build a test sheet containing a filled button, navigation link, large headline, pale panel and tiny logo. Place those samples on light and dark surfaces. A candidate that works beautifully in a large square may fail as a one-pixel outline or a short wordmark. Evaluate the whole sheet before choosing a favourite.

Do not ask one colour to communicate the entire personality. Shape, typography, photography and language can carry distinctiveness when a functional surface needs restraint.

Choose an anchor and a supporting range

Select one anchor colour that remains identifiable across the product's primary touchpoints. Then develop supporting tones for pale backgrounds, standard actions, hover states and stronger emphasis. Derive them thoughtfully rather than adding black or white mechanically; those operations can create muddy or unexpectedly dull steps.

Separate a recognisable brand anchor from an action colour when necessary. A bright yellow can dominate brand artwork while a darker companion handles links and buttons. This is more honest than forcing yellow body text onto white or pretending a slightly darker hover state solves every contrast problem.

Create neutrals that cooperate with the identity. Compare cool and warm greys against your anchor using actual paragraphs, borders and cards. A neutral range should provide enough hierarchy without producing ten nearly indistinguishable shades that designers cannot select consistently.

Limit accent colours to clear purposes. If a purple accent appears in campaign illustrations, do not automatically assign it to warnings or premium features. For a structured range, the brand palette guide explains a practical stepped approach. Treat the step labels as references, not promises that matching numbers produce matching contrast across hues.

Test readable pairings and meaningful states

For ordinary text, WCAG's minimum contrast criterion generally requires 4.5:1 contrast; qualifying large text requires 3:1. The official text-contrast explanation defines those categories and exceptions. A large visual heading is not automatically large under the criterion, so check its actual size and weight.

Measure the combinations users encounter, not every theoretical pair in the palette. A button needs readable label text against its fill. A text link needs sufficient contrast against the page and a way to distinguish it without relying only on hue. Keep underlines when they provide the clearest dependable signal.

Test non-text information separately. Focus indicators, essential icon details and component boundaries have their own conditions under non-text contrast guidance. Do not assume that a passing text ratio certifies an entire control.

Build a state strip with default, hover, focus, pressed, selected and disabled examples. A selected item should remain understandable in greyscale through a checkmark, border or label. Error and success messages need meaningful wording or icons, not just red and green backgrounds.

Review thin strokes and small text on a real display. A numerical pass is necessary where required, but it does not guarantee comfortable reading in every setting. Avoid overly delicate typography on saturated fills.

Establish colour-space and dark-surface rules

Use sRGB as a baseline for broadly portable digital assets. A hexadecimal web value represents an sRGB colour; it is not an interchangeable print recipe. If a brand uses Display P3, record that colour space explicitly and provide a suitable sRGB alternative. The sRGB and Display P3 guide explains the practical distinction.

Wide-gamut displays can show colours outside sRGB, but a product should not depend on those differences for meaning. Review assets in a colour-managed workflow and avoid treating an unmanaged screenshot as the definitive reference. Different displays, viewing environments and brightness settings will still influence appearance.

CSS can express a baseline with an optional enhancement:

:root {
--brand-accent: #b82f62;
}
@supports (color: color(display-p3 0.7 0.2 0.4)) {
@media (color-gamut: p3) {
  :root {
    --brand-accent: color(display-p3 0.7 0.2 0.4);
  }
}
}

The two declarations need visual review and separate contrast checks; they are illustrative values, not guaranteed perceptual matches. Refer to MDN's CSS color documentation when defining the implementation contract.

For dark surfaces, choose approved dark variants instead of simply reversing every colour. Saturated fills can feel more intense against near-black. Keep the recognisable hue where possible, but adjust lightness and usage area. A small accent may preserve identity better than an entire saturated panel.

Deliver a colour specification people can use

Publish each colour with its name, value, colour space and role. Include approved foreground combinations beside the swatch. A developer should not need to guess whether brand blue is intended for text, fills or decoration. Prefer role names in implementation, while keeping the underlying palette available for controlled reference.

Document exceptions. The logo might retain its original bright colour while a related darker shade handles interface links. Name both and explain why. Otherwise someone may correct the logo to match the link token or use the logo colour for unreadable navigation text.

Run a small release review across a marketing page, signed-in dashboard, confirmation email and mobile screen. Check actual exported images alongside browser-rendered colours. Review gradients and transparency against their final backgrounds rather than testing only their source swatches.

Assign someone to approve additions. Without that responsibility, each campaign introduces another almost-identical accent and the original palette stops describing the product. Record the reason for new colours and retire unused ones deliberately. The result should be a compact working vocabulary, not a museum of every colour the team has tried.

Key takeaways

• Select colours in realistic product samples rather than isolated swatches.
• Separate brand recognition from action and semantic roles.
• Approve specific foreground and background pairs, including interaction states.
• Document colour spaces and review dark variants independently.
• Deliver values, usage rules and ownership together.