Color Variations
Create tints (lighter) and shades (darker) from a base color. Shareable via ?hex=.
When to use tints and shades
Tints and shades keep one hue recognizable while giving you enough steps for hover, active, disabled, subtle background, border, and focus states.
Start from a color that already represents the product, category, or action you are designing.
Use lighter tints for soft backgrounds, selected rows, alerts, or low-emphasis badges.
Use darker shades for hover states, pressed states, text on light backgrounds, and stronger borders.
Avoid using every generated step in production; choose a small ramp and document the role of each token.
FAQ
How many steps should I generate?
Five to seven steps are usually enough for a small product. Larger design systems may keep more steps, but every step should have a clear purpose.
Are tints always accessible as backgrounds?
Light tints can be useful backgrounds, but text placed on them still needs a contrast check against the final foreground color.
Should I use shades for dark mode?
Shades can help, but dark mode often needs separate contrast decisions because surfaces, borders, and text all change together.
Can I copy a whole ramp?
Each swatch copies individually. For project tokens, send the base color to the export tool and define only the steps you plan to support.