colour tool
Tints and shades generator
Enter one colour and this tints and shades generator lists 10 tints towards white and 10 shades towards black, each with its hex value and the contrast ratio of black and white text on it. Steps are even in perceived lightness, so the scale looks smooth from end to end.
Loading the tool…
- Runs on your device, nothing is uploaded
- Free, no sign in
- No watermark, no file limit
How it works
- 1
Enter your colour
Type a hex value, an rgb() or a CSS name, or open the swatch picker. Both columns rebuild as you type.
- 2
Read the two columns
Tints run lighter on the left, shades darker on the right. Every row shows its hex, its OKLCH lightness and a grade for white and black text.
- 3
Copy one step
Click any row to copy its hex value. The row says Copied for a moment.
- 4
Take the whole scale
Copy the scale as CSS variables or as a list of hex codes, or download it as JSON with each step's lightness.
Tints, shades and tones
A tint is a colour mixed towards white, a shade is mixed towards black, and a tone is mixed towards grey. Painters use the words that way and so do design systems: a brand blue usually needs a near white tint for backgrounds, a mid tint for borders and hover states, and one or two shades for text and pressed buttons. Building them from the brand colour keeps every one of them recognisably the same blue.
Why the hex values are uneven
This generator moves in equal steps of OKLCH lightness, a scale fitted to how bright colours look rather than to the numbers a screen stores. sRGB values are gamma encoded, so equal visual steps need small changes at the dark end and larger ones in the middle. That is why the hex codes look irregular while the swatches look evenly spaced. A simple percentage mix in RGB does the opposite: neat numbers, and a scale whose darkest steps crowd together.
Finding the text step
The badges on each row answer the practical question of which steps can carry text. Body text needs 4.5 to 1, so look for the first shade with an AA badge for white text, and the first tint with an AA badge for black text. Those two are usually the safest pair for buttons and banners in that colour. Large only marks a step that can carry headings of 24 pixels or more, but not paragraphs.
Putting a scale into a document theme
The document builder's theme panel has three tabs, Themes, Colors and Fonts, and lists 10 built in themes. A light tint suits a cover panel or a callout background, and a deep shade suits headings and table header rows. The brand kit in Settings stores a Primary, a Secondary and an Accent colour that documents, slides, flyers, forms and videos can use from a Your brand group in their theme pickers.
Limits worth knowing
The steps are perceptual, so the hex values are not evenly spaced, and that is by design. The ends stop short of pure white and pure black, and chroma fades along the way, as it would in a mix, so the outer steps are nearly neutral. Nothing leaves this page: the scale is arithmetic in your browser, nothing is uploaded and nothing is stored, ever. The colour is kept in the address bar, so a link reopens the same scale.
Limits
- Steps are perceptual, equal in OKLCH lightness, so the hex values are not evenly spaced.
- The lightest tint stops at 98.5% lightness and the darkest shade at 14%, so neither end is pure white or pure black.
- Hue is held and chroma fades step by step, as it does when paint is mixed with white or black, so the outer steps are close to neutral.
What it does not do
- It does not mix your colour with a second colour. The colour mixer does that.
- It does not name the steps 50 to 950 the way some design systems do; they are numbered 1 to 10 from your colour outwards.
- It does not check one step against another, only black and white text on each.
Questions people ask
What is the difference between a tint and a tone?
A tint mixes a colour with white, so it gets lighter while keeping its hue. A tone mixes it with grey, so it gets duller without necessarily getting lighter or darker. This tool makes tints and shades only. For a tone, take a step from here and reduce its chroma in the colour converter.
Why not just lower the opacity to get a tint?
Opacity makes a colour show whatever is behind it, so the same 20% blue looks different on white, on grey and over a photo, and text contrast becomes impossible to predict. A solid tint is the same colour everywhere. Opacity is also counted in contrast calculations only after the colour is flattened onto its background.
How do I build a 50 to 900 scale like Tailwind?
Treat your base colour as 500, then take tints 2, 4, 6, 8 and 9 as 400, 300, 200, 100 and 50, and shades 2, 4, 6 and 8 as 600 to 900. Check the result by eye: well known design system scales are hand tuned, so a mathematical scale is a starting point rather than a finished one.
Can I use these steps for a dark mode theme?
Yes. Dark themes usually use a deep shade for the background, a slightly lighter shade for raised surfaces, and a light tint for text. Check the text step against the background step in the contrast checker, because the badges here grade only black and white text, and a pale tint on a deep shade is a different pair.
Why does my yellow get darker shades that look brown?
Dark yellows are browns and olives; there is no such thing as a dark, saturated yellow on a screen, because yellow is bright by nature. Holding the hue while lowering lightness therefore lands on mustard and olive. If the browns do not suit the brand, use a neutral dark grey for text instead of a yellow shade.
Use this scale in a document theme
Take what you made here into documents.
Create a document with OneCraftMore tools like this
- Colour palette generatorColour palette generator: pick one seed colour and get monochrome, analogous, triadic and split palettes with hex, RGB, HSL and a WCAG text check.
- Colour contrast matrixColour contrast matrix: paste 2 to 12 colours and see every pair's WCAG ratio with AA and AAA marks, and which pairs are safe for body text.
- Colour mixer onlineColour mixer online: mix two colours at any ratio and see the result as an RGB average, an OKLCH paint-like mix and a CMYK approximation, with hex codes.
- Colour converterPick a colour on a live OKLCH plane and read it in nine notations at once, with the sRGB gamut boundary drawn and the contrast on white and black shown.
- Contrast checkerSet a text colour and a background and read the WCAG ratio on a live specimen, with a pass or fail attached to every size from 30px down to 13px.
Background reading: the question page on this.
Written and checked by the OneCraft team. Last checked .