Color Shades Generator
Build a tint-and-shade palette from any color.
Why generate a color palette?
A single brand color is never enough for a real interface. You need lighter tints for backgrounds and hovers, and darker shades for pressed states and text. This tool mixes your base color with white (tints) and black (shades) in even steps and lists the hex code of every swatch.
Click any swatch to copy its hex code. The CSS variables block below the palette gives you a ready-made design token set in the common 50–900 numbering style, so you can paste it straight into your stylesheet and reference colors like var(--color-500).
Keep the mid tone (500) closest to your original color. If a tint looks washed out, regenerate from a slightly darker base.
FAQ
What is the difference between a tint and a shade?
A tint is the color mixed with white; a shade is mixed with black. Interfaces typically use tints for subtle backgrounds and shades for hover/active states and darker text.
Which step should be my primary button color?
Usually 600 — it is dark enough for white text to pass contrast checks while staying recognizably close to the brand color.
Are these colors accessible?
Contrast depends on the pairing. Test text-on-background combinations with a contrast checker; the dark shades paired with white text generally pass WCAG AA.