Use the free Shade Tint Scale Builder below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
Shades and Tints Are Not the Same Thing
A shade is your colour mixed with black. A tint is your colour mixed with white. That simple difference changes everything about how a palette feels. Shades get darker, heavier, and more serious. Tints get lighter, softer, and calmer. The tool above builds both at once from one base colour, so you can see the full journey from near-black to near-white in a single scale. Click any swatch to copy its hex code, and use it in your design, your slides, or your website.
Most people pick colours one at a time, and that is why their designs look random. A colour chosen alone may clash with the next one, even when both look fine on their own. A scale fixes that problem at the source. Every colour in a shade and tint scale comes from the same base, so they belong together by construction. When your buttons, backgrounds, and text all come from one scale, the whole page looks planned, even if you are not a designer.
How to Use the Scale Builder
Start by picking your base colour with the colour picker. This is usually your brand colour, or simply a colour you like. Then choose how many steps you want: five steps give a quick, bold scale, while nine steps give fine control for detailed work. The tool shows two rows. The first row walks from your base colour toward black. The second row walks from your base colour toward white. The middle of each row is close to your base, and the ends are the darkest shade and the lightest tint.
Click a swatch to copy its hex code. A small tick confirms the copy. Paste the code into your design tool, your stylesheet, or your document. If you change the base colour, the whole scale rebuilds at once, so you can try ten brand colours in a minute and compare the scales side by side. That speed matters, because colour decisions are easier when you can see options instead of imagining them.
Where Each Part of the Scale Belongs
The darkest shades are for text and strong accents. Dark text on a light background is the easiest thing to read, and a very dark shade of your brand colour reads almost like black while keeping a hint of your brand. The middle shades suit buttons, borders, and headings. They are bold enough to stand out but not so dark that they dominate the page. The lightest tints suit backgrounds, cards, and section fills. A pale tint gives a page colour without shouting, and text on it stays readable if you pair it with a dark shade.
A practical rule helps: use the lightest tint for the page background, a mid shade for buttons and links, and the darkest shade for headings and body text. That three-level pattern works for websites, slides, posters, and documents. It gives contrast where it matters, for reading, and softness where it matters, for backgrounds. If a combination looks weak, move one step darker for the text or one step lighter for the background. Small steps fix most contrast problems.
Mistakes That Make Palettes Look Wrong
The most common mistake is using too many unrelated colours. A page with six different hues looks busy, even when each colour is pretty. One scale, used well, beats six random colours. Another mistake is picking tints that are too pale for text. A light tint with white text is nearly invisible, and a light tint with grey text strains the eyes. Always test your text colour against your background colour at real size, not just as two swatches side by side.
Another trap is forgetting that screens and printers differ. A tint that looks soft on a bright screen can look washed out in print. If you print, test one page first. Finally, remember that shades keep the hue of the base colour. A blue base gives blue-grey dark shades, not neutral grey. If you want true grey, start from a grey base. That honesty about hue is what makes a scale feel coherent rather than muddy.
Frequently Asked Questions
What is the difference between a shade, a tint, and a tone? A shade mixes a colour with black, a tint mixes it with white, and a tone mixes it with grey. This tool builds shades and tints, which cover most everyday design needs.
How many steps should I use? Five steps are enough for a simple page or slide deck. Nine steps suit a full design system, where you need subtle differences between cards, borders, and hover states.
Can I use the hex codes anywhere? Yes. Hex codes work in design tools, website stylesheets, slide software, and document editors. They are the standard way to name an exact colour.
Pick a base colour above, build your scale, and copy the shades and tints you need. One good scale is the fastest way to make a design look deliberate.
Related tools
- Constructor de Escalas de Sombras y Tintes (Spanish version)
- Abstract Wallpaper Maker
- Pixel Art Drawing Pad
Pingback: Constructor de Escalas de Sombras y Tintes - Escalas Completas de Claro a Oscuro