UtilibyWritten by the Utiliby editorial team · Last updated October 15, 2026 · Rules and formulas reviewed October 2026
What this free online tints and shades generator does
Almost every colour system in design is built from one base colour and its lighter and darker versions. A button needs a pressed state that is a little darker, a card needs a pale background that is clearly related to the brand, and an illustration needs a range of values to give it depth. This free online tints and shades generator creates all of them from a single colour: tints (mixed with white), shades (mixed with black) and tones (mixed with grey), each with a HEX code you can copy with one click.
It goes further than most shade generators. You can choose from five calculation methods, build a complete 50 to 950 UI scale in the style of Tailwind CSS with white and black text contrast on every step, see a lightness profile that shows whether your steps are evenly spaced, preview the scale on a real interface in light and dark mode, and export it as CSS, SCSS, Tailwind, JSON or SVG.
How to make tints and shades of a colour
- Enter your colour. Use the colour box, type a HEX code or paste any colour code, or press Random colour for inspiration.
- Choose the number of steps. Ten steps per side gives 10 percent increments, as in many classic tools.
- Choose a method. Classic is the standard. OKLCH gives even, vivid steps.
- Copy colours. Click any swatch to copy its HEX code.
- Build a UI scale. Open the UI scale tab for steps 50 to 950 and read the contrast table.
- Export. Name the colour and download CSS, SCSS, Tailwind or JSON.
Tints, shades and tones: the difference
| Term | What you add | Effect | Typical use |
|---|---|---|---|
| Tint | White | Lighter, softer, paler | Backgrounds, hover states, pastels |
| Shade | Black | Darker, deeper, heavier | Text, pressed buttons, shadows |
| Tone | Grey | Duller, calmer, more subtle | Muted palettes, vintage looks, neutrals |
Many people use “shade” for any variation of a colour, and the casual meaning is fine in everyday speech. Colour theory keeps the three terms apart because they behave differently. A tint keeps the hue but loses vividness as it approaches white. A shade can drift in perceived hue as it darkens. A tone is the way to calm a colour down without changing how light or dark it is.
Five ways to calculate tints and shades
| Method | How it works | Character |
|---|---|---|
| Classic (sRGB) | Straight mix of the red, green and blue values with white, black or grey | What most online tools do. Predictable, can look slightly dull when dark. |
| Perceptual (OKLab) | Mixes in a space built around human vision | Smooth, natural gradations. |
| Linear light | Mixes physical light intensity | Physically correct, but midpoints look bright. |
| HSL lightness | Raises or lowers the L value, or lowers S for tones | Simple and familiar to CSS users, uneven for yellow and blue. |
| OKLCH lightness | Moves lightness and chroma in OKLCH and keeps the hue | Even steps and the least muddy shades. |
Try several methods on the same colour and watch the lightness profile. A good set of steps follows a smooth line. If dots bunch together or leap apart, the steps are uneven. You can also compare how colours blend with the Color Mixer, which uses the same colour spaces.
The 50 to 950 UI colour scale
Modern design systems describe each hue with eleven steps: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950. Low numbers are light and high numbers are dark. A typical use is 50 for page tints and alert backgrounds, 100 and 200 for badges and borders, 500 or 600 for buttons and links, 700 for hover states, and 800 to 950 for text and dark mode surfaces. This tool builds the scale in OKLCH. The hue is kept, lightness is spread evenly across the steps, and chroma is eased towards the ends so that the lightest steps look like soft tints rather than neon pastels. Your colour is placed on the step with the closest lightness, or on the one you choose.
The table lists the contrast of white and black text on each step. As a rule of thumb, the darkest steps take white text and the lightest take black text, while the middle steps, around 500 and 600, depend on the hue and need checking. Yellow, for example, is light even at step 500. Always confirm real pairs with the Color Contrast Checker.
How designers use tints, shades and tones
- Buttons and states. Use the base for the default, a shade for hover and pressed and a tint for disabled.
- Backgrounds. Use the lightest tints for cards, banners and table stripes so they stay clearly related to the brand colour.
- Dark mode. Swap light and dark steps. Use 950 for the page and 900 for cards.
- Charts and data. A set of tints or shades gives a clean sequential scale for heat maps.
- Illustration and art. Use tints for highlights and shades for shadows to give objects form.
- Branding. Create a compact system from one logo colour.
Combine your scale with harmonies from the Color Wheel, or generate a full multi-hue palette with the Color Palette Generator. To turn two steps into a smooth background, use the CSS Gradient Generator.
For developers: CSS, SCSS and Tailwind
The Export tab writes the scale in the formats developers use most. CSS variables give you custom properties such as --brand-500 that you can use anywhere. SCSS gives $brand-500 variables. Tailwind config writes a colors block with numeric keys, so classes such as bg-brand-600 and text-brand-50 work immediately. JSON suits design tokens and other tools, and SVG swatches are handy for documentation. You can also export just the tints, shades, tones or all three together.
If your source colour comes in another format, convert it first with the HEX to RGB Converter, or pick it from a screen with the Color Picker.
Accessibility and contrast
A scale does not guarantee readable text. WCAG asks for a contrast ratio of at least 4.5 to 1 between normal text and its background, and 3 to 1 for large text and interface parts such as borders of inputs. The table in the UI scale tab shows the ratio for white and for black text on every step and marks the steps that pass. Do not rely on colour alone to show state, because some people cannot tell similar hues apart. Test with the Color Blind Test and keep a second cue, such as an icon or underline.
Tips for better tints and shades
- Choose a base with moderate lightness. Very light or very dark bases leave less room for the other side.
- Use the OKLCH method if dark shades look muddy.
- Keep the same hue across steps and shift hue slightly by hand for a richer look.
- Use tones for backgrounds and keep the vivid steps for small accents.
- Name steps with numbers instead of words such as light or dark. Numbers scale better.
- Check one light and one dark step against your text colour before you commit.
- Give your colour a name with the Color Name Identifier.
Accuracy, limits and responsible use
The generator uses standard colour maths in the sRGB space. All results are rounded to whole numbers for HEX and are adjusted into the displayable range, so very vivid colours may lose a little chroma at the lightest and darkest ends. The 50 to 950 scale is created by a formula and is not an official palette of Tailwind, Material or any other system. Screens and printers show colours differently, so check important colours on the real device. This free online tints and shades generator is a quick, reliable aid for design work.
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is a colour mixed with white, so it is lighter. A shade is a colour mixed with black, so it is darker. A tone is a colour mixed with grey, so it is duller and less vivid.
How do I make a colour lighter?
Mix it with white. Enter the colour in the generator and pick a tint from the first row. A bigger percentage means a lighter tint.
How do I make a colour darker?
Mix it with black. Pick a shade from the second row. For a deeper colour that keeps its character, try the OKLCH method.
How do I get shades of a HEX code?
Paste the HEX code into the base colour box. The generator lists tints, shades and tones with their own HEX codes, and each one can be copied with a click.
What does the percentage on each swatch mean?
It is how much of the target colour is mixed in. A 30 percent tint is 70 percent your colour and 30 percent white.
What is a 50 to 950 colour scale?
It is a set of eleven steps from very light (50) to very dark (950) used by design systems such as Tailwind CSS. It gives you backgrounds, borders, buttons and text colours from one hue.
How do I create Tailwind shades from one colour?
Open the UI scale tab, enter your colour, then use the Export tab and choose Tailwind config. Paste the result into your tailwind.config.js.
Which method should I use?
Classic mixes with white or black in sRGB, as most tools do. OKLab and OKLCH make more even, natural steps. HSL lightness is quick and familiar, and linear light is physically correct but looks bright.
Why do my shades look dull or muddy?
Mixing with black reduces vividness. Try the OKLCH method, which keeps the hue, or raise the vividness slider on the UI scale tab.
Which step of the scale is my colour?
The tool puts your colour on the step with the closest lightness, such as 500 or 600. You can choose a different step in the Your colour is step menu.
Are the text colours accessible?
The table shows the contrast ratio of white and black text on each step. Aim for 4.5 to 1 or more for normal text. Check final pairs with a contrast checker.
What is the difference between tints and shades and a monochromatic palette?
A monochromatic palette is made of one hue in several lightness levels. Tints, shades and tones are how you build it.
Can I use these colours in CSS or Sass?
Yes. Export CSS variables, SCSS variables, a Tailwind config, JSON, a plain HEX list or SVG swatches from the Export tab.
Can I see the scale on a real page?
Yes. The Live preview tab shows buttons, a badge, a progress bar and an alert, in light and dark mode, using steps of your scale.
Can I print the colours?
Yes. Print / save shades creates a one-page sheet with the tints, shades, tones and the scale. Only that sheet is printed, not the whole page.
Does it work with transparent colours?
The generator works with opaque colours. If you enter a colour with alpha, the alpha is ignored. Use the Color Picker for transparency.
Is this tints and shades generator free?
Yes. It is a free online generator with no sign-up, and your colours never leave your browser.
Sources and further reading
- Wikipedia, Tint, shade and tone.
- Björn Ottosson, A perceptual color space for image processing.
- W3C, CSS Color Module Level 4.
- W3C, WCAG 2.1, Success Criterion 1.4.3 Contrast (Minimum).
- Tailwind CSS, Customizing colors.
- Wikipedia, Monochromatic color.
Sources were consulted in October 2026. Standards and rules can change, so always check the official page for your situation.