Build a Brand Palette from Real Interface Roles
Turn a brand accent into surface, text and action tokens, with separate decisions for digital use and print handoff.
Updated : Rebuilt around explicit design choices, reproducible examples and documented limitations; retained the existing URL.
Begin a brand palette with the work it must support. A small software product might need a landing page, navigation, buttons, forms, charts and email. Make a list of those contexts before choosing supporting swatches. The exercise below preserves a coral accent while assigning darker values to reading roles.
Separate brand recognition from text roles
A reproducible text and background example.
Same pair, larger text.
##FF7F50 / ##FFFFFF
The coral accent tested as small text on white.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##9A3412 / ##FFFFFF
A darker orange candidate for text on white.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixThe first color can remain in illustrations and decorative surfaces even if it fails as small text. The second is a role-specific candidate, not a replacement brand identity. Put the chosen values next to real headings, field labels and button copy to review their behavior.
Keep the palette small enough to inspect
:root {
--brand-accent: #FF7F50;
--brand-ink: #9A3412;
--surface: #FFFFFF;
--text: #111827;
--on-accent: #000000;
}Add semantic success, warning or error values only when the UI needs them. Name their purpose and keep messages understandable beyond color. A harmony can suggest supporting hues, but it cannot decide your product's status vocabulary or validate every combination.
Test before handing off
Inspect at least a navigation bar, one form and an action button in normal, hover and focused states. Write down which text belongs on each surface. Keep those pairings with the exported tokens so another designer does not use a decorative accent as a small text color.
Make print a separate conversion task
For print, ask the printer for its target profile and proof requirements. The CMYK numbers in this tool are unprofiled estimates. Do not promise an exact ink match from a HEX conversion or use a screen preview as a press proof.
Open the brand example in Studio and export its values. The role aliases above are design decisions you can adapt to your own product.