maratoolColor shades vs palette generator
A side-by-side comparison of Color Shades Generator and Palette Generator.
A color shades tool takes one color and generates lighter tints and darker shades on a luminance scale — the building blocks of a single brand color’s 50–900 ramp. A palette generator produces a set of distinct, harmonized colors using rules like complementary, analogous, triadic, or split-complementary.
Both are upstream of every design system. Shades give you depth within a hue; palettes give you breadth across hues. Most real systems use both: a brand color expanded into shades plus 1–3 accent hues from a palette generator.
When to use Color Shades Generator
Use the color shades generator to expand a single brand color into a usable ramp — the 50/100/200…900 scale used by Material, Tailwind, and most design tokens. You feed in #2D6EF6, you get back a 10-step ladder with predictable contrast.
When to use Palette Generator
Use the palette generator when you need multiple distinct hues that work together — a brand secondary, accent colors for tags or categories, illustration palettes. Pick a harmony rule (complementary, analogous, triadic) and adjust from there.
Side-by-side comparison
| Color Shades Generator | Palette Generator | |
|---|---|---|
| Input | One color | One color (or none) + harmony rule |
| Output | Tints + shades of one hue | Multiple harmonized hues |
| Typical count | 5–11 steps | 3–7 colors |
| Varies hue | No — same hue, different lightness | Yes — by harmony rule |
| Common use | Design token ramp (50–900) | Accent colors, tags, illustration |
| Algorithm | HSL lightness or LCH lightness stepping | Color theory (complementary, triadic…) |
| Predictable contrast | Yes — sortable by L* | Depends on harmony |
| Right tool for ramps | Yes | No |
Bottom line
Shades take one color deeper; palettes spread it wider. Most design systems need both, in that order.
Frequently asked questions
How many shades should my ramp have?
Material and Tailwind use 10 steps (50, 100, 200, … 900). Eleven if you add 950. Fewer (5–7) is fine for smaller systems — the key is consistency across hues.
Why do my shades look muddy in the middle?
HSL-based stepping produces dull mid-tones because saturation collapses at high/low lightness. Generators using LCH (perceptual luminance) keep mid-tones vibrant — prefer those.
Should every shade pass WCAG AA on white?
No — a ramp has a deliberate spread. The lightest steps fail intentionally (used for hover/background tints); the dark steps pass. Pick which step is your "default" and check that one.
Can the palette generator output a full design system?
It outputs the seed hues. Run each through a color shades tool to get the ramps. A real design system also needs neutral, success, warning, danger, and info colors — generated the same way.