How does the tints.dev Palette API work?

The tints.dev Palette API returns a full 50–950 Tailwind CSS color palette generated from a single hex value. You send one base color, and the API responds with the eleven stops that make up a Tailwind-style scale. It is built for design tools and workflows that need to turn one brand or base color into a complete palette without manual tuning. The important limitation: the API only returns a palette built from the base hex value, with no options for the HSL tweaks (hue shift, saturation shift, lightness distribution) that the on-page Palette Creator offers.

What the API returns

The output is a set of color stops labeled 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950 — the same eleven-stop structure Tailwind CSS uses. The site's example output shows these values in oklch() format, which is what Tailwind CSS v4 uses by default:

@theme {
  --color-blue-50: oklch(0.965 0.015 273.9);
  --color-blue-100: oklch(0.924 0.033 272.8);
  --color-blue-200: oklch(0.847 0.071 271.55);
  --color-blue-300: oklch(0.771 0.108 268.07);
  --color-blue-400: oklch(0.701 0.144 265.29);
  --color-blue-500: oklch(0.623 0.188 259.81);
  --color-blue-600: oklch(0.532 0.171 258.32);
  --color-blue-700: oklch(0.426 0.139 258.76);
  --color-blue-800: oklch(0.33 0.107 258.44);
  --color-blue-900: oklch(0.234 0.077 258.58);
  --color-blue-950: oklch(0.189 0.063 258.86);
}

The generator also supports other output color modes — hex, hsl, and oklch — and a "Copy to Clipboard" action, so you can paste the result directly into a CSS file. The @theme block format is what you paste into a Tailwind CSS v4 stylesheet.

When to use the API instead of the Palette Creator

Use the API when you need palettes generated programmatically — for example, a design tool that lets a user pick one hex value and instantly produces a 50–950 scale, or a build step that generates theme tokens from a brand color.

Use the on-page Palette Creator when you want to tune the result by hand. The Creator exposes controls the API does not:

So if a base color has 100% saturation and you want to shift the hue to make the palette more interesting, or if a low-saturation base needs more saturation at the extremes, that work has to happen in the Creator — the API will not apply those adjustments.

How the palette is built

The generator works by taking your base hex as a reference stop (by default stop 500, though the Creator lets you set it to any stop from 50–950) and spreading the remaining stops toward white and black. The Creator's guidance describes the levers involved:

• Hue shift — useful when the base color is fully saturated; shifting hue up or down makes the palette less flat.
• Saturation shift — useful when the base color has little saturation; increasing saturation at the extremes keeps the palette from looking washed out.
• Minimum/maximum lightness (or luminance) — spreads the rest of the colors toward the extremes of white and black.
• Lightness vs. luminance mode — switching between them produces a different spread of colors at the extremes.

These principles are credited to the Refactoring UI book by Adam Wathan and Steve Schoger. The site notes that the same book actually recommends against automated palette tools — tints.dev exists to fast-track palette creation, not to replace design judgment.

Practical notes

• The API returns a palette from the base hex value only. If you need HSL tweaks baked in, generate the palette in the Creator first, then copy the CSS.
• The site is built with React Router, hosted on Cloudflare, with content in Sanity.io, and designed with Tailwind CSS (plus Headless UI and HeroIcons). It was made by Simeon Griggs.
• The page links to a launch blog post for full details on how the generation works — worth reading if you want to understand the math behind the stops.
• Pricing and authentication requirements are not stated on the page, so treat access terms as unconfirmed until you check the site directly.