Roles, not harmony
There are two different colour questions, and mixing them up is why palettes get rebuilt three times.
The first is which hues go together — a question about harmony, answered by rotating around the colour wheel. The second is what colours does an interface need — a question about roles, answered by taking a colour you have already chosen and deriving everything else from it.
The [msm_tool slug="color-palette"] answers the second. It takes one brand colour and produces the tint and shade scale, the neutrals, and the semantic colours that an interface actually consumes.
Assign by role, not by shade
This is the whole point of the exercise.
Decide that borders use the border colour, body text uses the body colour, and surfaces use the surface colour. Then changing the brand colour re-derives the entire interface in one edit. Picking shades by eye each time does not — you end up with fourteen greys, three of which differ by two percent, and no way to change any of them safely.
A working set of roles for most interfaces:
- Surface — page and card backgrounds.
- Border — dividers, input outlines, card edges.
- Muted text — captions, timestamps, secondary labels.
- Body text — everything read at length.
- Brand scale — the five steps from lightest to darkest, for fills, states and accents.
- Semantic — success, warning, danger.
The greys are tinted on purpose
A truly neutral grey beside a saturated brand colour looks like it came from a different palette. It reads as flat and slightly dirty, and designers usually fix it by eye without being able to say what was wrong.
Carrying a trace of the brand hue — ten percent saturation or so — makes the neutrals belong to the same family. The effect is subtle enough that nobody notices it directly and obvious in comparison once you see the two side by side.
Semantic colours are not yours to rebrand
Success, warning and danger are fixed by convention and are deliberately not derived from your brand colour.
Green means success and red means danger because people have learned it, not because those hues have inherent meaning. A brand-coloured error state is simply not recognised as an error — users read it as decoration and carry on. This is one of the few places where consistency with everyone else beats consistency with yourself.
The one adjustment worth making is lightness: shifting the semantic colours slightly toward your palette's overall brightness helps them sit with the rest without changing what they signal.
The contrast figures are the decision
Each swatch shows its ratio against white and against black, and those two numbers sort the palette into roles faster than any amount of trying combinations.
A colour scoring well against white wants white text. One scoring well against black wants dark text. One failing both is a fill colour, a border, an accent on something else — putting a label on it will fail whichever text colour you pick.
Colour must never be the only signal
Around one man in twelve has some form of colour vision deficiency, and red and green — the two semantic colours that matter most — are precisely the pair that merges.
Every semantic colour needs a second cue: an icon, a word, a position, a border style. A form field that is only red is a field some users cannot tell is wrong. Adding the word "Error" costs nothing and works for everyone.
Dark mode is not an inversion
Flipping the scale end for end produces something that technically works and looks wrong. Saturated colours are harsher on dark backgrounds, pure white text on pure black causes visible halation for many readers, and the neutrals usually need different tinting.
The usual approach is a second set of role assignments against the same scale rather than a second scale — surface becomes a dark step, body text becomes a light one, and the brand colour often moves a step or two lighter to stay legible.
Where this sits alongside the colour wheel
Use the wheel when you do not yet know your colours and want to find hues that relate. Use this when you have a brand colour and need the twenty values an interface consumes. They answer different questions, and most projects need both, in that order.