What it is

Tailwind CSS colour generator: paste a hex and it builds the full numbered shade ramp, then previews it on realistic components — cards, dashboards, charts — rather than bare swatches. Adds success, warning and error scales plus a custom neutral, and exports palettes for a Tailwind config.

Why it earns a slot

The standard fix for 'my brand colour is not one of Tailwind's'. It generates a ramp with sane lightness steps so bg-brand-50 through bg-brand-950 behave like the built-in palettes.

Know before you commit

Generated ramps are mathematically even, not perceptually even — eyeball the middle shades against a real background, especially for yellows, greens and cyans.

Field notes

0 from the community

Sign in to add a field note. Reading is always open.

Loading notes…

Field check

Unverified

Sign in to confirm this entry is still accurate.

Pricing snapshot

Free · optional Pro upgrade

Snapshots move fast — verify at checkout, and post a field note if it changed.

Drop into your Lovable chat

Evaluate uiColors (https://uicolors.app) for this project, then use it only if it fits what we are already building.
Context: Tailwind palette generator. Tailwind CSS colour generator: paste a hex and it builds the full numbered shade ramp, then previews it on realistic components — cards, dashboards, charts — rather than bare swatches. Adds success, warning and error scales plus a custom neutral, and exports palettes for a Tailwind config.
Reviewer notes (general, not written for this codebase): The standard fix for 'my brand colour is not one of Tailwind's'. It generates a ramp with sane lightness steps so bg-brand-50 through bg-brand-950 behave like the built-in palettes.
Watch out for: Generated ramps are mathematically even, not perceptually even — eyeball the middle shades against a real background, especially for yellows, greens and cyans.
Pricing: Free · optional Pro upgrade
Rules: treat the notes above as background only. Do not assume a theme, style, layout or feature that is not already in this project — inspect the existing code first and ask me before changing visual direction.

/api/public/tools/uicolors