Generate a tint-to-shade scale from any colour with hex codes.
Generated locally in your browser.
How do you generate colour shades and tints?
The base colour is converted to HSL and its lightness is stepped evenly from about 92% (lightest tint) down to 12% (darkest shade), keeping hue and saturation constant. A tint mixes a colour toward white; a shade mixes it toward black. For example, a base of #2563eb produces a ramp from pale blue through to deep navy. The result gives cohesive hover, active and surface variants.
Understanding your result
A tint mixes a colour toward white; a shade mixes it toward black. A consistent ramp gives you hover, active and surface variants that feel cohesive.
Formula and method
The base colour is converted to HSL and its lightness is stepped evenly from about 92% (lightest tint) down to 12% (darkest shade), keeping the hue and saturation constant.
Assumptions and limitations
The generator steps a colour's lightness evenly in HSL from a light tint to a dark shade while holding hue and saturation constant. Because lightness alone changes, very saturated or unusual hues can look slightly off at the extremes; it does not perform perceptually uniform scaling or guarantee equal contrast between adjacent steps.
Worked example
A base of #2563eb produces a ramp from a pale blue tint through to a deep navy shade.
How to use this tool
- Pick a base colour.
- Choose how many shades to generate.
- Copy the hex codes from the swatches.
Common mistakes to avoid
- Picking too few steps, which leaves big jumps between shades.
About the Colour Shades & Tints Generator
Turn one colour into a full scale of tints and shades for your design system. Pick a base colour and the number of steps, then copy the hex codes.
Who should use this tool
UI designers and front-end developers building a design system who need consistent tints and shades of a brand colour for hover, active, surface, and border states. Anyone turning a single base colour into a coherent palette ramp with copyable hex codes will save time over adjusting values by hand.
Benefits
- Turns one base colour into a full tint-to-shade ramp
- Keeps hue and saturation constant across the scale
- Lets you choose how many steps to generate
- Outputs copyable hex codes, generated in your browser
Practical use cases
- Building hover and active variants of a brand colour
- Creating surface and border shades for a component
- Generating a consistent palette ramp for a design system
- Producing lighter and darker versions of one colour
Explore all Developer Tools tools
Frequently asked questions
What format are the outputs?
Each swatch shows a 6-digit hex code. Copy grabs the whole list, one hex per line.
Are these good for a design system?
Yes. An evenly stepped scale gives consistent shades for backgrounds, borders and states.
What format are the generated colour values in?
Each step in the ramp is provided as a hex code in the standard #RRGGBB form, so you can copy it straight into CSS, a design tool, or a variable. Hex is universally supported, making the tints and shades easy to drop into any stylesheet or theme file.
How does the tool create tints and shades from one colour?
It converts your base colour to HSL, then steps the lightness value evenly from around 92% for the lightest tint down to about 12% for the darkest shade. The hue and saturation stay fixed, so every step reads as the same colour at a different brightness level.