How a one-color palette is built
A tint is a color mixed toward white, and a shade is a color mixed toward black. A set of tints and shades made from one base color gives you a consistent scale for backgrounds, borders, text and hover states.
This tool works in HSL. It reads your base color, keeps its hue and saturation, and changes only the lightness. The seven swatches use lightness values of 90%, 75%, 60%, the base color's own lightness, 40%, 25% and 12%. Each result is converted back to a HEX code.
Because the hue and saturation stay fixed, every swatch is recognizably a relative of the original, which is why this approach is common for interface color scales.
When a single-color scale helps
A scale is useful when you have one brand color and need to fill out an interface. The lightest swatch suits a subtle background, the middle ones work for buttons and borders, and the darkest suit text or dark mode surfaces.
It is also a fast way to explore how a color behaves at different lightness levels before committing to it. Developers can paste the HEX codes into CSS variables, and designers can drop them into a style guide.
If you want to see the base color in other notations, such as HSL, use the HEX to HSL converter.
How to generate a palette with this tool
- Click the color swatch to pick a base color, or type a HEX code in the field beside it. It starts with #5B4FF0.
- Seven swatches appear underneath, each labeled with its HEX code.
- Click any swatch to copy its code to your clipboard. A check mark appears briefly to confirm.
- Change the base color and the whole palette updates immediately.
Everything is calculated in your browser, and nothing is stored or uploaded.
What to know before using the results
The base color always sits in the fourth position, whatever its lightness. If your base is already very dark or very light, the row will not be sorted from light to dark. For example, a base with 20% lightness would sit between the 60% and 40% swatches even though it is darker than the 25% one, so scan the row instead of assuming a smooth order.
If the HEX field holds something invalid, the tool quietly falls back to #5B4FF0 for the palette, so check the field if the swatches do not match your color. Three-digit codes and codes without the # are accepted.
Colors at the extreme ends can look very similar, and pure grays have no hue to preserve. There are no export formats beyond copying single codes. Always test text on the swatches with the color contrast checker before using a pairing.