The purpose of this tool is to accurately produce tints (pure white added) and shades (pure black added) of a given hex color in 10% increments.
It takes the math seriously. In my experience similar tools get the calculation incorrect due to rounding errors, creator preferences, or other inconsistencies.
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.
The given hex color is first converted to RGB. Then each component of the RGB color has the following calculation performed on it, respectively.
New value = current value + ((255 - current value) x tint factor)
New value = current value x shade factor
The new value is rounded if necessary, and then converted back to hex for display.
Let's say we want tints and shades of Rebecca Purple, #663399.
102 + ((255 - 102) x .1) = 117.3, rounded to 117
51 + ((255 - 51) x .1) = 71.4, rounded to 71
153 + ((255 - 153) x .1) = 163.2, rounded to 163
102 x .9 = 91.8, rounded to 92
51 x .9 = 45.9, rounded to 46
153 x .9 = 137.7, rounded to 138
This project is open source and I'd love your help!
If you're a developer and want to help with the project, please comment on open issues or create a new one and communicate your intentions. Once we agree on a path forward you can just make a pull request and take it to the finish line.
The Tint & Shade Generator will always be free but your support is greatly appreciated.
We use these amazing open-source libraries across the project: