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.
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.
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:
- exploring and refining colors visually
- moving from a single color to a complete system
- generating consistent tints and shades for UI states
- building complementary palettes for accents or secondary UI
- sharing palettes via link or image
- exporting colors for design tokens, CSS, or JSON
The given hex color is first converted to RGB. Each RGB component is then calculated independently as follows:
- Tints:
New value = current value + ((255 − current value) × tint factor) - Shades:
New value = current value × shade factor
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.
Let’s say we want tints and shades of Rebecca Purple, #663399.
#663399is converted to the RGB equivalent of(102, 51, 153)- R:
102 + ((255 − 102) × 0.1) = 117.3, rounded to 117 - G:
51 + ((255 − 51) × 0.1) = 71.4, rounded to 71 - B:
153 + ((255 − 153) × 0.1) = 163.2, rounded to 163 - RGB
(117, 71, 163)is converted to the hex equivalent of#7547a3
#663399is converted to the RGB equivalent of(102, 51, 153)- R:
102 × 0.9 = 91.8, rounded to 92 - G:
51 × 0.9 = 45.9, rounded to 46 - B:
153 × 0.9 = 137.7, rounded to 138 - RGB
(92, 46, 138)is converted to the hex equivalent of#5c2e8a
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 works well for most color systems.
Adds one palette using the hue directly opposite the base color (180°), producing the strongest contrast and clear visual separation.
Adds two palettes using hues 30° on either side of the complementary color, keeping contrast high but less extreme than a direct complementary pairing.
Adds two palettes using hues 30° on either side of the base color, resulting in low-contrast, cohesive combinations suited for subtle variation.
Adds two palettes evenly spaced at 120° intervals around the color wheel, creating medium-high contrast with energetic, distinct relationships.
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.
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.
The Tint & Shade Generator exposes its color engine as a standalone API. It generates tints and shades, derives related palettes, and performs common color normalization and conversion.
It can also be used independently in your projects.
- npm: @edelstone/tints-and-shades
- Source: packages/tints-and-shades
Prerequisites: Node.js 18+
- Clone this project.
- Navigate to the project in your terminal.
- Install dependencies:
npm install. - Start the server:
npm run start. - Navigate to
localhost:8080in your browser.
Michael Edelstone designed and organized the project with major assistance from Nick Wing on the color calculations.
Many thanks to Joel Carr, Sebastian Gutierrez, Tim Scalzo, Aman Agarwal, Aleksandr Hovhannisyan, Shubhendu Sen, and Luis Escarrilla for their valuable contributions.
We also utilize these amazing open-source projects:
- Typography: Work Sans by Wei Huang
- Iconography: Tabler Icons
- Colors: #000000, #1a1a1a, #e6e6e6, #ffffff, #e96443, and #ca228e
Prefer Google’s color logic? Try the Material Design Palette Generator.