The purpose of this tool is to accurately produce tints (lighter variants) and shades (darker variants) of a given hex color in 10% increments.
Testing shows that it matches the way Chrome DevTools and the classic W3Schools color picker calculate tints and shades. As far as I can tell, there are no other applications that get the calculation correct and produce the tints and shades so simply.
It's best used when you already have a base color palette but would like complimentary colors for gradients, borders, backgrounds, shadows or other elements.
That’s the standard I developed for my design process at Texas State University and in other projects. I think choosing tints and shades based on a flat percentage is a clean, reproducible way to augment brand palettes and produce designs with depth.
The given hex color is first converted to RGB. Then each component of the RGB color has the following calculation performed on it, respectively.
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.
This application is inspired by a similar app once maintained by North Krimsly, with significant modifications made to the calculation method and design.
Michael Edelstone designed it and put it together, with much-appreciated feedback from Nick Wing.
Open source; please use. CC BY-SA 3.0 US