Pick your base color
Start with the one color that should represent your brand or product. This is usually:
Good starting points
- A color from your logo
- A hue that fits your product's tone — calm blue, energetic orange, trustworthy green, etc.
When choosing the exact base:
Things to check
- Avoid extremely dark or extremely light values — a mid‑tone is easier to extend in both directions.
- Make sure it looks good on a white/light background (light theme) and on a dark/neutral background (dark theme).
On Colorr, you can:
Where to find a base
- Pick from Tailwind, Material, Radix, Chakra, Ant Design — for example
blue-500,indigo-600,teal-500. - Or start from a Crayola/brand color and align it to a nearby UI hue.
Your base color will typically become something like primary-500.
Generate lighter and darker shades
From your base, you want a small scale you can use for background tints, borders and outlines, hover/pressed states and stronger emphasis when needed.
A common pattern is a 9–10 step scale:
There are two main ways to generate the steps:
Option A — use an existing structured palette
Fastest and safest
- If your base color lives in Tailwind, Material, Radix or Chakra, choose one shade as your base (500 or 600).
- Re‑use the rest of the scale from that system for consistency.
- Optionally nudge individual steps later if you need specific contrast targets.
Option B — build your own scale
- 1Lock the hue (in HSL or OKLCH) so you stay on the same color.
- 2Step lightness in small, regular increments — ~5–8 points in HSL L, or equivalent in OKLCH L.
- 3Optionally vary saturation/chroma: lighter tints slightly less saturated, mid‑tones more, darkest tones slightly desaturated to avoid muddy blacks.
Visually, check that each step is clearly distinct from the next and the progression feels smooth without sudden jumps. Colorr shows HSL/OKLCH values alongside hex so you can tune L (lightness) and C (chroma) consistently.
Test contrast in realistic combinations
Once you have a rough scale, test it in real UI pairings — not just swatches.
Text on light backgrounds
- Try primary-700 or primary-800 as text color on white or very light backgrounds.
- Ensure at least 4.5:1 contrast for normal text.
- Use primary-600 or primary-500 for headings and buttons where size and weight are larger.
Text on colored backgrounds
- Choose a background shade (often primary-500 or primary-600).
- Test white text on top. If contrast is too low, darken the background a bit, or switch to a very light tint (primary-50) for the text.
Tints and outlines
- Use primary-50–200 for subtle background tints behind cards, alerts and selected states.
- Use primary-700–800 for borders or focus rings on light backgrounds.
In all cases, check readability and visual weight rather than just numbers: some combinations technically pass WCAG but still feel unbalanced.
Map shades to meaningful tokens
Your scale is most useful when you map each shade to semantic tokens that match how you design and code.
In practice, you can expose these as:
--color-primary-50 … --color-primary-900 (CSS variables)
primary[50] … primary[900] (JS/TS theme object)
buttonPrimaryBg, linkColor, focusRing … (semantic aliases)
The important part is consistency: pick a convention, document which numbers are intended for what kinds of use, and stick to it across components.
Extend the palette around your primary
Once your primary scale is in place, apply the same approach to:
What to build next
- A neutral scale (gray / stone / slate) for backgrounds and text
- Semantic hues — success, warning, error, info — each with their own small scale and token mapping (success-50…900, etc.)
Use Colorr's collections as building blocks:
Tailwind / Chakra / Ant / Radix
- Ready‑made structured scales — great for plug‑and‑play primaries and neutrals.
Material
- Tonal palettes and semantic guidance for light and dark themes.
Crayola / RAL / Munsell
- More characterful or domain‑specific hues when you need something beyond standard UI blues and grays.
A minimal recipe you can follow every time
A repeatable workflow from one color to a full palette:
- 1
Choose a mid‑tone base. Pick the color that represents your brand — typically maps to primary-500.
- 2
Generate a scale. Reuse or align with an existing system (Tailwind, Material, Radix) for the fastest result, or build your own by stepping HSL/OKLCH lightness.
- 3
Test contrast. Check text on light backgrounds, text on primary backgrounds, and tints for backgrounds and outlines.
- 4
Map to tokens. primary-50…900 plus semantic aliases like buttonPrimary, linkDefault, focusRing.
- 5
Repeat for neutrals and semantic hues. Apply the same pattern to grays and to success, warning, error and info colors.
With this approach, a single well‑chosen color becomes the backbone of a flexible, consistent color system that you can reuse across products, codebases and design tools.