Color Shades & Tints Generator

Builds a nine-step color scale from one base color: four lighter tints mixed toward white, the base color itself, and four darker shades mixed toward black.

Enter a three- or six-digit HEX color. The base is normalized and eight tint/shade swatches appear immediately; click any swatch to copy its lowercase HEX value.

A base of #3b82f6 produces tints at 80%, 60%, 40% and 20% mixed toward white (lightest to closest-to-base), and shades at 20%, 40%, 60% and 80% mixed toward black (closest-to-base to darkest) — nine swatches in total.

Each step linearly interpolates the base color's red, green and blue channels toward white (255, 255, 255) for tints or toward black (0, 0, 0) for shades, at the stated percentage, then rounds the result.

This is direct sRGB channel interpolation, not perceptual HSL, OKLCH or gamma-correct mixing, so equal-looking percentage steps don't always look equally spaced to the eye — some steps may appear to jump more than others.

The nine-color set works well as a starting point for hover/active states, borders, backgrounds and text-on-background combinations in a design system — verify contrast separately before using any pair for text.

Generation happens entirely in your browser; the color you enter is not uploaded.