Tint & Shade Generator

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

1 follower

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

1 follower

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.

Tint & Shade Generator 2.0 gallery image

Launch tags:

Web App•Design Tools•Developer Tools

Launch Team

Gilli Sigurdsson

Baseline

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?

Report

5yr ago

Michael Edelstone

Tint & Shade Generator

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.

Report

4yr ago

Gilli Sigurdsson

Baseline

@gillisig @edelstone nice, values.js looks like what I'm looking for. Thanks a lot and best of luck with your launch!

Report

4yr ago

Michael Edelstone

Tint & Shade Generator

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

Report

5yr ago