Define brand colours for screen and print

A brand colour becomes dependable when other people can apply it under clearly described conditions. A red square next to a hexadecimal value is only a starting point. On a website, colour needs an encoding, suitable backgrounds and a defined purpose. In print, the material, production process, profile and agreed approval method also matter. A useful colour standard connects these decisions without promising identical perception everywhere.

This guide develops a practical route from a colour sample to a usable handover. The calculation uses #B80024 as an original teaching colour. It does not publish an official Agentur Zentral brand specification. Every contrast ratio shown here is calculated from declared sRGB values. None is an instrument reading from a display or a measurement of a printed proof.

Start with the decisions people need to make

List the questions that recur in actual work. Which colour identifies the primary action? Which colour carries longer passages of text? May the brand red also indicate an error? What happens on a dark background? Which printed product will use which material? These questions lead to actionable rules. Asking for exactly the same appearance everywhere often creates disagreement without establishing a shared basis for evaluation.

Separate identity, technical definition and application. Identity describes the recognisable character. The technical definition identifies a colour, such as a particular sRGB value. Application explains where that value is suitable. A brand can use its characteristic red consistently while selecting a dark neutral for small text. This is an intentional distribution of responsibilities within one visual system.

Identify who can authorise changes. A printer adjusting a value for a particular production job does not automatically create a new digital brand colour. A developer discovering insufficient contrast needs an approved alternative. Without ownership, competing versions accumulate in presentation templates, stylesheets and production files. Each can look plausible while answering a different question.

Numbers need an explicit colour space

A numerical value needs a clear interpretation. A hexadecimal CSS colour describes an sRGB colour. Other colour spaces also use components, but their meaning depends on the relevant model. State the intended definition explicitly in the guide. An unexplained set of three numbers copied from an illustration file is an unreliable basis for transferring a colour between applications.

For an ordinary website, a documented sRGB foundation can be a manageable starting point. It simplifies coordination between CSS, straightforward graphics and common image exports. Additional colour spaces are possible. They should serve a specific purpose and be checked through the intended rendering path. An impressive difference on one display does not establish a robust general requirement.

The W3C CSS Color specification describes the relevant models and notations. The version of CSS Color 4 consulted for this article is a Candidate Recommendation Draft. That status does not establish that every described feature behaves identically across all environments. When using extended colours, document the intended fallback and the environments actually checked rather than treating specification coverage as a compatibility report.

Also watch for changes introduced during file exchange. Ask which profile is embedded in a supplied image and whether any conversion has occurred. A screenshot is not a substitute for the original definition. It records one particular rendering path and may include further transformations. The approved source file, together with its documented interpretation, remains the more dependable reference.

Give colours jobs

A small palette can support many applications when its roles are explicit. Useful names might include brand accent, text, background, divider and feedback. Different values may serve those roles in different contexts. The important point is that the selection is intentional. Someone building a new component should be able to determine whether a colour is meant for that particular purpose.

This table is a working structure, not a universal palette. An information website may need different roles from a complex administrative application. Add a role when a real task requires one. A collection of barely distinguishable reds creates more selection problems. A short explanation of permitted use can be more valuable than another decorative variation.

Evaluate actual foreground and background pairs

Contrast exists between a foreground and a background. An isolated swatch therefore has no single text contrast that applies to every use. The teaching red produces a calculated ratio of approximately 6.85 to 1 against pure white. Against the warm white #FFFAF3, the result is approximately 6.60 to 1. Against the dark #192329, it falls to approximately 2.33 to 1.

These calculations concern fully opaque colours with the declared sRGB values. Transparency, photographs and gradients require evaluation of the combination actually visible. A partly transparent label does not automatically retain the contrast of its original solid colour. A gradient can produce different ratios at different positions. Check the relevant unfavourable location under the actual content.

