Lighten and darken a color, tints, shades, tones.

To lighten a colour, move it towards white. To darken it, move it towards black. This tool does both for any colour you type, by the percent you set, and then builds a whole row of tints, shades and tones so you can pick the step you need for a hover state, a border, a background or a dark mode. Each result shows its HEX, RGB, HSL and OKLCH code and how well black or white text reads on it.

How to use it

1. Type a colour in Colour, such as #7c52ff, rgb(124 82 255) or tomato, or use the picker. The chips fill in a few examples, and Random picks one.
2. Move the Amount slider, or type a number, to set how much lighter and darker the first two cards should be.
3. Choose How to move it: OKLCH, HSL or a mix with white and black. The three give different results, and the notes below explain each.
4. Pick Tints and shades, Tints, Shades, Tones or 50 to 950 to see a row of colours. Steps on each side sets how many.
5. Click a swatch or any value to copy it. Under Copy the set, choose a format, give it a Name and press Copy the code.

The three ways to lighten

Take the violet #7c52ff. In OKLCH it has a lightness of 58.5%, a chroma of 0.241 and a hue of 287.6. Lightening by 20 in OKLCH adds 20 points of lightness and keeps the hue, so you stay on the same violet. In HSL the same colour is hsl(255 100% 66%), and Sass lighten(), which the Sass docs (checked 18 Oct 2026) describe as increasing the HSL lightness by a fixed amount, gives #c9b8ff for 20; darkening by 20 gives #3900eb. Mixing sends it 20% of the way to white, #9675ff, or 20% of the way to black, #6342cc.

HSL is simple but uneven: a yellow and a blue with the same HSL lightness look very different in brightness. OKLCH is built to match how lightness looks, so equal steps look more equal. Mixing is the simplest method: each red, green and blue value moves the same share of the way to white or black. It keeps the hue close, but a strong colour can look greyer in the middle of the row.

Tints, shades and tones

The rows are steps of a mix. With 9 steps on each side, the tints are 10, 20 up to 90 percent of the way to white, the shades are the same towards black, and tones go towards mid grey. A 100% step would just be white, black or grey, so it is left out. The 50 to 950 view uses the numbering many CSS frameworks use: it sets the lightness for each step, lets the chroma rise and fall along the way, and puts your own colour on the step closest to its lightness, which is marked in the table.

Checking contrast

Every row shows the contrast ratio with white and with black. It follows the WCAG 2.2 definition: ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker one, and relative luminance is 0.2126 R + 0.7152 G + 0.0722 B after each channel is converted from sRGB. The ratio runs from 1 to 21. WCAG asks for 4.5 or more for normal text and 3 or more for large text, which means 18 point, or 14 point bold. The stricter AAA level asks for 7 and 4.5. The ratio is shown rounded down, so 4.49 is never shown as 4.5. The formulas are in WCAG 2.2 and its relative luminance definition, checked 18 Oct 2026. For a check between any two colours, use the colour contrast checker.

For the violet above, white text gets 4.65 and black text gets 4.50, so both pass AA for normal text, and neither passes AAA. At 20% lighter with HSL, white text drops to 1.78 and black text rises to 11.78.

Using the export

CSS variables give you --brand-100: #...; lines inside :root. The Tailwind v4 format writes an @theme block, and the v3 format a colors entry for the config file. SCSS, JSON and a plain HEX list are there too. Change Name to match your token, such as primary or accent.

Common problems

• My colour does not change. Pure white cannot be lightened and pure black cannot be darkened. The card says so.
• The colour looks dull when lightened. Try OKLCH. It keeps hue steady, and lowers chroma only where the sRGB range needs it.
• The code is not accepted. Use a 3, 4, 6 or 8 digit hex, an rgb(), hsl() or oklch() value, or a CSS colour name. Transparency is ignored.

To build a full palette from one colour, try the colour palette generator. To convert a code, use hex to RGB, and for a random starting colour, the random colour generator.