Tint & Shade Generator
What is the Tint & Shade Generator?
The purpose of this tool is to accurately produce tints (lighter variants) and shades (darker variants) of a given hex color in 10% increments.
Why is this tool unique?
It takes the math seriously. In my experience similar tools get the calculation incorrect due to rounding errors or other inconsistencies.
Testing shows that the output matches Chrome DevTools' calculation method, Sass tint and shade functions, and the PostCSS color-mod function (currently defunct).
When would I use this?
It's best used when you already have some base colors but would like complimentary colors for gradients, borders, backgrounds, shadows or other elements.
This is useful for designers who may be communicating color intent to developers who use Sass or PostCSS in their builds. It's also a solid way to quickly preview what tints and shades look like for a base color you may be considering for your design.
Calculation method
The given hex color is first converted to RGB. Then each component of the RGB color has the following calculation performed on it, respectively.
- Tints:
New value = current value + ((255 - current value) x tint factor) - Shades:
New value = current value x shade factor
The new value is rounded if necessary, and then converted back to hex for display.
Example calculation
Let's say we want tints and shades of Rebecca Purple, #663399.
10% tint
- #663399 is converted to the RGB equivalent of 102, 51, 153
- R:
102 + ((255 - 102) x .1) = 117.3, rounded to 117 - G:
51 + ((255 - 51) x .1) = 71.4, rounded to 71 - B:
153 + ((255 - 153) x .1) = 163.2, rounded to 163 - RGB 117, 71, 163 is converted to the hex equivalent of #7547a3
10% shade
- #663399 is converted to the RGB equivalent of 102, 51, 153
- R:
102 x .9 = 91.8, rounded to 92 - G:
51 x .9 = 45.9, rounded to 46 - B:
153 x .9 = 137.7, rounded to 138 - RGB 92, 46, 138 is converted to the hex equivalent of #5c2e8a
Attribution
This application is inspired by a similar app once maintained by North Krimsly, with significant modifications made to the calculation method and interface design.
Credits
Michael Edelstone designed and organized the project. Nick Wing helped him with the color scripts. Many thanks to Joel Carr, Sebastian Gutierrez, Tim Scalzo, and Aman Agarwal for contributing as well.
License
Open source; CC BY-SA 3.0 US.
Feedback and contributing
If you have a problem or would like to help improve this tool, feel free to create/review open issues or make a pull request. You can also just email the project maintainer.