About this tool
Shades and tints are the foundation of a usable UI color system. A single brand color is rarely enough on its own: you need lighter tints for backgrounds, hover states and subtle fills, and darker shades for body text, borders and states that must stay readable against light backgrounds. "Shade" and "tint" have precise meanings in design terminology — a shade mixes the base color with black, a tint mixes it with white — distinct from a "tone", which mixes it with gray and is not generated by this tool.
Pick a base color and a number of steps to generate a full dark-to-light progression: darkest shade first, your original color in the middle, and the lightest tint last. Click any swatch to copy its hex code to the clipboard for use in your CSS variables, design tokens or Tailwind config. Everything runs locally in your browser as you adjust the color or step count; nothing is uploaded.
Frequently asked questions
What's the difference between a shade and a tint?
A shade is your base color mixed toward black (darker), while a tint is your base color mixed toward white (lighter). Both keep the same hue.
How many steps should I generate for a design system palette?
Most design systems use 5-10 steps (similar to Tailwind's 50-900 scale) — enough to cover backgrounds, borders, text and hover states without too many near-duplicate colors.