Tint & Shade Generator

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

Featured Embed

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.

You need to become a Contributor to join the discussion.
Michael Edelstone
Michael EdelstoneMaker@edelstone · Designer + neat person
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
Vlad Korobov@vladkorobov · Product Manager
@edelstone thank you Michael, useful tool!