Coolors to Tailwind converter

Tailwind CSS v4 keeps its design tokens in CSS. Every variable in the --color-* namespace inside @theme becomes a color for the utilities, and Tailwind also writes it out as an ordinary CSS variable. For the palette in the example link the block is:

@theme {
  --color-1: #264653;
  --color-2: #2a9d8f;
  --color-3: #e9c46a;
  --color-4: #f4a261;
  --color-5: #e76f51;
  --color-primary: #264653;
  --color-secondary: #2a9d8f;
  --color-accent: #e9c46a;
}

Put it in your main stylesheet after @import "tailwindcss";. From then on bg-1, text-3, border-accent and fill-primary paint with the palette, and var(--color-primary) works in plain CSS. The colors join Tailwind's own; to keep yours alone, add --color-*: initial; as the block's first line, which the Tailwind docs give as the way to clear the default colors. The full story, with dark mode, is in Tailwind v4 @theme colors from a palette.

The CSS, SCSS and JSON tabs give the same colors for projects without Tailwind; every format is described in Export formats.

Tailwind takes any name inside the namespace, and the name becomes the utility: --color-brand gives bg-brand. The converter numbers the colors because a Coolors link carries no names, and adds primary, secondary and accent so the first three read as roles. Rename them before you commit the block, and name by job rather than by hue: --color-surface, --color-ink, --color-brand. A utility called bg-teal is wrong the day the palette changes, while bg-brand stays right.

The order of a Coolors palette is only the order it was made in. If the second color should be the brand, drag it to first place in Recolor before you copy, or swap the lines by hand. On a real page the order matters: Recolor gives swatch 1 to the page's main color, as how many colors a website palette needs explains.

Tailwind's own palette is written in oklch(): all 26 default color scales in the theme file of the installed Tailwind are. Your colors do not have to follow. @theme takes any CSS color, and a hex code paints the same as its oklch() value. The converter keeps hex because that is what Coolors gives, and a hex code is easy to compare with the design file.

oklch() pays off when you build shades by hand: equal steps in its lightness look like equal steps to the eye, which hex codes do not. What OKLCH is shows how to read the three numbers and when to switch.

Coolors can export to Tailwind itself, from Export and then Tailwind in its generator, with v3 or v4 and hex, OKLCH, RGB or HSL. On October 8, 2026 it turned each color of the example palette into an 11-step scale from 50 to 950, named after the color (--color-charcoal-blue-50 to -950), as lines without an @theme block around them, and none of the palette's own five hex codes was among the values: the scales are new colors built from each hue.

That is the better choice when you want a full scale per color, as Tailwind's defaults have. This converter is for the other case: the palette's own colors, exactly, as named tokens, ready to paste. To go the other way, Recolor's Export panel has a Coolors tab, and the URL format explains why the two links are interchangeable. The full walk from a Coolors palette to code, with the check on your own site, is in Turn a Coolors palette into CSS variables.

A palette that looks right as five stripes can still fail on a page: text on the brand color may not read, and the heaviest color may land on the wrong surfaces. Two checks take a minute. The contrast matrix grades every pair of the palette against WCAG 2.2. See it on a page, under the tool, opens Recolor with the colors on its sample page; paste your site's address there and the whole site repaints in them, as previewing a palette on a real website describes.