Tint & Shade Generator
Precise tints and shades from any color in 10% increments.
Start new thread
Michael Edelstone

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

by
Tint & Shade Generator
•

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.

Add a comment

Replies

Best
Utkarsh Arya
Hi, I stumbled upon this while I was looking for a shade and tints generator. Checked out a few others as well. What I couldn't find in any of them was the ability to specify the number of swatches (depending upon the range required) for a color. Eg. I wanted a 100 - 700 (7 swatches) range for a HEX which could be used in an UI color palette. Would be amazing if you could do that. Would really be a differentiator. Cheers.
Michael Edelstone
Maker
@uxarya Good idea. I'd love it if you made an issue on the GitHub project and I can try to make that happen. https://github.com/edelstone/tin...
Arnold Dela Cruz
@uxarya Have you considered https://vis4.net/palettes/#/20|s... ? You can specify n stops as well as any number of colors. There are other useful features suited for encoding data visualizations like specifying sequential vs. diverging palette types. What I like about what @edelstone has done with his tool is build swatches on either side of the specified color and adding functionality to create n palettes
Michael Edelstone
Maker
I know there are a lot of color tools out there, but it always seems to me like they don't get the calculations right, or they do much more than I need. In contrast, the Tint and Shade Generator has a bulletproof calculation (https://github.com/edelstone/tin...), and just displays tints and shades in 10% increments. No exports or extra dials. Output matches Sass functions, Chrome DevTools color picker, Figma's color picker, and other popular tools. In my design process I often find I just quickly need some tints and shades to round out my palette. I know this tool is a bit limited, but it helps me a lot so I figured I'd share. Many thanks for reading and using the Tint and Shade Generator! --Michael
Vlad Korobov
@edelstone thank you Michael, useful tool!
Mikael Georgelin
Great web app to create tint and shades. I use it every time, I create a new design system. I just wish it was a Sketch plugin ;)