How to Use a tints.dev Palette in Your Tailwind CSS Project

tints.dev generates a 50–950 color palette and outputs it as Tailwind CSS theme variables, so you can paste the result straight into your CSS. The tool supports Tailwind CSS v4 and v3, and lets you export in oklch, hex, or hsl. The main condition to know: the Palette API returns a palette built from a single base hex value only — it does not apply your HSL tweaks (hue shift, saturation shift, lightness distribution) that you set in the visual creator.

Step 1: Generate the palette

Open the Palette Creator on tints.dev and set your starting point:

• Initial Value — enter a valid hexadecimal color. By default this maps to stop 500, but you can assign it to any stop from 50 to 950.
• Hue Shift — useful when your base color has 100% saturation; shifting the hue up or down makes the palette more interesting.
• Saturation Shift — for base colors with little saturation, increasing saturation at the extremes keeps the palette from looking washed out.
• Maximum / Minimum Lightness — spread the remaining colors toward white and black.
• Lightness vs. Luminance — switching between these modes produces a different spread of colors at the extremes.

These controls follow principles from the Refactoring UI book by Adam Wathan and Steve Schoger. Note that the same book actually recommends against automated palette tools — tints.dev exists to fast-track a first draft, not to replace design judgment.

Step 2: Pick your output format

Before copying, choose the color mode and Tailwind version:

The output is a set of CSS custom properties following Tailwind's color naming convention, from --color-<name>-50 through --color-<name>-950. For example, a blue palette in oklch looks like this:

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

Step 3: Paste into your CSS

Use the Copy to Clipboard button, then paste the block into the CSS file that holds your Tailwind theme configuration. Because the variables use Tailwind's standard naming (--color-blue-500, etc.), utilities like bg-blue-500, text-blue-700, and border-blue-200 resolve to your new palette without any extra mapping.

Expected result: after saving, your Tailwind color utilities render with the generated values. If you use Tailwind v4, the @theme block is the correct place for these definitions; if you selected v3, use the output format that matches your v3 configuration.

Using the Palette API

The Palette API fetches a palette programmatically, which is handy for design tools that need to turn a single hex value into a full 50–950 scale. The important limitation: the API returns a palette using only the base hex value — there are no options to apply HSL tweaks. So if your design depends on hue shift, saturation shift, or custom lightness distribution, generate that palette in the creator and copy the output rather than calling the API.

Common snags

• Tweaks missing from API output. If a palette fetched via API looks flatter than what you saw in the creator, that's expected — the API ignores HSL adjustments.
• Wrong Tailwind version. The v3 and v4 outputs differ. Match the version selector to your project before copying.
• Color mode mismatch. oklch, hex, and hsl are all valid, but pick the one your project already uses to avoid mixing formats in one theme.

tints.dev was made by Simeon Griggs, built with Tailwind CSS, React Router, Headless UI, and HeroIcons, hosted on Cloudflare, with content in Sanity.io.