Tints and shades generator

How to generate tints and shades

1. Pick your base color using the color picker or type a hex code.
2. Choose the number of steps (5, 10, or 20 tints and shades each side).
3. Select the copy format: HEX, RGB, or HSL.
4. 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 3 or 6 digit hex color (with or without the leading #), or any color the visual picker emits. Steps fixed at 5, 10, or 20 per side.
• Output: Up to 41 swatches (20 tints + base + 20 shades). Values are copied in the chosen format (HEX, RGB, or HSL), one swatch at a time or the 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. Our servers are not involved at any point.