ruchira
// DESIGN TOOL

Tailwind v4 OKLCH palette generator

Generate a perceptually even 50–950 colour scale from one brand colour, in OKLCH, with Tailwind v4 @theme tokens, CSS variables and contrast checks.

  • Free
  • No sign-up
  • Private: runs in your browser
// HOW IT WORKS

4 steps, no sign-up.

Built and maintained by Ruchira Sachinthana. Spotted a bug or want a feature? Tell me.

  1. 01Enter your brand colour as hex, RGB or OKLCH.
  2. 02Adjust the hue shift and chroma until the scale looks right.
  3. 03Check the contrast ratios for text on each shade.
  4. 04Copy the Tailwind v4 @theme block, CSS variables or JSON.
// FAQ

Tailwind palette generator: questions, answered.

Something else? Ask on WhatsApp.

OKLCH is perceptually even: the same lightness step looks like the same step on every hue. Tailwind v4's own palette is defined in OKLCH.

More free tools

All tools
DESIGNCSS clamp() calculator

Generate fluid font sizes and spacing with CSS clamp(). Set the minimum and maximum, preview across screen widths and build a full type scale.

RUNS IN YOUR BROWSER
DESIGNFavicon generator

Create every favicon and app icon you need from one image, emoji or letter: favicon.ico, Apple touch icon, PWA and maskable icons, manifest and HTML.

RUNS IN YOUR BROWSER
DESIGNSVG optimiser

Shrink SVG files with SVGO without visible changes. Compare before and after, then copy the markup, a data URI or a React component.

RUNS IN YOUR BROWSER
// CUSTOM TOOLS

Need a tool like this built for your team?

Chat on WhatsApp