uicolorslisted

Generate a full Tailwind color scale from a brand hex with UI Colors (uicolors.app) — a free browser tool (paid Pro tier and paid API exist) that turns one hexcode into a Tailwind-convention 50–950 scale, previews it on real UI mockups (cards, dashboards, shadcn/ui, charts, gradients), and is deep-linkable per hex (uicolors.app/generate/2563eb) — then wire it into tailwind.config.ts extend.colors, pick which steps carry text vs surfaces in light and dark mode, and contrast-check the pairs (WCAG AA 4.5:1 body / 3:1 large-text-and-UI). Use this whenever a task involves uicolors.app, turning a brand hex into a palette ("we have
shashidharbabu/claude-design-skills · ★ 0 · Web & Frontend · score 60

Install: claude install-skill shashidharbabu/claude-design-skills

# UI Colors UI Colors (uicolors.app, by Erik de Vries) is a **free browser tool** — no account needed to generate — that expands one hexcode into an 11-step, Tailwind-convention color scale (50–950) and previews it on realistic UI: tabs for Cards, Website, Branding, Dashboard, Components, shadcn/ui, Apps, Charts, Gradients, Logos, Headings. Deep-linkable: `uicolors.app/generate/<hex-without-#>`. Spacebar randomizes; shades are click-to-copy. The paid edges, honestly: **Pro** unlocks secondary/neutral/status scales and font pickers in the previewer; saving palettes needs sign-in; a **paid API** exists (`POST https://uicolors.app/api/v1/color-scales/tailwindcss3/generate/<hex>`, `x-api-key` header, returns hex + HSL per shade; its ToS bans building competing generators). There's also a free Figma plugin, and reference pages for every stock Tailwind color with click-to-copy HEX/HSL/OKLCH (`uicolors.app/tailwind-colors/<name>`). The core loop — brand hex in, full scale out — is free, and that's all this skill needs. ## Workflow — brand hex to shipped theme 1. **Have a brand hex first.** If there's no anchor color yet, this is the wrong tool — pick a palette with **ui-ux-pro-max** (192 curated palettes) or the direction skills (**frontend-design** / **taste-skill**), *then* come here to expand the chosen hex into a scale. 2. Open `https://uicolors.app/generate/2563eb` (your hex, no `#`). The tool **preserves your exact hex as one of the steps**, slotted at the l