Skip to main content
Ink·tab

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 and need lighter and darker variants. Useful for fixing a brand color, then building background / border / hover tiers from the same family. Outputs 11 stops (very light → very dark).

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.

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.

Colors never leave the page

OKLCH conversions and the 11-stop scale are computed via culori + client-side math. No external traffic — input stays in the page.

Frequently asked questions

What's the difference between OKLCH and HEX?
OKLCH separates perceived lightness, chroma, and hue. HEX (sRGB) is raw pixel values, so two equally bright colors can look very different. OKLCH makes uniform tonal steps possible.
What's the 11-stop scale for?
It generates an 11-step ramp (50 · 100 ~ 950) like Tailwind v4. Useful for deriving light/dark variants from one brand color or generating design-system tokens in bulk.
Can I use the exported CSS · Tailwind · JSON directly?
Yes. CSS variables (`--brand-50`...), a Tailwind v4 `@theme` block, and a JSON object are all copy-ready. Customize the prefix from the prefix field.