Color Palette Generator

A good color palette isn't just about picking colors you like — it's about creating a set of colors that work together systematically. That means tints, shades, semantic roles (primary, secondary, danger, success), and enough variation to cover all the states your UI will have. Building this from scratch is tedious, but starting with the wrong palette costs you refactoring time later.

How Palettes Are Structured

Most design systems organize colors in two dimensions:

Hue roles — Primary (brand color), Secondary (accent), Neutral (grays), Semantic (success, warning, error, info) Shade scale — Typically 50–950 (following the Tailwind convention) or 100–900 (Material Design). Each stop is a tint (lighter) or shade (darker) of the base hue.

The CalcHub Color Palette Generator takes your base color in any format (hex, RGB, HSL) and generates a full 10-stop scale by adjusting lightness in the HSL color model while preserving hue and saturation. It then generates a complete four-role palette (primary, secondary, neutral, semantic set).

Color Scales: What the Numbers Mean

Scale Value	Typical Use
50	Subtle background tint
100–200	Light background, hover states
300–400	Borders, dividers
500	Base color (badges, icons)
600–700	Button backgrounds, primary actions
800–900	Text on light backgrounds
950	Near-black for high contrast

A button might use 600 as its background, 700 on hover, and 50 as its disabled state — all from the same base hue, all harmonious, all with clear semantic meaning.

Generating a Palette from a Brand Color

Say your brand color is #3B82F6 (a medium blue). Running through the generator:

Scale	Hex	Use
50	#EFF6FF	Page background tint
100	#DBEAFE	Alert backgrounds
200	#BFDBFE	Borders
300	#93C5FD	Inactive states
400	#60A5FA	Secondary buttons
500	#3B82F6	Icons, badges
600	#2563EB	Primary button
700	#1D4ED8	Button hover
800	#1E40AF	Button pressed
900	#1E3A8A	Text links on white
950	#172554	Near-black variant

This is roughly how Tailwind's blue-* scale works — methodically derived rather than hand-picked.

Export Formats

The generator exports to:

• CSS custom properties — --color-primary-600: #2563EB


• Tailwind config — Drop into tailwind.config.js colors


• SCSS variables — $primary-600: #2563EB


• Figma token JSON — Import directly into Figma's token plugins


• Swift / SwiftUI — Color("primary600")


• Kotlin / Android XML — Resource color definitions

Tips

• Neutral grays need a slight tint. Pure grays (equal R, G, B) feel sterile. Warm grays (slightly yellow/orange) feel friendly; cool grays (slightly blue) feel modern and technical. Tint your neutral scale 5–8 degrees toward your primary hue for better cohesion.
• Check all shades at your actual contrast ratios. A 600 on white might pass WCAG AA, but 500 might not. Use the Contrast Checker after generating your palette.
• Don't generate semantic colors separately. Your success green should still look like it belongs in the same family. Use the generator's "match saturation" mode to create semantics that feel consistent with your primary palette.

How many colors should a design system have?

Most production design systems have 5–8 hue families (primary, secondary, neutrals, and 3–4 semantics), each with a 10-step scale. That's 50–80 named colors. More than that becomes hard to use consistently; fewer leaves gaps in the UI states you need to express.

Should I use HSL or HSLuv for palette generation?

HSLuv is perceptually uniform — equal steps in HSLuv look like equal steps in perceived brightness to human eyes. Standard HSL is not: a yellow at 50% L looks much brighter than a blue at 50% L. For accessible, predictable palettes, HSLuv or OKLCH is preferable. The CalcHub generator offers both modes.

Why do my brand colors look different on screen vs in print?

Screens use RGB (additive) while print uses CMYK (subtractive). Colors that look vibrant on screen — especially saturated blues and purples — often look duller in print. If you're designing for both, check CMYK equivalents and consider if your brand color needs a print-specific variant.

Related Calculators

• Color Harmony Calculator — find complementary, triadic, or analogous colors
• Contrast Checker — verify WCAG compliance across your palette
• CSS Gradient Generator — create gradients from your palette colors