Free Tint, Shade & Tone Generator
Every tint, shade and tone of your color (computed the way real paint mixes, or perceptually for screen work) with codes you can copy and palettes you can export. Exports PNG, CSS, ASE and GPL. Free, with no sign-up, and it runs in your browser.
Mixing the ramps with Kubelka-Munk…
Send to…
Open this result in another tool. It stays on your device.
Base color.Pick a color with the swatch or type a hex code; all three ramps rebuild from it at once.
Steps per ramp.Set 3 to 11 swatches per ramp; each runs from your base color to pure white, black or mid gray.
Mixing model.Choose Real paint for Kubelka-Munk pigment mixing or Digital for even steps interpolated in OKLab.
Export all swatches.Download every swatch in 11 palette formats, from ASE and Procreate to CSS, or a labelled PNG chart.
- Free
- No sign-up
- Runs entirely in your browser
What is a tint, shade and tone generator?
A tint, shade and tone generator is a tool that builds three color ramps from one base color: tints mixed toward white, shades toward black and tones toward mid gray. This one mixes the ramps either as real paint with the Kubelka-Munk model or digitally in OKLab, and labels every swatch with its hex code and 1–10 value.
How to use the Tint, Shade & Tone Generator
The tool takes 5 steps, all on your device.
Pick a base color with the swatch or type a hex code.
Choose Real paint to mix like pigment (Kubelka-Munk) or Digital for perceptually even OKLab steps.
Set how many steps each ramp should have: five is the painter's classic string.
Read the three ramps: Tints (color + white), Shades (color + black), Tones (color + gray). Each swatch shows its hex and its value on the 1–10 scale.
Click any swatch to copy its code; export a labelled PNG chart, or download every swatch as ASE, Procreate, GPL, CSS or another palette format.
What the Tint, Shade & Tone Generator does
The Tint, Shade & Tone Generator builds three ramps from one color, mixed like paint or held to the hue, with a value on every swatch.
Ramps mixed like paint
In Real paint mode the Tint, Shade & Tone Generator mixes your color with white, black or gray through the Kubelka-Munk model, so a ramp can drift in hue as paint does: a yellow's shades turn olive. It sits with the color tools for artists on this site that model pigment rather than screen light.
Digital ramps hold the hue
Digital mode interpolates in OKLab, moving lightness and chroma toward the target in equal steps while the base hue angle stays put. Equal OKLab steps look close to equal to the eye, which suits screen palettes and design systems.
A value on every swatch
Every swatch carries a value number from 1 (darkest dark) to 10 (white), converted from OKLab lightness and rounded to the nearest half step. The number lets you match a mix on the palette to a value measured in a reference.
Both ends of each ramp
In Real paint mode each ramp runs from the base to Titanium White, Ivory Black or a neutral gray mixed from them, with steps at equal value intervals, each labelled with its mixing ratio such as 1 : 3. A second row of shades uses Burnt Umber, a chromatic black or the color's own complement.
Palette files for your software
The PNG chart labels every row and every swatch's ratio and value; palette files list every swatch in row order, named by ramp and ratio.
Ramps saved in the address
The base color, step count and mixing model are written into the page address, so a bookmarked link reopens the same three ramps. All mixing runs in your browser, and no color is sent to a server.
For premixing paint strings and building screen palettes
Beginners, working painters, illustrators and art teachers build ramps to premix paint strings or to fill a screen palette.
Beginners
Leave Steps per ramp at 5 and compare the Tints row with the Tones row to see white and gray change the same color differently.
Working painters
Type the hex code of a subject's local color, keep Real paint selected and read the value numbers to plan a premixed string.
Illustrators
Switch the mixing model to Digital and export the ramps as ASE or CSS for an even set of lights and darks.
Art teachers
Project the three ramps of one base color to show a class what separates a tint, a shade and a tone.
Tints, shades and tones are three different things
A tint is a color plus white. A shade is a color plus black. A tone is a color plus gray, and painters live on tones, because almost nothing in nature is a pure hue. In paint the three behave differently: white lightens and lowers chroma, and many colors look cooler as tints; black darkens and dulls at once and can move the hue, as when yellow and black make an olive green; gray lowers chroma while pulling the value toward the middle.
This is also the classic palette-string exercise from atelier training: you premix a string of values for each color on your palette before painting, so mid-painting you are placing notes, not hunting for them. Generate the ramps here, print the PNG, and mix your real strings to match.
Real paint mode vs digital mode
Digital mode interpolates in OKLab, a perceptually uniform space, which is what you want for UI design, print and any medium where you control the final color directly.
Real paint mode builds a reflectance curve from your base color and mixes it with the Kubelka-Munk model: the same approach that makes blue and yellow paint produce green instead of gray. Start from a library paint, or one you calibrated in the paint mixing simulator, to use that paint's tinting strength; a plain color gets the default strength, so it cannot tell a cadmium red from an alizarin that looks the same on screen.
Using the ramps at the easel
A working method: pick the local color of your main subject, generate five-step ramps in paint mode, and mix those strings physically. Your lights come from the tint string, your halftones are the base color and its nearest tones, your shadows come from the shade string, but remember shadows usually shift warmer or cooler, not just darker, so treat the shade ramp as value scaffolding and adjust hue separately.
Check mixes by value: if your subject's lit cheek is value 7 and step 2 of your tint string is value 7, you have the mix already. To read target colors off the reference itself, the color palette extractor lists a photo's dominant colors with their hex codes and values, and any of those hex codes can go straight into Base color here.
Further reading
The page below goes further into the ideas the Tint, Shade & Tone Generator works with, and opens on the site named beside it.
- Handprint: tinting strength and pigment behavior (handprint.com)
Tips from a working artist
From Sujith Puthran, artist and founder: what I actually do at the easel.
Five steps per ramp is a practical atelier string, enough resolution to paint from, few enough to premix before the light changes.
Watch the value gap between your lightest tint and your darkest shade; if your subject only spans three values, mix only the middle of the ramps and stay in that key.
In paint mode, compare ramps for the hex codes of two different reds (say cadmium vs alizarin): the tint strings diverge, which is exactly why painters choose between them.
Print the PNG export on matte paper; glossy shifts the dark values and defeats the purpose.
Questions about the Tint, Shade & Tone Generator
The 7 questions below define tint, shade and tone, compare the two modes and their steps, and end with palette files.
The three ramps
What is the difference between a tint, a shade and a tone?
A tint is the color mixed with white, a shade is the color mixed with black, and a tone is the color mixed with gray. Tones are the most common in painting because natural subjects are rarely pure hues.
What does the v-number on each swatch mean?
The v-number on each swatch means the value on the artist's 1–10 scale, from OKLab perceptual lightness, in half steps. 1 is the darkest dark, 10 is white. Use it to match mixes against the values in your reference.
Why does a shade change hue in Real paint mode?
A shade changes hue in Real paint mode because Kubelka-Munk mixing combines the reflectance curves of the two colors instead of scaling down their RGB values. That is why a yellow's shade ramp drifts toward olive green here, as yellow and black do in paint, while Digital mode keeps the hue.
Modes and steps
How is the paint mode different from a normal color picker?
The paint mode is different from a normal color picker because it mixes with the Kubelka-Munk pigment model instead of RGB math. Ramps then behave more like real paint: blue and yellow make green, and a mix can shift in hue as it lightens or darkens.
Which mode should I use for digital art or design?
Use Digital mode for digital art or design. It interpolates in OKLab, so every step is perceptually even: ideal for design systems, UI palettes and print.
How many steps can each ramp have?
Each ramp can have 3 to 11 steps, and the default is 5. The count includes both ends: the base color and the white, black, darkener or gray it is mixed toward.
Exporting
Can I export these swatches to Photoshop or GIMP?
Yes, you can export these swatches to Photoshop or GIMP: download ASE or ACO for Adobe apps, a .swatches file for Procreate, GPL for GIMP, Inkscape and Krita, CSS for the web, or a labelled PNG chart to print.
Enter your subject's local color, keep Real paint selected and print the three ramps to mix against at the palette.
Free · No sign-up · Runs in your browser