Tint and Shade Generator – Free Tints, Shades and Tones of Any Color

Our free tint and shade generator turns any color into a full scale of tints, shades, and tones in 5 to 20 steps. Enter a HEX, RGB, or HSL code or a color name, or pick a color from a photo, and see every step with its HEX code, its nearest color name, and its contrast against white and black text. Painters get tips on mixing each scale with real paint, and designers can copy the result as CSS variables or a Tailwind 50–950 scale. Everything runs in your browser.

How to Use the Tint and Shade Generator

You get a complete color scale in a few seconds:

1. Choose your color. Type a HEX code (#007BA7 or the short form #07A), an RGB value such as rgb(0, 123, 167) or just 0, 123, 167, an HSL value such as hsl(196, 100%, 33%), or a color name like teal or burnt sienna, then click “Apply”. You can also use the color picker, “Pick from screen” (in browsers that support it), “Pick from image”, or “Random”.
2. Set the number of steps. The slider sets 5 to 20 steps per scale. The first step is always your base color.
3. Choose how the colors are mixed. OKLab gives the most even steps, CIELAB is the classic alternative, and RGB matches most simple online generators.
4. Browse the scales. The overview shows all three scales at once. The tabs below show every step of the tints, shades, tones, or the Tailwind 50–950 scale with its code, name, and contrast.
5. Copy, download, or share. Click any swatch to copy its HEX code, copy a whole scale as code, download a PNG swatch sheet, print it, or copy a link that opens the tool with your color and settings.

Tints, Shades, and Tones: What Is the Difference?

All three terms describe what happens when you mix a color with a neutral. The hue stays the same, but the value (lightness) and the intensity change. Together they form a monochromatic color scheme, a palette built from one hue.

Tints

A tint is a color mixed with white. Tints are lighter and softer than the original, and the more white you add, the closer the color gets to a pastel. Pink is a tint of red, and baby blue is a tint of blue.

Shades

A shade is a color mixed with black. Shades are darker and deeper, like navy as a shade of blue or maroon as a shade of red. In everyday speech, “shade” means any variation of a color, but in color theory a shade is always darker.

Tones

A tone is a color mixed with gray. Tones are less intense than the original and can be lighter or darker, depending on the gray. Many painters also make tones by adding a little of the complementary color, which mutes a color in a similar way.

What Each Setting Does

• Steps per scale: 5 to 20. With 10 steps, the scales run from 0% to 90% white, black, or gray in steps of 10%. With 20 steps, they move in steps of 5%. The last step is never pure white, black, or gray, so every step still carries some of your color.
• Mix in: sets the color space in which your color is mixed with white, black, or gray. More about OKLab, CIELAB, and RGB below.
• Gray for tones: “Middle gray #808080” is a neutral gray halfway between black and white in RGB. “Gray of the same value” uses a gray with the same luminance as your color, so the tones mostly lose intensity while their lightness changes very little.
• Contrast: each step shows “Aa” in white and in black on the color, with the contrast ratio and its WCAG grade: AAA from 7:1, AA from 4.5:1, AA large (only for large text) from 3:1, and Fail below that.
• Color names: every step shows the nearest name from a list of more than 2,300 color names. If the name is not an exact match, the base color says “nearest name”.
• Use as base: makes any step the new base color, so you can build a scale from a tint or a shade you like.
• Copy formats: CSS variables, HEX codes, Tailwind v4 (@theme), Tailwind v3 (config), and JSON. The name field sets the variable name, and by default it uses the color name.
• Download PNG and Print: both create a swatch sheet with all three scales and the Tailwind scale, each step labeled with its HEX code.

How the Tool Works

Each step mixes your color with white, black, or gray: with 10 steps, the second step is 90% color and 10% neutral, the third 80% and 20%, and so on. The mixing option sets the color space for this calculation.

• OKLab is a perceptual color space published by Björn Ottosson in 2020. Its lightness follows how bright colors look to the eye, so the steps look evenly spaced, and blues keep their hue instead of drifting toward purple. This is the default. The results match the CSS function color-mix() in oklab.
• CIELAB (CIE L*a*b*), defined by the International Commission on Illumination in 1976, is the classic perceptual color space. It also gives even steps, but strongly saturated blues can lean slightly toward purple.
• RGB mixes the red, green, and blue values of the HEX code directly. This is what most simple tint and shade generators do. The tints often bunch up near white, and the shades get dark quickly.

The Tailwind 50–950 scale works differently. It has 11 steps whose lightness is modeled on Tailwind’s default color palette. Your color sits at the step closest to its own lightness, the lighter steps are mixed with white and the darker steps with black in OKLab until they reach the lightness of their step.

The contrast ratio uses the relative luminance formula of the Web Content Accessibility Guidelines (WCAG). All colors are rounded to whole RGB values, and colors that fall outside the sRGB range of screens are clipped to it.

How to Mix Tints, Shades, and Tones With Paint

The percentages in the tool describe a mix on screen, not the amount of paint. Pigments differ a lot in tinting strength: a tiny amount of phthalo blue colors a large pile of white, while a weak earth color needs much more. Use the swatches as a target and mix by eye. Below the scales, the tool gives advice for the color family of your color. Our guide to mixing colors covers the basics.

Mixing Tints

Use titanium white, the most opaque white, for strong, clean tints. Put the white on your palette first and add the color to it a little at a time. White makes most colors cooler and a little chalky, so a warm red can turn into a cool pink. Zinc white is more transparent and tints more gently.

Mixing Shades

Black darkens quickly and can dull a color or even change its hue: yellow mixed with black turns olive green. Many artists darken a color with a darker paint of a similar hue or with its complement instead, for example ultramarine blue with a little burnt umber for a deep blue, or alizarin crimson for a deep red. Ultramarine blue and burnt umber also mix into a rich dark that many painters use instead of tube black, and Payne’s gray is another favorite for darkening blues.

Mixing Tones

Mix a gray from titanium white and black, or from ultramarine blue, burnt umber, and white, and match its value to the step you want. Adding this gray to your color makes it calmer without changing its value much. Our guide on what colors make gray shows more ways to mix neutral grays.

Tips for Best Results

• Plan a value scale. Set the steps to 10 and print the shades or tones as a value chart to check your paint mixes against.
• Use the same-value gray for muted palettes. It keeps the lightness of your color, which makes it easy to build calm, harmonious color schemes.
• Check text colors early. The contrast chips show at a glance which steps work as a background for white or black text.
• Find your starting color in a photo. “Pick from image” takes the average of a small 5 × 5 pixel area, so noise and single pixels do not throw it off. For more options, our image color picker shows a magnifier and a full palette.

Who Uses a Tint and Shade Generator?

• Painters plan a monochrome study or a value scale and look up which paints darken a color without killing it. Beginners will find more help in our guide to acrylic painting for beginners.
• Illustrators and designers build lighter and darker variants of a brand color, hover states, and backgrounds, and copy them straight into CSS or Tailwind.
• Art teachers and students show the difference between tints, shades, and tones on any color.
• Anyone choosing paint or fabric sees a color lighter, darker, or more muted. To combine hues, try our color wheel or the color mixer.

Your Colors Stay Private

The tool runs entirely in your browser. Images you pick colors from are opened on your device and never uploaded, and nothing you enter is stored on a server. There is no sign-up, no watermark on the PNG, and no limit on how many scales you create.

More Free Art Tools

All our tools are free, run in your browser, and need no account. See them all on the free art tools page.

• Image color picker: find the exact colors in any photo or painting.
• Color name finder: get the name of any HEX, RGB, or photo color.
• Color wheel: find complementary, triadic, and analogous colors.
• Color mixer: mix paint or screen colors and find paint recipes.
• Color palette generator: create matching color schemes or a palette from an image.
• Color blindness simulator: see images and palettes as color blind people do.
• Photo to sketch: turn a photo into a pencil sketch or line art.
• Photo to coloring page: turn any picture into a printable coloring page.
• Image to pixel art: convert an image into editable pixel art.
• Notan generator: plan light and dark shapes with a two- or three-value study.
• Art grid tool: put a drawing grid over any photo.
• Golden ratio overlay: check your composition with a golden spiral and rule of thirds.
• Perspective grid generator: print one-, two-, and three-point perspective grids.
• Paint by number generator: turn a photo into a printable paint by number template.
• Mandala maker: draw symmetrical mandalas and print them as coloring pages.
• Connect the dots maker: turn a picture into a printable dot to dot worksheet.
• Picture frame and mat size calculator: work out mat openings and frame sizes for your art.
• Art pricing calculator: find a fair price for your paintings and prints.
• Art quiz: guess famous paintings, artists, and styles.
• Art prompt generator: get random ideas for drawing and painting.
• Random character generator: create an original character with traits and a palette.

Frequently Asked Questions

What Is the Difference Between a Tint, a Shade, and a Tone?

A tint is a color mixed with white, a shade is a color mixed with black, and a tone is a color mixed with gray. Tints are lighter, shades are darker, and tones are less intense than the original color.

How Do You Make a Tint of a Color?

Add white to the color. In painting, start with titanium white and mix in small amounts of your color until you reach the lightness you want. On screen, the tool above mixes your color with white in even steps.

How Do You Make a Shade of a Color Without Black?

Darken it with a darker paint of a similar hue or a little of its complementary color. Ultramarine blue with a touch of burnt umber gives a deep blue, and alizarin crimson darkens red. This keeps the color richer than black, which can dull it or shift its hue.

Why Do Tints Look Different in OKLab and RGB?

RGB values do not match how bright colors look, so equal steps in RGB do not look equal. OKLab is built to follow human perception, so its steps look evenly spaced and the hue stays more stable.

Does Adding White Make a Color Cooler?

Often, yes. White makes many colors cooler and a little chalky, which is why red turns into a cool pink. A tiny touch of a warm color brings some warmth back.

Can I Use the Colors in Tailwind CSS?

Yes. The “Tailwind 50–950” tab creates an 11-step scale from your color, and the copy formats give it as a Tailwind v4 @theme block or a Tailwind v3 config object.

Is the Tint and Shade Generator Free?

Yes. The tool is completely free, needs no account, and adds no watermark to your downloads.