Start with your brand color
Every UI needs at least one brand color. This is usually the color that appears in your logo or other identity material.
In a UI, the brand color typically becomes:
Brand color roles
- The base for your primary color
- The color of primary actions and highlights
- The most recognizable element across products and platforms
When choosing or refining your brand color for screen use, think about:
Things to check
- Is it still readable when used on buttons and links?
- Does it work both on light and dark backgrounds?
- Can you create lighter and darker shades that still feel "on brand"?
On Colorr you can start from an existing brand color in any collection — for example a Tailwind, Material or Open Color blue — and build out a scale of lighter and darker steps around it.
Primary, secondary and accent: what's the difference?
Once you have a brand color, decide how it shows up in your interface. A common pattern is:
Primary color
- The main action color. Used for primary buttons, key links, active states in navigation and important highlights.
- Should be clearly distinguishable from neutrals.
- Used consistently for "most important actions".
- Available in several shades — for example a stronger shade for hover/focus and a lighter shade for backgrounds.
Secondary color
- A supporting color for less critical actions or alternative emphasis.
- Can be a softer variant of the primary hue, or a different hue that still fits the brand.
- Secondary buttons and tags often use this color. It should not compete with the primary color for attention.
Accent color
- Small, focused highlights. Works best when used sparingly.
- Icons or badges that require attention, small decorative elements, selected states in controls such as toggles or sliders.
- Can be a brighter shade of the primary color, or a contrasting hue that still feels coherent with the overall palette.
The key is consistency: once you decide that "blue is primary, teal is accent", stick to that mapping throughout the product.
Neutrals: the backbone of your UI
A strong UI is mostly built on neutrals — shades of gray or very low‑saturation colors. They form the base for:
Where neutrals are used
- Page backgrounds
- Surfaces such as cards, panels and tables
- Borders, dividers and disabled states
- Body text and secondary text
A good neutral scale typically has:
Neutral scale structure
- 1–2 very light tones for backgrounds
- A mid‑range for borders, outlines and secondary text
- A few darker tones for primary text
Collections such as Tailwind, Radix and Open Color already provide well‑tuned neutral scales that work across many interfaces.
Semantic colors: success, warning, error and information
Beyond brand and neutrals, your UI needs semantic colors that communicate state. The usual set is:
Best practices for semantic colors
- Follow common conventions: green for success, yellow/orange for warning, red for error, blue for information.
- Make sure semantic colors have enough contrast against backgrounds and text.
- Provide multiple shades: a strong shade for icons and text, and a softer shade for background tints behind alerts and banners.
On Colorr you can pick success, warning and error colors from existing palettes — for example Material or Chakra — and adjust them until they feel coherent with your primary and neutral colors.
Links and interactive states
Links deserve their own role in a color system. They are not just text with a different color; they are a primary navigation mechanism.
Defining link colors
- Choose a base link color that is clearly distinguishable from body text and from your primary button color.
- Provide at least: default, hover/focus, and visited states (if your product benefits from that distinction).
- Link colors can be the same hue as your primary color but lighter or darker, or a neighboring hue that stands out well in paragraphs.
Similarly, define colors for interactive states:
Interactive state colors
- Hover and pressed states for buttons
- Focus outlines
- Selected states in lists and menus
Using consistent, slightly darker or lighter variants of your primary/secondary colors for these states gives your UI a coherent feel.
Putting it together: a minimal color system
If you want a compact but complete system, start with the following roles:
- 1
Brand / primary hue — With a small scale of tints and shades.
- 2
Neutrals scale — For backgrounds and text.
- 3
Secondary and accent colors — Optional but useful in larger products.
- 4
Semantic hues — Success, warning, error, info.
- 5
Link color and interactive state variants — Default, hover, focus, visited.
From these roles you can define actual tokens, for example:
color.primary, color.primary.bg, color.primary.text
color.neutral.0–9
color.success.bg, color.success.text
color.link.default, color.link.hover
Colorr's named color collections give you a starting point for each of these roles. Once you choose a base hue from Tailwind, Material, Radix or another system, you can build out a small, consistent set of color roles that cover the needs of most interfaces.
Next steps
Once you have a basic system of primaries, secondaries, accents, neutrals and semantic colors, you can:
Where to go from here
- Test contrast for real components
- Map colors to your design tokens or CSS variables
- Create light and dark themes using the same roles but different underlying values
Other pages in this Learn section go deeper into accessibility, color models and how to translate named colors from the collections on Colorr into a robust design system.