Enter a base color and this tool generates a full scale of tints (lighter) and shades (darker), the kind of ramp you need for a design system. Each step is shown with its HEX value, ready to copy. It runs entirely in your browser.
How to use it
- Pick or type a base color.
- A scale of lighter and darker variants is generated.
- Click any swatch to copy its HEX value.
About Color Palette Generator
A single brand color is rarely enough — interfaces need a consistent range of lighter and darker variants for backgrounds, borders, hover states and text. Building that ramp by eye is slow and inconsistent. This generator takes one base color and produces an even scale of tints and shades by adjusting its lightness, giving you a coherent palette in one step. Each swatch shows its HEX code for easy copying into your CSS or design tokens. Everything is computed locally in your browser.
FAQ
What is the difference between a tint and a shade?
A tint is the color mixed toward white (lighter); a shade is mixed toward black (darker).
What format are the outputs?
HEX values, which you can copy directly into CSS or design tokens.
How do tints and shades work?
A tint is a colour mixed with white (lighter), and a shade is mixed with black (darker). Generating a consistent set of tints and shades from one base colour gives you a harmonious palette for backgrounds, borders and states.