Skip to tool

Your brand color. Ready for Tailwind.

Generate a perceptual shade ramp, preview semantic color roles, and copy a Tailwind CSS v4 theme. Keep your exact brand color as the primary token.

Your palette, in context

Free · no signup
Or start from an image

JPG, PNG or WebP · up to 15 MB · processed in this browser, never uploaded.

Keep your brand color. Build the roles around it.

Changing theme regenerates the roles. Use Undo to restore your edits.

One saved palette on this browser. No account or cloud storage.

LIVE INTERFACE SAMPLE

Make room for
your next idea.

See how your colors work together on text, surfaces, and a primary action.

Primary action
SECONDARY SURFACEA little contrast.
A clear direction.

Checks apply to these pairs at the normal-text AA threshold of 4.5:1. A palette does not certify a whole page. Button and card text use black or white for contrast.

50–950 is a generated OKLCH ramp, not the official Tailwind palette. Your exact primary color is exported separately.

Inspect exported code

Generate colors for Tailwind CSS v4

Enter your brand hex, adjust the five roles, and select Tailwind v4 before copying or downloading. The export includes an @import "tailwindcss"; statement and an @theme block with --color-* variables. Use the file as your Tailwind CSS entrypoint, or merge its theme block into your existing entrypoint without duplicating the import.

Use roles in your components

Apply bg-surface text-ink to your page and bg-primary text-on-primary to your primary button. Secondary and accent roles also include matching black-or-white text tokens. Check the resulting components in context, especially hover states and overlays.

How the 50–950 ramp is made

HueWiz generates eleven shades by varying OKLCH lightness and chroma. Colors outside sRGB are brought into gamut by reducing chroma. The ramp is an approximation for your project, not a copy of Tailwind's official palette. Your exact starting color remains primary; it is not forced to be shade 500.

This export targets v4. Existing v3 projects use a JavaScript configuration instead. Named pages in the color library include explicitly labeled v3 examples. See Tailwind's official color documentation.

FROM A PHOTOImage palette generator →Extract colors locally, then turn them into an editable website palette. FOR READABLE TEXTContrast checker →Check a foreground and background against AA and AAA text thresholds. FROM COLOR TO CODETailwind color generator →Build a shade ramp and export Tailwind v4 theme variables.