Most early-stage brands have a palette, not a color system. A palette is a set of swatches. A system is a set of rules for how those swatches are used, in what contexts, at what scales, and for what purposes.
The difference matters most when the brand grows: new pages, new products, new formats. Without a system, each new touchpoint requires a new decision. With a system, the decision is already made.
Start with the Purpose of Each Color
Before worrying about values, define what each color in your palette is supposed to do.
A useful minimum for a digital brand:
Primary — the color most associated with the brand. Used for primary actions, key highlights, and brand moments.
Secondary — supports the primary. Used for secondary actions, hover states, and accents.
Neutral — backgrounds, surfaces, borders, and body text. Usually a range of grays or near-neutral tones.
Semantic — colors that communicate status: success (green), warning (amber), error (red), info (blue). These are functional, not brand expression.
If a color in your current palette does not fit one of these purposes, it is either redundant or a purpose you have not defined yet.
Build a Tonal Scale, Not Just One Shade
A single hex value for your primary color is not enough for a real system. You need a scale: lighter tints for backgrounds and hover states, the base for primary use, and darker shades for pressed states and text-on-light contexts.
A standard scale runs from 50 (very light) to 900 (very dark), with 500 as the base.
Tailwind Color Palette Generator — uicolors.app/create
Enter a hex and get a full Tailwind-compatible tonal scale. Exports as CSS custom properties.
Huetone — huetone.ardov.me
Builds perceptually uniform color scales using the OKLCH color space. More accurate than HSL-based generators.
Realtime Colors — realtimecolors.com
Preview your full palette on a real website layout in real time. Useful for catching contrast issues before they end up in a design file.
Contrast Is Not Optional
WCAG 2.1 AA requires 4.5:1 contrast ratio for normal text and 3:1 for large text and UI components. This is not a nice-to-have. It is a legal requirement in many contexts and a usability requirement in all of them.
WebAIM Contrast Checker — webaim.org/resources/contrastchecker
Enter foreground and background hex values, get a pass or fail for AA and AAA.
Accessible Color Generator — learnui.design/tools/accessible-color-generator.html
Given a target color, finds the closest accessible version that passes contrast requirements.
Naming Your Colors
There are two approaches to naming color tokens in a system.
Literal naming: primary-500, neutral-200, semantic-error. Describes what the color is.
Semantic naming: color-action-default, color-surface-raised, color-feedback-danger. Describes what the color is for.
Semantic naming is harder to set up and much easier to use at scale. For a design system that will be used in code, invest in semantic naming from the start.
Documenting the System
A color system is only as useful as its documentation. At minimum, document:
- The purpose of each color role
- Which combinations are approved
- Which combinations are not approved
- The export format for each platform
A one-page reference with swatches, hex values, usage rules, and approved combinations is enough for most small teams.
Color systems feel like over-engineering until you spend three hours debugging why the button looks different on the pricing page than on the homepage. Build the system once. Make the decision once.
Discussion
Loading comments...