How to Generate Tints and Shades From One Color

To generate tints and shades from one color, enter a base HEX value and a generator produces two ten-step strips: tints that mix your color toward white and shades that mix it toward black, each swatch labelled with a copyable HEX code. The result is a complete tonal scale you can pull from for hover states, borders, backgrounds and dark-mode variants. Here is how to do it with the ByteTools Tints and Shades Generator, which runs entirely in your browser.

What tints and shades are

A tint is your color blended with white, making it lighter and softer. A shade is your color blended with black, making it darker and deeper. Start from a single brand color and you can derive an entire family of related tones — the lighter ones for surfaces and subtle fills, the darker ones for text, pressed buttons and borders. This generator builds both directions at once so you never have to eyeball a lighter or darker version by hand.

Step-by-step

1. Set your base color. Use the color picker or type a HEX code such as #3B82F6. Your base sits in the middle of the scale.
2. Read the tints strip. Ten steps run lighter, each moving a fixed percentage of the way toward pure white (#FFFFFF).
3. Read the shades strip. Ten steps run darker, each moving toward pure black (#000000).
4. Copy what you need. Click any swatch to copy its HEX to your clipboard, ready to paste into CSS, a design tool or a variables file.

How the steps are calculated

The math is straightforward and predictable. Each tint step interpolates between your base color and white in RGB space; each shade step interpolates toward black. Because the steps are evenly spaced, a 10% shade is barely darker than the base while a 90% shade is nearly black — and every step in between is a consistent increment. That even spacing is what makes the strips feel like a proper ramp rather than a random scatter of lighter and darker guesses.

Step	Direction	Typical role
Light tints	Toward white	Page and card backgrounds, subtle fills
Mid tints	Slightly toward white	Hover states, disabled elements
Base	Your color	Primary brand / accent
Mid shades	Slightly toward black	Borders, pressed states
Dark shades	Toward black	Body text, dark-mode surfaces

Privacy and offline use

Every calculation happens locally in your browser. No color is uploaded, no account is required, and once the page has loaded the generator keeps working with no connection — useful on a plane or behind a locked-down corporate network.

Try the Tints and Shades Generator — free and 100% in your browser.

FAQ

What HEX format should I enter?

A standard six-digit HEX code like #1E90FF works. The picker fills this in for you if you would rather choose visually, and the generated tints and shades are returned in the same HEX format for easy pasting.

Where does my base color appear in the scale?

Your base sits in the middle, with tints extending lighter on one side and shades extending darker on the other. That layout makes it easy to read your original color as the anchor and pick relative steps around it.

How do I turn these into CSS variables?

Copy each swatch you want and assign it to a custom property, for example --surface, --border or --text. Because the steps are consistent, you can name them by role once and reuse the same scale across a whole interface.

Can I use this offline?

Yes. After the page loads once, the tool runs fully client-side, so you can generate scales without an internet connection.

Related free tools

• Color Mixer — blend two colors by any ratio.
• Monochromatic Color Generator — variations of a single hue.
• Color Palette Generator — build a full palette from scratch.
• HEX to HSL Converter — switch between HEX and HSL values.

Built by ByteVancer

ByteTools is a free product of ByteVancer, a software and web development studio building web apps, SaaS and custom software — including design systems and internal tooling. Explore how ByteVancer can help build your next product.