WCAG 2.2 generally requires at least 4.5 to 1 for ordinary text under its minimum contrast success criterion. Appropriately large text generally uses a threshold of 3 to 1. Correct classification and the stated exceptions remain part of the assessment. The three computed pairs therefore support a limited conclusion: the first two exceed the general ordinary-text threshold, while the dark pair falls below even 3 to 1.

That conclusion does not establish that a complete component or website is accessible. Focus indication, labelling, operation and other requirements remain separate concerns. A passing calculation also cannot promise effortless reading for every person in every viewing condition. Treat the ratio as one verifiable part of a broader design assessment.

A JavaScript calculation you can inspect

The following function accepts only six-digit hexadecimal colours without transparency. It converts their components into linearised values using the sRGB calculation given in WCAG. It then calculates relative luminance and the ratio between the lighter and darker values. This deliberately narrow input boundary makes the example easier to inspect and reproduce.

function luminance(hex) {
  if (!/^#[0-9a-f]{6}$/i.test(hex)) throw new TypeError('Six-digit hex required');
  const rgb = [1, 3, 5]
    .map(i => parseInt(hex.slice(i, i + 2), 16) / 255)
    .map(c => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
  return rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;
}
function ratio(a, b) {
  const x = luminance(a), y = luminance(b);
  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
}
console.log(ratio('#b80024', '#ffffff').toFixed(2));

The calculation was executed for this article. Reference checks also covered black against white with a result of 21 to 1, white against white with 1 to 1 and unchanged output when the order of a pair was reversed. These cases help expose common mistakes in ordering or normalisation. They do not turn the function into a complete tool for arbitrary CSS colours.

Round only for the readable presentation. A threshold decision must use the unrounded result. A value slightly below a requirement must not become a pass through display rounding. A production checking system also needs to handle supported inputs, alpha compositing and the provenance of the values actually used. This teaching example makes no claim to implement those additional capabilities.

Screen definitions do not describe a print condition

A display emits light. A printed object is viewed under illumination and has a particular physical substrate. This difference alone explains why an unchanged hexadecimal value is not a complete printing instruction. A print standard needs to account for the intended production. Treating an arbitrary online conversion as the definitive print colour leaves essential conditions unresolved.

The International Color Consortium describes profiles as a basis for transformations between device-dependent and device-independent colour spaces. Its introductory material distinguishes input devices, displays and output devices. In a practical handover, a profile therefore has a defined role in the workflow. It is neither a decorative attachment nor a universal guarantee of identical appearance on every material.

Ask the production partner about the intended output condition, required file format and relevant delivery instructions. Establish the paper or other substrate before final adjustments. A coating, the underlying material and the process can affect the achievable result. If a spot colour is involved, the agreed reference and its intended application also belong in the production brief.

Do not publish supposedly authoritative CMYK percentages without the associated condition. Different production paths can treat the same sRGB starting point differently. Conversely, identical CMYK component values do not prove identical appearance on different output devices. Good documentation connects numbers to their interpretation and to the limitations agreed for the job.

Make approvals specific

An approval should identify what has actually been approved. Was the arrangement accepted on a screen? Was a colour proof evaluated under agreed conditions? Was a sample on the intended material accepted? These decisions are related but answer different questions. A file marked approved without further context can therefore create a false sense of certainty.

Before production, decide what will serve as the reference and who will evaluate it. Record the date, version, material, process and associated files. For colour-critical work, discuss the requirements and suitable verification method with the production partner. A guide should never imply that a particular physical result has already been confirmed when no real evaluation has occurred.

A soft proof within a suitable colour-managed workflow can help assess an output path. It does not automatically replace every other necessary approval. The actual workflow and its prerequisites matter. A casual photograph of a sample on someone else's phone is particularly unsuitable for deriving a definitive numerical colour. It adds another capture and display path to the chain.

Design a handover that prevents avoidable questions

A practical colour document includes more than an attractive overview page. It brings together digital definitions, roles and approved examples. Add the responsible person and the location of the authoritative source. Someone preparing an advertisement several weeks later should be able to find the relevant version without comparing old attachments and guessing which one still applies.

• Document digital colours with their space, explicit notation and version.
• Describe permitted foreground and background pairs together with usage limits.
• Distinguish text, actions and feedback by their actual purpose.
• Supply print values with the associated production condition and necessary files.
• Record the object of approval, responsible person and unresolved production questions.
• Archive superseded versions clearly and identify the current authoritative source.

For important rules, show a small application example. A button with a readable label communicates more than an isolated surface swatch. A feedback example can also show that text and a symbol communicate the meaning independently of colour. Keep examples close to components people actually use. Otherwise, the guide's most attractive pages can become disconnected from everyday implementation.

Handle changes through their consequences

Suppose a new dark background is introduced. The existing teaching red achieves only approximately 2.33 to 1 against it. A useful response starts with the intended role: must red carry text there, or can it remain a decorative accent? Is an approved light text colour available? Does this environment need a new variant? The task should guide the decision.

Avoid changing the central brand value immediately to rescue one combination. Such a change can affect many components and production files. First identify the applications and dependencies involved. Then record which role receives a different value and why. This makes it possible to distinguish an extension from a fundamental revision of the standard.

The same reasoning helps with print. A new substrate first calls for an examination of production conditions. It does not automatically justify changing every digital asset retrospectively. Keep job-specific adjustments distinct from the general brand standard. A deliberate exception can be documented without quietly becoming a new rule for unrelated work.

Review a real delivery before accepting it

Use the handover to perform one concrete rehearsal. Ask a colleague who did not prepare the standard to create a simple heading, a paragraph and a primary action. Give them only the documented files and rules. Observe which decisions remain ambiguous. This exercise checks whether the documentation supports actual work rather than whether its author can explain it from memory.

Repeat the rehearsal for a print request by preparing a short production enquiry. The enquiry should identify the intended product, material questions, source files and approval expectations. It should not invent profile names or measurements merely to make the form look complete. An explicit question for the production partner is more useful than a confident value with no established basis.

Record the outcome as documentation feedback. Perhaps a text role needs a clearer name or the approved source location is difficult to find. These are actionable improvements. Do not turn the rehearsal into a claim about colour accuracy or production consistency unless those properties were actually evaluated using appropriate methods. A useful process separates usability of the guide from verification of a physical result.

Frequently asked questions

Is a hexadecimal value enough for a website?

It can describe an explicit sRGB starting colour. The application still needs roles, background combinations and states. Images and other supplied files also need to fit the intended colour workflow. A useful standard adds this application layer instead of repeating the same hexadecimal value in many different places.

Can a printer create suitable files from the hexadecimal value?

A printer can propose a suitable workflow and perform conversion for an agreed production. That requires the relevant conditions and an aligned expectation. The starting value alone does not fully describe the achievable gamut or the substrate. A specific brief and an appropriate approval method establish what the parties can rely on.

Why does the same colour look different on two displays?

Devices, settings, ambient illumination and colour management can influence rendering. That is a reason to maintain a precise definition. It provides the common starting point from which differences can be investigated. Repeatedly adjusting the source according to whichever display happens to be nearby would undermine that foundation.

Does good contrast make a good brand colour?

Contrast is an important property of particular applications and pairs. The suitability of a brand colour also involves recognition, tone and interaction with other design elements. Assigning roles connects these requirements. A colour does not need to perform every task to make a strong contribution to the identity.

Sources and review date

Sources were checked on 9 November 2026. The W3C CSS colour specification describes sRGB. WCAG 2.2 supplies the relative luminance calculation used here. The WAI explanation of minimum contrast provides its requirements and context. The International Color Consortium introduction explains the purpose of device profiles. The ICC questions and answers provide further colour-management background. The handover process described in this article is an editorial working structure and does not represent approval of a printed result.