Subscribe
Sign in
Tint & Shade Generator
p/tint-shade-generatorPrecise tints and shades from any color in 10% increments.
Start new thread
Michael Edelstone

Tint & Shade Generator 2.0 - Precise tints and shades from any color in 10% increments.

by•

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.

Add a comment

Replies

Best
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!