Colour shades and gradient generator
Build a tint and shade scale from one colour, or a gradient between two.
How it works
Generates a tint and shade scale from a base colour, or a smooth gradient between two, with CSS output.
Interpolation happens in a perceptually uniform space rather than in RGB, and the difference is visible. Blending between blue and yellow in RGB passes through a muddy grey, because the midpoint of two opposing hues in RGB is desaturated. Interpolating hue directly keeps saturation through the transition.
A tint scale built by simply lightening tends to look washed out at the pale end, because perceived lightness does not track the L value linearly. The scale here adjusts saturation as lightness rises, which is what keeps pale steps looking like the same colour rather than like grey.
Every step reports its contrast against black and white, so you can see at a glance which steps are usable for text.
This tool runs entirely in your browser. Nothing you enter is sent to a server, logged or stored, and the page keeps working with the network disconnected.
Common questions
- Why does my gradient look muddy in the middle?
- Because it is interpolating in RGB, where the midpoint between opposing hues is desaturated. Interpolating hue instead keeps the colour through the transition.
- What is the difference between a tint and a shade?
- A tint is the colour mixed toward white, a shade toward black. A tone is mixed toward grey.
Related pages
- Colour converter Convert a colour between HEX, RGB, HSL and CMYK, with a contrast check against black and white.
- Random colour and palette generator Generate random colours or a harmonious palette, with contrast checked.
- Extract colours from an image Pull the dominant colours out of an image as a palette.
- Percentage calculator Work out a percentage of a number, what percent one number is of another, and percentage change.
- Loan and EMI calculator Monthly payment, total interest and total repaid for any loan amount, rate and term.
- BMI calculator Body mass index from height and weight, in metric or imperial, with what the number does and does not mean.
- Word and character counter Words, characters, sentences, paragraphs and reading time, counted as you type.
- Password generator Generate strong random passwords in your browser, with the entropy shown.
- Typing speed test Measure words per minute and accuracy on a one, two or five minute test.
- Image format converter and compressor Convert between JPEG, PNG and WebP, and compress with a quality slider.
Sources
- Calculated on this page — At One Place