Shade & Tint Generator
Generate a scale of shades (darker) and tints (lighter) from any base color.
#3b82f6#3f84f6, #4387f6, #4789f7, #4a8cf7, #4e8ef7#3a7ff1, #397dec, #387ae8, #3678e3, #3575de--tint-100: #3f84f6;
--tint-200: #4387f6;
--tint-300: #4789f7;
--tint-400: #4a8cf7;
--tint-500: #4e8ef7;--shade-100: #3a7ff1;
--shade-200: #397dec;
--shade-300: #387ae8;
--shade-400: #3678e3;
--shade-500: #3575de;About This Tool
A shade is a base color mixed with black; a tint is the same color mixed with white. Together they form a tonal scale used to build UI surfaces, hover states, and typographic hierarchy from a single brand color.
From a hex or RGB input, the generator produces a sequence of darker shades and lighter tints at fixed percentage steps. Output includes hex codes for each step, ready to drop into a design token file or Tailwind config.
Underneath, the math depends on color space. Naive linear-RGB mixing toward black or white is the simplest approach: at each step, lerp the channel values toward (0,0,0) or (255,255,255). It works but produces muddy, desaturated results in the dark end and washed-out pastels in the light end. HSL-based generation reduces or increases the L channel while keeping H and S fixed — better, but HSL itself is not perceptually uniform, so the visual spacing between steps drifts. LCH or OKLCH (a 2020-era successor used by Tailwind 4 and several modern design tools) keeps lightness and chroma decoupled from hue, producing perceptually even ramps. The generator picks one of these depending on settings.
A worked example. Base #2563EB (Tailwind blue-600). Naive linear-RGB tints at 90/80/70/60% lightness: #4A7AEE, #6F92F1, #94AAF4, #B9C2F8. These look fine but each step desaturates a bit. The same base in OKLCH at L=85 down to L=25 in seven steps produces hex codes that hold their visual blueness much more evenly. Compare side by side and the difference is obvious in the mid-tones.
Limitations to be honest about. Generated scales aren't accessibility-checked. You'll typically need to verify which shade-on-tint combinations meet 4.5:1 contrast — a good starting rule is shades 600 and darker pair with tints 100 and lighter for body text. Yellow and other naturally bright colors need an asymmetric ramp because pure yellow is already very light at a normal lightness value; deep blues benefit from extending the light end. Most generators apply identical step sizes to every hue, which is convenient but produces inconsistent visual rhythm. For a production design system, hand-tune the extremes after generation.
The about text and FAQ on this page were drafted with AI assistance and reviewed by a member of the Coherence Daddy team before publishing. See our Content Policy for editorial standards.