Free tool
Lighten and Darken a Colour, With a 50 to 950 Scale and Contrast
Pick one colour and see it lighter and darker, or turn it into a numbered scale for buttons, backgrounds and text. Every step shows its contrast against white and black. The ratios follow the WCAG rule read from the W3C on 22 October 2026.
Tints, shades and tones
| Step | HEX | RGB | HSL | OKLCH | vs white | vs black |
|---|
Contrast is the WCAG 2.2 ratio, shown rounded down. 4.5 or more passes AA for normal text, 3 or more passes for large text only (shown as Large), and 7 or more is AAA. Click a value to copy it.
Copy the set
Lighter and darker
OKLCH and HSL move the lightness by that many points. Mixing goes that percent of the way to white or black. Colours that would leave the sRGB range lose chroma until they fit. Settings are remembered in this browser.
Everything is worked out in your browser and nothing is sent anywhere. The values you set last time are kept on this device only.
From one brand colour to a whole interface
A brand usually supplies one colour. A real interface needs more than that: a hover state, a pressed state, a soft background for alerts, a darker shade for text on tinted panels. This page turns the one colour into those steps.
Type a colour in any form the browser reads, or choose one of the quick swatches, Violet, Red, Amber, Green, Sky or Slate. Random is there if you only want to see how the tool behaves. The page then offers two blocks of work, a scale at the top and a lighter and darker pair below it.
Tints, shades and tones are different things
| Option | What changes | Typical use |
|---|---|---|
| Tints | The colour is moved towards white | Soft backgrounds, hover fills |
| Shades | The colour is moved towards black | Pressed states, dark text |
| Tints and shades | Both, with your colour in the middle | A balanced scale |
| Tones | The colour is moved towards grey | Muted, quieter versions |
| 50 to 950 | Eleven named steps from very light to very dark | Design tokens and Tailwind style scales |
Each step lists its HEX, RGB, HSL and OKLCH values, and the contrast ratio against white and against black. Click any value to copy it.
Three ways to move a colour
In the Lighter and darker block, the How to move it menu changes the maths.
- OKLCH, looks even. Lightness is changed in a model built to match how the eye sees it, so a step of 10 looks like a similar step on any hue.
- HSL, like Sass lighten(). Matches what older stylesheet tools do. Useful if you need to reproduce a number from an existing project.
- Mix with white and black. Goes that percent of the way to white or to black in sRGB.
You set the amount with the slider or the 5, 10, 20 and 40 percent buttons, and choose how many steps appear on each side, from 3 up to 19. When a lighter colour would fall outside what a screen can show, the tool lowers its strength of colour until it fits.
Using the contrast columns
The WCAG rule at level AA asks for at least 4.5 to 1 for normal text and 3 to 1 for large text. Large text is 18 point or bigger, or 14 point if bold. The tool shows the ratio rounded down, marks 3 or more as Large only, and notes 7 or more as the higher level. The rule is explained in the W3C page Contrast (Minimum), which we read on 22 October 2026 and which shows 6 September 2026 as its update date.
In practice, light steps such as 50 to 300 work as backgrounds under dark text, and dark steps such as 700 to 950 work as text on light backgrounds. The middle steps are where buttons usually live, so check those two columns before you pick a button colour with white text on it.
Button colour also affects how many visitors act. Our conversion optimisation guide covers the other parts of that picture.
Exporting the scale
Under Copy the set, choose a format and a name for the scale, then copy it.
- CSS variables in HEX or in OKLCH.
- A Tailwind v4 theme block or a Tailwind v3 config.
- SCSS variables, JSON, or a plain HEX list.
The name you type becomes the prefix, so a scale called brand gives you brand-50 through brand-950. Copy link produces an address that reopens your colour and settings.
This tool moves one colour around. It does not choose which colours go together, so for a set of different colours use a palette tool first, then build a scale for each.
Frequently asked questions
What is the difference between a tint and a shade?
A tint is a colour mixed with white, so it gets lighter. A shade is a colour mixed with black, so it gets darker. A tone is mixed with grey.
Which method should I pick for lightening?
OKLCH is the best default because equal steps look equal on any hue. Pick HSL only when you need to match a number from Sass or an older project.
How do I make a 50 to 950 colour scale?
Choose the 50 to 950 option, then copy the set as CSS variables, Tailwind or another format. The page names the steps for you.
Why does the contrast column say Large?
It means the ratio is at least 3 but under 4.5, which only passes the AA rule for large text. Use that step for headings, not body copy.
Can I lighten a colour by exactly 20 percent?
Yes. Set the amount to 20 in the Lighter and darker block, or press the 20 button. Steps on each side show what happens at smaller and larger amounts.
Will the tool remember my colour?
It remembers your last settings in this browser. Use Copy link if you want to share them.
More free tools
- Colour palette generator: Generate website colour palettes by harmony, check text contrast, and export CSS, Tailwind, SVG or PNG.
- Color contrast checker: Test colours against WCAG 2.2, fix them, check a palette and share a link.
- HEX to RGB converter: Convert a colour between HEX, RGB, HSL, HWB, OKLCH and CMYK, singly or as a list.
- CSS gradient generator: Build linear, radial and conic CSS gradients with colour stops and copy CSS or a Tailwind class.
- Random colour generator: Roll random colours by mood, lock favourites and copy HEX, RGB, HSL, CSS or a PNG strip.