What is the difference between a tint and a shade?

A tint is created by mixing a color with white, making it lighter. A shade is created by mixing a color with black, making it darker. This generator produces both: tints above your base color and shades below it.

How many steps can I generate?

You can choose 5, 10, or 20 steps on each side. For example, 10 steps produces 10 tints and 10 shades plus your base color, giving 21 swatches in total.

How are tints and shades calculated?

Tints linearly interpolate between the base color and white (255, 255, 255) in RGB space. Shades interpolate between the base color and black (0, 0, 0). For N steps, each value uses a factor of i/(N+1) for i from 1 to N.

Is my color data sent to a server?

All calculations run locally in your browser using JavaScript. No data is sent to our servers.

Tints and shades generator

Tints and shades generator is a color tool that derives lighter tints and darker shades from any base color. It supports 5, 10, or 20 steps per side, outputs HEX, RGB, or HSL, and copies any swatch with a single click. The tool runs in your browser.

base

Click any swatch to copy. 21 colors (10 tints + base + 10 shades).

OPTIONS

Steps

Copy format

Dedicated pages

Color-specific tint and shade generators.

Tints and shades generator

Generate tints and shades from any base color. 21 swatches from white to black. Click any swatch to copy the hex code. Free, in-browser.

Color shades generator

Generate darker shades of any color. See 10 shades from your base color to near-black. Click to copy hex codes. Free, in-browser.

Hex color tints generator

Generate lighter tints of any hex color. See 10 tints from your base color to near-white. Click to copy hex codes. Free, in-browser.

How to generate tints and shades

Pick your base color using the color picker or type a hex code.
Choose the number of steps (5, 10, or 20 tints and shades each side).
Select the copy format: HEX, RGB, or HSL.
Click any swatch to copy its value, or use 'Copy all' for the full palette.

Common uses

Building a design system color scale (50 through 900) from a single brand color
Creating lighter hover states and darker pressed states for UI components
Exploring color depth alongside the color palette generator and color converter

Technical specification

Algorithm or formula: Tints linearly interpolate each RGB channel between the base color and white (255, 255, 255). Shades interpolate toward black (0, 0, 0). For N steps, step i uses a factor of i/(N+1) for i = 1..N.
Browser API or library: Pure JavaScript arithmetic and parseInt/toString(16) for hex conversion. navigator.clipboard.writeText for copy.
Input limits: Any valid hex color (3 or 6 digits) or HTML color name. Steps fixed at 5, 10, or 20 per side.
Output: Up to 41 swatches (20 tints + base + 20 shades) shown with the chosen format (HEX, RGB, or HSL). Copy single value or entire palette.
Known limitations: Linear RGB interpolation is perceptually nonuniform; HSL or LAB interpolation would give more even visual steps but with different brand-matching tradeoffs.

Frequently asked questions

What is the difference between a tint and a shade?: A tint is created by mixing a color with white, making it lighter. A shade is created by mixing a color with black, making it darker. This generator produces both: tints above your base color and shades below it.
How many steps can I generate?: You can choose 5, 10, or 20 steps on each side. For example, 10 steps produces 10 tints and 10 shades plus your base color, giving 21 swatches in total.
How are tints and shades calculated?: Tints linearly interpolate between the base color and white (255, 255, 255) in RGB space. Shades interpolate between the base color and black (0, 0, 0). For N steps, each value uses a factor of i/(N+1) for i from 1 to N.
Is my color data sent to a server?: All calculations run locally in your browser using JavaScript. No data is sent to our servers.

Reviewed and tested May 25, 2026.