Color shades generator
Tints, tones and shades of any colour, and a 50–950 UI scale, with the contrast of every step on white and on black.
Paste a list
The 50–950 scale is always built in OKLCH: a colour space made so that equal steps in its lightness number look like equal steps of brightness to the eye, which plain sRGB mixing does not do.
AA large 3:1, AA 4.5:1, AAA 7:1 are the WCAG 2 text levels (large = 24 px, or 18.67 px bold). ◇ clipped: the step is outside what an sRGB screen can show, so its chroma was lowered at the same lightness and hue until it fits. Tap any value to copy it.
Export the 50–950 scale
Privacy: your colours stay in this page. Every step is worked out by your browser and nothing is saved. A share link holds only the colours, after the # in the address, which browsers do not send to the server. The page sends an anonymous page-view count and two fixed event names (open, copy), never a colour.
How to make a colour scale
- Enter your colour. Type a HEX code (
#3b82f6or#38f),rgb(59, 130, 246)orhsl(217, 91%, 60%), or open the colour picker on the left of the box. Anything else is refused, with a note. - Add more if you need them. + Add a colour or Paste a list makes up to six scales side by side, one per brand or status colour. The name box sets the export name (
--blue-500). - Choose what to see. 50–950 for a design-system scale, or tints, tones or shades in 5 to 20 steps, mixed in sRGB or OKLCH.
- Read the contrast. Each step shows its ratio on white and on black and the levels it passes. Use a step with AA for body text, AA large only for big headings or icons.
- Copy or export. Tap a value to copy it, or copy the whole set as CSS variables, SCSS, JSON or a 50–950 config block. Copy share link sends the colours to someone else.
What it cannot do
- A scale is arithmetic, not taste. Every step comes from a formula. Design-system scales you admire were hand-tuned step by step (warmer darks, a brighter 400), and a formula will not do that for you.
- It does not choose a brand palette. It makes steps of the colours you give it; it does not suggest which colours go together.
- Contrast is the WCAG 2 ratio, not APCA. WCAG 2 is the ratio accessibility rules point to today. The newer APCA method, drafted for WCAG 3, can rate the same pair differently, most of all for dark pairs and for light text on mid-tones; this page computes WCAG 2 only.
- Printed colours differ from the screen. These are sRGB screen colours; a printer's CMYK inks cannot reach the most saturated ones and paper changes the rest, so proof a print before trusting it.
- Only sRGB. Wide-gamut Display P3 colours are not offered; steps outside sRGB are clipped and marked.
sRGB or OKLCH mixing
sRGB mixing moves each red, green and blue number a fixed share of the way to white, grey or black. It is what most simple generators do, and it is exact: 30 % of the way from #3b82f6 to white is #76a8f9, channel by channel. But equal sRGB steps do not look equal; the dark steps bunch up and saturated colours can drift in hue. OKLCH mixing moves lightness and chroma in a straight line at a fixed hue, so a blue stays blue and the steps look more even, at the cost of sometimes landing outside sRGB (those steps are clipped and marked).
How the 50–950 scale is built
The eleven steps have fixed OKLCH lightness targets: 0.97, 0.93, 0.87, 0.79, 0.71, 0.63, 0.55, 0.47, 0.39, 0.31 and 0.23 for 50 to 950. Your colour is kept unchanged at the step whose target is nearest its own lightness: #3b82f6 has lightness 0.623 and lands on 500; a pale #bfdbfe lands on 200. The other steps keep your hue; chroma fades toward white on the light side and keeps at least 40 % of yours on the dark side.
| Grey on white | Ratio | Passes |
|---|---|---|
#777777 | 4.48:1 | AA large only: 0.02 short of AA |
#767676 | 4.54:1 | AA and AA large |
#595959 | 7.00:1 | AAA, AA and AA large |
Questions
How do I make shades of a colour from a hex code?
Type or paste the hex code, such as #3b82f6, into the colour box (the # is optional and 3-digit codes like #38f work too). Shades appear at once. Pick Shades to see it mixed toward black in 5 to 20 steps; step 30 means 30 % of the way to black. Tap any HEX, RGB or HSL value to copy it.
Is there an online tint and shade generator that shows contrast?
Yes, this one. Every step shows its WCAG 2 contrast ratio on white and on black and the AA large (3:1), AA (4.5:1) and AAA (7:1) levels it passes, so you can see which tints can carry white text and which shades can sit under black text. It runs in your browser; the colours are not sent anywhere.
How do I make a UI colour scale from 50 to 950?
Choose 50–950. Your colour is kept exactly at the step whose OKLCH lightness is nearest its own (a mid blue such as #3b82f6 lands on 500), and the other ten steps take fixed lightness targets from 0.97 at 50 down to 0.23 at 950 at the same hue. Export it as CSS variables, SCSS, JSON or the nested 50–950 config object that utility-first CSS frameworks read.
What is the difference between a tint, a tone and a shade?
A tint is a colour mixed with white, so it gets lighter and paler. A shade is mixed with black, so it gets darker. A tone is mixed with grey, so it loses saturation while staying close to its own lightness. This page makes all three from the same input and the same number of steps.