Color Shades Generator

What is Color Shades Generator?

The Color Shades Generator turns one base HEX color into a complete tint-and-shade scale for a design system. Instead of only mixing linearly in RGB, it can interpolate in OKLCH or HSL so the hue stays stable and the lightness is spaced evenly, giving a perceptually balanced ramp with no muddy or washed-out steps. You choose how many stops it makes — from 2 to 24, or a custom comma-separated list of labels — shift the hue or scale the saturation, and read a per-step WCAG contrast hint showing which shades work as text on white and on black. The finished scale copies out as CSS custom properties, a Tailwind color config object, or JSON with one click.

How to use Color Shades Generator

1. Type a base color in the Base color (HEX) field using #rrggbb or #rgb, or click the large swatch to pick one visually.
2. Choose a color space: OKLCH or HSL for a perceptually even ramp with a stable hue, or RGB for classic linear mixing.
3. Set how many stops you want (2–24), or open Settings to enter a custom comma-separated stop list, shift the hue, scale the saturation, and set the export color name.
4. Read each row's two contrast cells — the letter A on white and on black — highlighted when that shade meets WCAG AA for text.
5. Copy a single step's HEX, or copy the whole scale as CSS variables, a Tailwind config, or JSON with the copy buttons.

Examples

Frequently asked questions

What is the difference between the RGB, HSL, and OKLCH options?

RGB mixes your color linearly toward white and black, which is fast but can look uneven in the mid-tones. HSL and OKLCH instead hold the hue steady and space the lightness evenly; OKLCH is perceptually uniform, so each step looks like an equal jump in brightness. Pick OKLCH for the most balanced ramp.

How many shades can I generate, and can I name them?

Set any stop count from 2 to 24. A count of 11 uses the familiar Tailwind numbering (50, 100…900, 950); other counts are spaced evenly from 50 to 950. You can also type a custom comma-separated list of labels in Settings, which overrides the count and names each step exactly as you write it.

How is the WCAG contrast hint calculated?

For every shade the tool computes the WCAG contrast ratio against pure white and pure black from relative luminance. The two small cells in each row show the letter A on white and on black and are highlighted when the ratio reaches 4.5:1 (AA for normal text); hover to see the exact ratio and whether it is AA or AAA.

Is my color data uploaded anywhere?

No. The color math, the contrast checks, and all three exports run entirely in your browser, so no color value is ever sent to a server. It works offline and keeps your palette private.