UI Colors
What it is
UI Colors is a Tailwind CSS color generator for building and previewing color scales in interface designs. It can create success, info, warning, and error scales, along with a custom neutral scale for text, borders, and surfaces. Preview tabs cover cards, websites, branding, dashboards, components, Shadcn/ui, apps, charts, gradients, logos, and headings. Users can choose base text and heading fonts from a curated selection; custom font selection is an unlockable feature. The Tailwind Colors page covers Tailwind CSS v4 and v3, with click-to-copy values in OKLCH, hex, and HSL. It also lets users preview colors in UI examples and check accessible contrast ratios. The API takes a hex code and returns a scale from shade 50 to 950 in hex and HSL. API access uses a POST request and an x-api-key, and an API subscription is offered. UI Colors is available on the web, as an extension, and through an API. The site links to a Figma plugin. Pricing starts from $99, and a free plan is listed.
For and against
For
- Generates success, info, warning, and error scales.
- Adds a custom neutral scale for interface surfaces and text.
- Previews palettes across eleven design categories.
- Checks accessible contrast ratios in UI examples.
- API returns shades 50–950 in hex and HSL.
Against
- Custom font selection is an unlockable feature.
- API use is limited to 1,000 requests per minute.
- API terms prohibit competing color-scale generator products.
Who it suits
UI Colors suits designers and developers who need Tailwind color scales and want to preview them across interface examples. It also fits users who need color values in OKLCH, hex, or HSL, or want to generate scales through an API.
Getting started
- Open the UI Colors website.
- Use the generator to create color scales.
- Choose base text and heading fonts from the curated selection.
- Explore the preview tabs, including Components for status scales.
- For API access, use the POST request with an x-api-key and an API subscription.
- Open the linked Figma plugin if you want to use UI Colors in Figma.
Limits to know
The listed API rate limit is 1,000 requests per minute. The API terms prohibit using it to build a competing app, plugin, or browser extension whose primary purpose is generating color scales.
The verdict
Choose UI Colors to generate Tailwind scales and inspect them in a range of interface previews, with accessible contrast checks and multiple value formats. Look elsewhere if you need custom font selection without an unlock or API use beyond its rate limit.
Questions
Is there a free plan?
Yes. A free plan is listed.
How much does UI Colors cost?
Pricing starts from $99.
Which platforms are available?
UI Colors is listed for web, extension, and API. The maker’s site also links to a Figma plugin.
What formats can I copy from the Tailwind Colors page?
It provides click-to-copy OKLCH, hex, and HSL values for Tailwind CSS v4 and v3 colors.
What does the API return?
It accepts a hex code and returns a color scale from shade 50 to 950 in hex and HSL formats.
Who made UI Colors?
The privacy policy identifies UI Colors as a product built by Erik de Vries.
Facts on the record
- API
- The API accepts a hex code and returns a color scale from shade 50 to 950 in hex and HSL formats.uicolors.app · read 11 Oct 2026
- API access
- The API example uses a POST request and an x-api-key, and the page offers an API subscription.uicolors.app · read 11 Oct 2026
- API limit
- The API terms set a rate limit of 1,000 requests per minute.uicolors.app · read 11 Oct 2026
- API restriction
- The API may not be used to create a competing application, plugin, or browser extension whose primary purpose is generating color scales.uicolors.app · read 11 Oct 2026
- Color scales
- The generator supports success, info, warning, and error color scales, plus a custom neutral scale for text, borders, and surfaces.uicolors.app · read 11 Oct 2026
- Contrast
- The Tailwind Colors page says users can preview colors in real-world UI examples and check accessible contrast ratios.uicolors.app · read 11 Oct 2026
- Data processors
- The listed subprocessors are Supabase, Lemon Squeezy, Resend, and PostHog.uicolors.app · read 11 Oct 2026
- Data retention
- Website visitor data is stored for 14 months and pseudonymized where possible; legally required financial data is kept for at least seven years.uicolors.app · read 11 Oct 2026
- Data security
- The privacy policy says data is secured with measures such as encrypted storage where possible and secure TLS connections.uicolors.app · read 11 Oct 2026
- Design previews
- The generator lists design previews including cards, websites, branding, dashboards, components, charts, gradients, logos, and headings.uicolors.app · read 11 Oct 2026
- Figma plugin
- The maker’s site links to a UI Colors Figma plugin.uicolors.app · read 11 Oct 2026
- Fonts
- Users can choose fonts for base text and headings from a curated selection, and custom font selection is an unlockable feature.uicolors.app · read 11 Oct 2026
- Maker
- The privacy policy identifies UI Colors as a product built by Erik de Vries.uicolors.app · read 11 Oct 2026
- Neutral scale
- It can add a custom neutral color scale for text, borders, and surfaces.uicolors.app · read 11 Oct 2026
- Preview tabs
- The generator includes previews for Cards, Website, Branding, Dashboard, Components, Shadcn/ui, Apps, Charts, Gradients, Logos, and Headings.uicolors.app · read 11 Oct 2026
- Privacy and security
- The privacy policy says UI Colors uses encrypted storage where possible and secure TLS connections, alongside organizational measures to protect data.uicolors.app · read 11 Oct 2026
- Purpose
- UI Colors is a Tailwind CSS color generator for creating and visualizing colors in components and designs.uicolors.app · read 11 Oct 2026
- Status scales
- The generator can add success, info, warning, and error color scales and preview them in the Components tab.uicolors.app · read 11 Oct 2026
- Subprocessors
- The listed subprocessors are Supabase, Lemon Squeezy, Resend, and PostHog.uicolors.app · read 11 Oct 2026
- Support
- The privacy policy provides [email protected] for privacy questions and says data access requests receive a response within four weeks.uicolors.app · read 11 Oct 2026
- Tailwind colors
- The Tailwind Colors page covers Tailwind CSS v4 and v3 colors and provides click-to-copy OKLCH, hex, and HSL values.uicolors.app · read 11 Oct 2026