How to Use the tints.dev Palette Creator to Generate a Tailwind CSS Palette

Updated

Open tints.dev, enter a valid hexadecimal color as the initial Value, and the generator produces an 11-stop palette (50–950) you can copy as Tailwind CSS theme variables. By default that base color becomes stop 500, but you can assign it to any stop from 50 to 950. From there you refine the result with Hue Shift, Saturation Shift, Minimum/Maximum Lightness, and a Linear/Perceived toggle, then copy the output in your preferred color mode.

Step 1: Set the base color and its stop

The Palette Creator starts from a single hex value.

  1. Enter a valid hexadecimal color in the Value field (or use the Open Color Picker).
  2. Choose which stop that color represents. The default is Auto (500); you can change it to any stop from 50 to 950.

The base color anchors the palette. Every other stop is derived by spreading lightness toward white (100) and black (0) around it.

Step 2: Adjust Hue Shift and Saturation Shift

These two controls make a palette more interesting when a flat spread would look dull.

  • Hue Shift — for colors that have 100% saturation, shifting the hue up or down adds variation across the stops instead of repeating one flat hue.
  • Saturation Shift — palettes starting from a base color with little saturation become more interesting by increasing saturation at the extremes.

Both are optional. If your base color already reads well across the range, leave them at zero.

Step 3: Set Minimum and Maximum Lightness

The Lightness Distribution range runs 0–100, where 100 is white and 0 is black.

  • Shift the Minimum and Maximum Lightness to spread the remaining colors out toward the extremes of white and black.
  • A wider range pushes the lightest stops closer to white and the darkest stops closer to black; a narrower range keeps the palette more compressed.

Step 4: Switch between Linear and Perceived

Toggle between Linear and Perceived modes to produce a different spread of colors at the extremes. The two modes distribute lightness differently, so the same base color and range can yield noticeably different 50 and 950 stops. Try both and keep the one that matches how you want the ends of the scale to look.

Step 5: Copy the output

The generator outputs your palette as Tailwind CSS theme variables. Choose the color mode you want — oklch, hex, or hsl — then use Copy to Clipboard and paste into your CSS file. The output is formatted as a @theme block, for example:

@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 site lists Tailwind CSS Version 4 as the output target.

Using the Palette API

If you need to generate a 50–950 palette from a single hex value inside a design tool, the Palette API can fetch any set of palettes. Note the current limitation: the API only returns a palette using the base hex value, with no options for HSL tweaks. The interactive Hue/Saturation/Lightness adjustments described above apply to the Palette Creator UI, not the API.

A note on the approach

The site states that these principles are inspired by Refactoring UI by Adam Wathan and Steve Schoger — and that the same book recommends against automated tools like this one. The tool is positioned as a way to fast-track creating new palettes, not to replace design judgment. Treat the generated scale as a starting point and adjust stops by eye where it matters.