Brand Color System Generator
Brand Color System Generator is a free image tool that runs directly in your browser with no account required.
About this tool
Give this generator one hex color and it builds a ten-step brand scale from 50 to 900, the same shape used by Tailwind and most design systems. It keeps your hue, applies a chosen saturation character, and steps lightness down a fixed ramp, then checks key text and background combinations against WCAG contrast thresholds. Tokens export as CSS variables, a Tailwind color object, or plain JSON.
How to use
- Enter your primary color in Base hex color, using 3 or 6 digit hex.
- Set a Token prefix such as brand, which names every generated variable.
- Pick a Palette mode: Balanced UI scale, Vivid marketing scale, or Muted SaaS scale.
- Review the swatches and contrast table, then download the CSS variables, Tailwind tokens, or JSON.
Frequently asked questions
How are the ten shades generated?
The base color is converted to HSL, the hue is kept, saturation is scaled by the mode (muted at 0.55x, balanced at 0.85x, vivid at 1.2x), and lightness follows a fixed ramp from 96 percent at step 50 down to 16 percent at step 900.
What do the contrast checks tell me?
The table computes WCAG contrast ratios for combinations like white text on the 700 shade or dark text on the 50 shade. A ratio of 4.5:1 or higher passes AA for normal text, 3:1 qualifies for large text only, and anything lower is flagged as Low.
Which download format should I use?
Use the CSS variables file for plain CSS projects, the Tailwind tokens JSON to drop into a Tailwind config's colors object, and the JSON export for design tools or build scripts. All three contain the same ten hex values.
Why doesn't my exact base color appear as a step?
The scale is rebuilt from your color's hue with normalized saturation and fixed lightness values, so the nearest step approximates rather than reproduces your input. This keeps the ramp evenly spaced, which matters more for UI work than an exact match at one step.
What is the Token prefix used for?
It names every token, producing variables like --brand-500 in CSS or a brand key in the Tailwind object. Spaces and special characters are slugified away.