New! plugin

Tint & Shade Generator

What is the Tint & Shade Generator?

The Tint & Shade Generator is a precision color tool for producing tints (lighter variants) and shades (darker variants) from a given hex color in 5%, 10%, or 20% increments.

Why is this tool unique?

It takes the math seriously. In my experience similar tools get the calculations incorrect due to rounding errors, creator preferences, or other inconsistencies.

Testing shows that the output matches Chrome DevTools’ calculation method as well as some established, popular methods to derive tints and shades via Sass.

When would I use this?

Originally created for designer and developer teams, it’s also useful for teachers, data pros, brand strategists, presentation makers, and anyone who works with colors.

It’s perfect for:

Calculation method

The given hex color is first converted to RGB. Each RGB component is then calculated independently as follows:

The “tint factor” represents the percentage of the remaining distance each RGB channel moves toward white (255), while the “shade factor” represents the percentage of the original color retained as each channel is scaled toward black (0).

The new value is rounded to the nearest whole number (values ending in .5 round up), and then converted back to hex for display.

Example calculation

Let’s say we want tints and shades of Rebecca Purple, #663399.

10% tint

  1. #663399 is converted to the RGB equivalent of (102, 51, 153)
  2. R: 102 + ((255 − 102) × 0.1) = 117.3, rounded to 117
  3. G: 51 + ((255 − 51) × 0.1) = 71.4, rounded to 71
  4. B: 153 + ((255 − 153) × 0.1) = 163.2, rounded to 163
  5. RGB (117, 71, 163) is converted to the hex equivalent of #7547a3

10% shade

  1. #663399 is converted to the RGB equivalent of (102, 51, 153)
  2. R: 102 × 0.9 = 91.8, rounded to 92
  3. G: 51 × 0.9 = 45.9, rounded to 46
  4. B: 153 × 0.9 = 137.7, rounded to 138
  5. RGB (92, 46, 138) is converted to the hex equivalent of #5c2e8a

Related colors

In addition to generating tints and shades, you can also add related palettes based on common color-wheel relationships. These palettes shift the hue while preserving the original saturation and lightness, which is well suited to most color systems.

Hue-derived palettes require saturation. If the base color is neutral or near-neutral (very low saturation), these palettes will return the original color because neutral colors have no meaningful hue to rotate.

Complementary

Adds one new palette using the hue directly opposite the base color (180°), producing the strongest contrast and clear visual separation.

Split complementary

Adds two palettes using hues 30° on either side of the complementary color, keeping contrast high but less extreme than a direct complementary pairing.

Analogous

Adds two palettes using hues 30° on either side of the base color, resulting in low-contrast, cohesive combinations suited for subtle variation.

Triadic

Adds two palettes evenly spaced at 120° intervals around the color wheel, creating medium-high contrast with energetic, distinct relationships.

Figma plugin

Now you can generate the same meticulously-crafted tints and shades without leaving your canvas (and automatically create local color styles, too). Grab the plugin from the Figma Community.

Feedback and contributing

If you notice a bug or want a feature added please file an issue on GitHub or just email me the details.

If you’d like to contribute, comment on an open issue or open a new one describing your approach. Once aligned, submit a PR.

Support this project

Credits

Michael Edelstone designed and organized the project with major assistance from Nick Wing on the color calculations.

We use these amazing open-source libraries across the project:

Many thanks to Joel Carr, Sebastian Gutierrez, Tim Scalzo, Aman Agarwal, Aleksandr Hovhannisyan, Shubhendu Sen, and Luis Escarrilla for their valuable contributions.

Design specs

Prefer Google’s color logic? Try the Material Design Palette Generator.