Accurately produce tints (lighter variants) and shades (darker variants) of a given hex color in 10% increments. 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. Simple, precise, and open source.
This is the 2nd launch from Tint & Shade Generator. View more
Tint & Shade Generator 2.0
Precise tints and shades from any color in 10% increments.
Make and share tints and shades of any hex color! Say you have a base color palette but would like some complimentary colors for gradients, borders, backgrounds, or shadows. This is the tool for you. Simple, precise, and open source.
Nice project. I kind of need something like this for something I'm working on, but only as a library that calculates the shades based on a hex and gives me back the values. Is the underlying calculation available as a library?
@gillisig There is no standalone library, that's a good idea though. I've used values.js in the past; you could check them out (https://noeldelgado.github.io/va...) although I haven't verified if their calculation matches mine.
Hi everyone!
The Tint & Shade Generator is back with some great new features.
As always, it generates precise tints and shades based on any hex color(s) you input. We take the math seriously so these should consistently match the output of Sass and PostCSS tints and shades. It's great for devs and others who want to take the guess work out of color handling.
In addition to that base functionality you can now:
1) Share links of color palettes, since the URL adjusts once the form is submitted
2) Copy colors from the palette with a single click
3) Prepend a hashtag to the copied colors by toggling a switch
4) Use color shorthand (i.e. 123 instead of 112233)
5) Get alerted to errors like an empty text field or invalid entry
Many thanks to the open-source community for their contributions this year. There's more to come in the future, so we'd love it if you starred us on GitHub and followed along.
Enjoy!
-Michael
Baseline
Tint & Shade Generator
Baseline
Tint & Shade Generator