Tint & Shade Generator

Tint & Shade Generator

Precise tints and shades from any color in 10% increments.

1 follower

Visit website
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.
Tint & Shade Generator 2.0 was ranked #5 of the day for November 7th, 2020
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.
Tint & Shade Generator 2.0 gallery image
Tint & Shade Generator 2.0 gallery image
Launch tags:
Web App•Design Tools•Developer Tools
Launch Team

What do you think? …

Gilli Sigurdsson
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?
Michael Edelstone
Maker
@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.
Gilli Sigurdsson
@gillisig @edelstone nice, values.js looks like what I'm looking for. Thanks a lot and best of luck with your launch!
Michael Edelstone
Maker
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
Trisha Cupra
Awesome work!