The purpose of this tool is to accurately produce tints (lighter variants) and shades (darker variants) of a given hex color in 10% increments.
The W3Schools color picker no longer shows tints and shades in exact 10% increments from the base color, and most other tools out there get the calculation incorrect due to rounding errors.
It's best used when you already have a base color palette but would like some complimentary colors for gradients, borders, backgrounds, shadows or other elements.
This is useful for designers who may be communicating color intent to developers that use Sass color functions 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.
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.
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 application is inspired by a similar app once maintained by North Krimsly, with significant modifications made to the calculation method and interface design.