Brand color is not product color
The color from the logo was chosen for a context where nothing sits on top of it. Then somebody made it a button.
↑ Click any of these to repaint the entire site with it.
Brand guidelines specify a color. It was chosen by looking at it on a white page, at large size, with nothing on top of it. That is a logo brief.
A product needs that color to be a button fill with a label on it, a link inside a paragraph, a focus ring, a chart series, a selected state, a border, and a background tint. Those are seven different briefs and the logo color will satisfy at most two of them.
Why the logo color usually fails as UI#
It sits in the illegible middle. Brand colors cluster around 50–65% lightness because that is where a color looks most itself. That is exactly the band where neither white nor black text clears 4.5:1 on top of it.
It is too chromatic for large areas. A color that is striking at logo size is oppressive across a hero section.
It has no relatives. One color is not a system. You need it lighter for backgrounds, darker for hover, muted for disabled, and none of that is in the brand book.
It might not pass at all. Plenty of well-known brand colors do not clear 3:1 against white. If your brand is a mid-yellow or a light cyan, the logo color simply cannot be a link color.
The relationship to define#
Keep the brand color as the brand color. Derive a product color from it.
/* Brand — from the guidelines. Logo, illustration, large graphic fills. */
--brand: #e0245e;
/* Product — derived. Darker so white text clears AA on it. */
--color-action: #b81d4c;
--color-action-hover: #9c1741;
--color-on-action: #ffffff;Same hue. Same recognizable identity. Ten to fifteen points of lightness darker, which is enough to make the label legible and not enough for anyone to describe it as a different color.
For dark themes it goes the other way — lighter than brand, with dark text on it.
Have this conversation early#
The failure mode is not technical, it is organizational. Somebody in brand says "the button must be the brand color", somebody in engineering says "then the label fails accessibility", and the compromise gets made three sprints later under deadline, badly.
The framing that works: the brand color is not being changed. It is being extended. You are adding the darker and lighter members of the same family that the guidelines never needed to specify because the guidelines were about a logo.
Most brand teams accept this immediately when it is put that way, and resist it strongly when it is put as "your color fails accessibility".
What to put in the extended guidelines#
If you are the one writing this down, the useful artefact is short:
- The brand color, unchanged, with its permitted uses
- An eleven-step ramp derived from it
- Which step is the action color, in light and dark themes
- The text color that goes on top of each
- The one accent rule: one accent-colored element per screen
Five items. It fits on a page and it prevents the entire class of argument.
The exception#
Sometimes the brand color genuinely is the right product color. Deep blues and dark greens often work directly, because they already sit in the range where white text is comfortable.
If yours does, use it. Just check rather than assume — and check the hover state too, since "the brand color, slightly darker" is where a lot of otherwise careful systems stop looking.