What is tints.dev?

Updated

tints.dev is a palette generator and API for Tailwind CSS. You give it one hexadecimal color, and it produces an 11-stop palette from 50 to 950, which you can tweak with HSL controls and copy out as Tailwind theme variables. It is useful when you need a full color scale for a design system or a Tailwind project but only have a single brand color to start from.

The tool is built around the palette conventions popularized by Refactoring UI (Adam Wathan & Steve Schoger). Notably, that same book recommends against automated palette tools — tints.dev exists to speed up the first draft, not to replace design judgment.

How the palette generation works

The generator takes a base color and expands it into stops 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.

By default, the base color you enter is treated as stop 500, but you can reassign it to any stop from 50 to 950. That matters when your brand color is very light or very dark — anchoring it at 500 would otherwise force an unnatural spread.

Three controls shape the result:

Control What it changes
Hue Shift Rotates hue toward the extremes, useful for fully saturated base colors that would otherwise produce a flat, uninteresting scale
Saturation Shift Raises saturation at the light and dark ends, useful when the base color is low-saturation
Lightness Distribution (0–100) Sets minimum and maximum lightness so the remaining stops spread toward white and black

There is also a toggle between Linear and Perceived modes, and between Lightness and Luminance. Switching these changes how colors are distributed at the extremes, so it is worth comparing both before settling on a palette.

Output formats

The generated palette can be copied in several color modes:

  • oklch
  • hex
  • hsl

The output is formatted as Tailwind CSS theme variables. For example, a blue palette in oklch looks like:

@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);
}

Paste that into the CSS file where your Tailwind theme is defined. The tool targets Tailwind CSS version 4.

The Palette API

Any set of palettes can be fetched through an API, which is handy for design tools that need to generate a 50–950 scale from a single hex value on the fly.

One limitation to know before you build on it: the API currently returns a palette using only the base hex value. The HSL tweaks available in the interactive generator — hue shift, saturation shift, lightness distribution — are not exposed as API options. If your workflow depends on those adjustments, you will need to apply them yourself or generate the palette in the UI and copy the result.

When to use it

tints.dev fits these situations:

  • You have one brand hex color and need a complete Tailwind color scale quickly.
  • You want to preview how hue, saturation, and lightness shifts affect a scale before committing.
  • You are building a tool that needs programmatic palette generation from a hex input and can accept the default (untweaked) output.

It fits less well if you need fine-grained, per-stop manual control, or if your API integration requires the HSL adjustment parameters — those are UI-only for now.