---
title: "Colour shades and gradient generator — free, runs in your browser"
description: "Build a tint and shade scale from one colour, or a gradient between two. Free, no sign-up, and nothing you enter leaves your browser."
url: https://atoneplace.net/tools/color-shades-generator/
site: "At One Place"
---

# 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](https://atoneplace.net/tools/color-converter/)
- [Random colour and palette generator](https://atoneplace.net/tools/random-color-generator/)
- [Extract colours from an image](https://atoneplace.net/tools/image-color-extractor/)
- [Percentage calculator](https://atoneplace.net/tools/percentage-calculator/)
- [Loan and EMI calculator](https://atoneplace.net/tools/loan-calculator/)
- [BMI calculator](https://atoneplace.net/tools/bmi-calculator/)
- [Word and character counter](https://atoneplace.net/tools/word-counter/)
- [Password generator](https://atoneplace.net/tools/password-generator/)
- [Typing speed test](https://atoneplace.net/tools/typing-speed-test/)
- [Image format converter and compressor](https://atoneplace.net/tools/image-converter/)

## Sources

- Calculated on this page — At One Place (/about/)