Styling & CSS · Color
Color Palette
Also called: Color scheme, Theme colors, Brand colors, Color system
The full set of colors an interface uses and the rules for using them, including the brand's primary color, black, white, and gray neutrals, and semantic colors for success, warning, and error.
In detail
A palette usually has three groups. Primary color (the brand color, used for primary buttons, links, and selected states). Neutral colors (a set of grays from light to dark, used for text, borders, and backgrounds, and making up most of the interface). Semantic colors (green for success, orange for warning, red for error, blue for info). Each color usually gets a scale of shades from light to dark, like 50 to 900.
A common guideline is 60-30-10. The dominant color (usually a neutral background) takes about 60%, a secondary color 30%, and an accent color only about 10%, used where attention matters most. More colors means more mess, and a common problem in beginner interfaces is using too many bright colors.
When asking AI, give it the color values directly, or name an existing palette, like "use Tailwind's slate for neutrals and indigo for the primary color."
Developer infoTerm ID, DOM cues, match priority
- Term ID
style-color-palette- DOM selectors
- No DOM cues. This concept isn't detected directly on a page.
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v1 · updated Sep 29, 2026