Ink·tab
←all tools

A tonal scale from one color

Give it a base color; get tonal, contrast, and complementary variations.

Swatch values
Click a swatch to copy
Contrast check
:root {
  --color-brand-50: #f9fafe;
  --color-brand-100: #f0f3fc;
  --color-brand-200: #dfe6f9;
  --color-brand-300: #c8d3f4;
  --color-brand-400: #a4b5eb;
  --color-brand-500: #788fde;
  --color-brand-600: #5269cf;
  --color-brand-700: #3647ab;
  --color-brand-800: #24317b;
  --color-brand-900: #151d50;
  --color-brand-950: #0a1034;
}

When to use it

When you have one color you like and need lighter and darker variants. Handy for fixing a brand color, then building background / border / hover tiers from the same family. It generates 11 stops (very light → very dark) automatically.

Why it looks natural

Typical color tools change lightness by a fixed percentage, but the perceived change is different for each color — yellow jumps bright, blue stays muted. This tool adjusts so the perceived brightness step is constant.

Out-of-gamut handling

If you ask for a color that's too saturated, some monitors can't render it properly. The tool clamps into a renderable range so output stays stable across screens.

Four export formats

  • CSS variables (hex) — the broadest-support format. Works in any environment.
  • CSS variables (oklch) — modern browsers' newer color notation; fall back to hex for older targets.
  • Tailwind config — paste directly into a Tailwind CSS project.
  • JSON — for Figma plugins or other design tool pipelines.

Where does your input go?

Color conversions and palette generation all happen in this page. Your base color and token names are never sent or stored. Close the tab and they're gone.