Color usage (Material Design)
Google’s Material Design guidelines on applying color in an interface — hierarchy and emphasis, brand expression (bold vs. subtle), color as a carrier of meaning and state, and consistency across contexts. Cited live at the URL above.
License: Apache License 2.0 — per the site footer.
Key points
- Contrast drives emphasis: strong color contrast between an element and its surroundings draws attention to it; pairing a color change with a simultaneous shape change (e.g., a chip’s corner shape) signals selection or urgency more strongly than either change alone.
- Limiting color elsewhere increases its power where used: restricting color to a small set of elements (e.g., a grayscale palette with one black floating action button) makes those elements stand out more than if color were applied broadly — the same “the signal only works where most things lack it” logic that makes any hierarchy variable self-depleting when overused. See Visual Hierarchy.
- Brand color, bold vs. subtle: brands wanting to feel energetic use color boldly (saturated, high-contrast) while preserving legibility and usability; brands wanting to feel sophisticated use color sparingly, reserving a secondary color for isolated accents so it stands out precisely because it’s rare.
- Subtle brand moments: placeholder/loading UI, progress indicators, and state changes are good places to inject brand color subtly, since they reinforce brand presence without competing with primary content.
- Color communicates meaning and state: color can indicate real-world meaning (traffic conditions, weather) and interface state (enabled/disabled, selected/unselected, interacted/not) — but a state change communicated by color alone should be strong enough to notice, and backed by a second channel (an icon, a position change), since subtle color differences are easy to miss.
- Consistency and cultural context: a given color should mean the same thing everywhere it’s used, and once a color carries a brand association, it shouldn’t be reused for an unrelated meaning (e.g., a red brand color shouldn’t also mark error states) — cultural association isn’t universal either, e.g. an alert color assumed urgent in one culture doesn’t necessarily read that way in another.