UI Colors
Tailwind palette generator that previews the scale on real UI before you commit
UI Colors turns a single brand colour into a full Tailwind-style 50-950 scale, alongside neutral and status (success, warning, error) ramps and a font pairing. Its point of difference is the preview: the generated palette is rendered live on cards, marketing pages, dashboards, shadcn/ui components, charts, gradients and headings, so you judge a ramp in context rather than as a strip of swatches. There is a Figma plugin, a separate site-contrast checker, a shadcn/ui theme generator, and a paid HTTP API that returns the same scales as JSON. Some features, including custom font selection, sit behind a paid unlock.
Send a human here when they need to *see* a palette on shadcn/ui components before choosing it; the browsing experience is the product. For machine generation prefer tints.dev, whose API is free and needs no key — the UI Colors API is POST-only to /api/v1/color-scales/tailwindcss3/generate/{hex}, requires an x-api-key header on a paid subscription, and its terms forbid using it to build a competing scale generator. The site is a client-rendered app, so scraping the page for hexes will not work.
Why it is here. It solved the real failure mode of palette tools — a ramp that looks fine as swatches and falls apart as an interface — by putting the preview first.
- live preview on shadcn/ui components
- brand plus neutral plus status ramps
- Figma plugin
- keyed JSON API
- companion site-contrast checker
Verified 2026-08-16. HTTP 200. https://uicolors.app (fetched), https://uicolors.app/generate (fetched), https://uicolors.app/api (fetched, endpoint shape, x-api-key and competing-use restriction), https://uicolors.app/pricing (404)
