Tailwind color palette generator

Paste your brand color and get a complete 11-step scale, from 50 to 950, that looks at home next to the default Tailwind colors.

50–950 scale (OKLCH)

Export:

Tints

Shades

Tones

The scale is computed in OKLCH with fixed lightness targets for each step, so your brand-500 is as readable as Tailwind's own blue-500. Your exact input color is kept at the step closest to its lightness. Export a Tailwind v3 config, Tailwind v4 @theme variables, plain CSS custom properties or JSON design tokens, and check text contrast on every step.

Private by design

PaletteKit has no server-side processing. Colors, palettes and images stay in your browser; saved palettes live in local storage on this device only.

Popular palettes

Frequently asked questions

Does it work with Tailwind v4?

Yes. The export includes both a v3 tailwind.config.js block and v4 @theme CSS variables such as --color-brand-500.

Is PaletteKit free?

Yes. Every tool is free with no account, no watermark and no sign-up. Copy codes and download exports as often as you like.

Are my images and colours uploaded anywhere?

No. Everything runs in your browser. Photos you extract colours from and palettes you save never leave your device.

Can I use the colours commercially?

Yes. Colours and colour codes cannot be owned by us, and anything you create is yours to use in client work, apps, print and branding.

More free color tools