UI Colors

Tailwind palette generator that previews the scale on real UI before you commit

Tier B · UsefulColor ToolGeneratorTooluicolors.app

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.

For an agent

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.

Install command, framework, licence and component list.

Facts

License: Proprietary / all rights reserved
Pricing: Freemium, Paid, Subscription
Framework: React, Not applicable
Styling: Tailwind CSS, CSS custom properties
Distribution: Web app / online tool, Figma plugin, Public HTTP API
Platform: Web
Content type: Design tokens / theme files, Code
Agent readiness: Public API without auth, Login required, Client-rendered shell
Accessibility: Contrast checked
Maturity: Actively maintained
Pricing detail: Free tier with a paid Unlock for extras such as custom fonts; a separate paid API subscription. Exact figures not shown on the pages fetched (/pricing returns 404).

Notable for

live preview on shadcn/ui components
brand plus neutral plus status ramps
Figma plugin
keyed JSON API
companion site-contrast checker

Provenance

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)

Also in Color

uicolors.appTier B