How would you generate a functional palette from one brand color?

WHAT THIS TESTS: This question evaluates whether you understand color as a system rather than a collection of values. Interviewers want to see that you can scale a single brand color into a full functional palette while maintaining accessibility, predictability, and engineering handoff clarity. The focus is on perceptual uniformity, contrast compliance, and stateful interaction design.

A GOOD ANSWER COVERS: First, choose a perceptually uniform color space. HSL is common in CSS and easy to explain, but LCH or OKLCH is better for perceptual consistency because lightness changes look even across hues. Second, generate a neutral scale and a primary scale with 8 to 12 stops, typically mapped to semantic names like 50 through 900. Use these for text, backgrounds, borders, and elevation. Third, enforce contrast ratios. Normal text must meet WCAG AA at 4.5 to 1 against its background, and large text at 3 to 1. Interactive states should shift lightness predictably, for example lowering lightness by 10 percent for hover and 20 percent for active, rather than using opacity overlays which can desaturate unpredictably over colored backgrounds. Fourth, derive semantic colors independently. Success should come from a green hue family, error from red, warning from amber, and info from blue, each with their own tint and shade scales. Do not simply tint the primary brand color to make a green or red. Fifth, document tokens. Name them by function rather than value, such as color-background-primary-hover, so engineers can theme or switch to dark mode by remapping stops.

COMMON WRONG ANSWERS: A weak answer suggests manually picking hex codes by eye without mentioning contrast checks. Another red flag is using opacity for hover states without discussing how that affects accessibility over non-white backgrounds. Proposing to derive semantic colors by rotating the brand hue in HSL is also problematic because HSL hue rotations do not produce perceptually matched colors and can yield inaccessible combinations.

LIKELY FOLLOW-UPS: The interviewer may ask how you would adapt this palette for dark mode. You should explain inverting the scale so surface 900 becomes a dark background and text 50 becomes light text, while adjusting saturation because pure lightness inversion can look washed out. They might also ask how you would handle alpha channels for overlays, or how to automate this with a tool like Style Dictionary or Figma variables.

ONE CONCRETE EXAMPLE: Suppose the primary brand color is a royal blue at hex 3B82F6. In HSL this is roughly 217 degrees hue, 91 percent saturation, and 60 percent lightness. You would fix the hue and saturation, then generate stops from 95 percent lightness down to 10 percent. The 500 stop stays near the original brand color. Text on a 100 surface uses the 900 stop for 4.5 to 1 contrast. Hover states on a primary button shift from 500 to 600, and active shifts to 700. Semantic success uses a 145 degree hue with its own scale, error uses 0 degrees, and each is validated for contrast independently.