Generate TOOLKIT

Shades & Tints Generator

Precision tonal scale generator. Calculate granular step scales for dark shades, light tints, and desaturated grey tones for design systems.

Client-Side Engine

Executed locally via HTML5 Canvas & Web API. Zero server upload.

BASE COLOR (HEX)

STEP COUNT (INCREMENTS)8 Steps

LIGHTNESS LADDER

Tints (Mixed with Pure White)

DARKNESS LADDER

Shades (Mixed with Pure Black)

SATURATION LADDER

Tones (Mixed with 50% Neutral Grey)

WORKFLOW PROTOCOL

How to Use This Tool

Enter Base Hue

Input your primary brand or interface color code (HEX format).

Configure Steps

Adjust the Step Count slider from 3 to 20 increments to fine-tune chromatic granularity.

Explore Scales

Inspect separate scales for Shades (mixed with black), Tints (mixed with white), and Tones (mixed with grey).

Batch Export

Copy individual swatches with 1-click or export full CSS variable step ladders (e.g. 50, 100, 200... 900).

TECHNICAL EXPERTISE & METHODOLOGY

Frequently Asked Questions

What is the technical difference between a Shade, a Tint, and a Tone?+

A Tint is created by mixing a pure base pigment with pure White (#FFFFFF), increasing lightness. A Shade is created by mixing the base pigment with pure Black (#000000), reducing lightness. A Tone is created by mixing the pigment with neutral Grey (#808080), reducing saturation while preserving moderate lightness.

Can I generate a Tailwind-style 50-900 color scale with this tool?+

Yes. By setting the step count to 9 or 10, you can copy the combined tints and shades scale directly into your Tailwind CSS theme configuration.

INTERCONNECTED WORKFLOW