UI Colors is a comprehensive suite of web-based design utilities built by Erik de Vries, primarily focused on simplifying the creation and management of color palettes for Tailwind CSS projects. It serves as an intuitive platform for developers and designers to generate, refine, and preview color scales without needing to manually calculate shade variations. By inputting a base color, users can instantly produce a full scale of shades ranging from 50 to 950, fully compatible with Tailwind CSS versions 3 and 4.

The tool functions by providing a visual interface where users can manipulate primary brand, neutral, and status colors. It includes real-time previews across various UI elements such as dashboards, cards, and charts. Users can lock specific colors, experiment with color harmony settings, and toggle through different font pairings to ensure that their chosen color palettes complement their typography selections. The platform also includes a dedicated API that allows developers to integrate color scale generation directly into their own workflows or applications.

Some of the key features are:

• Custom Color Generator: Effortlessly create full color scales from 50 to 950 using any base hex code.
• Real-time UI Preview: Visualize selected palettes on actual components like buttons, inputs, and cards.
• Tailwind Compatibility: Access all standard Tailwind CSS v3 and v4 color palettes with click-to-copy functionality for OKLCH, hex, and HSL codes.
• Support for Status Colors: Easily add and customize semantic color scales for success, warning, and error states.
• Typography Integration: Experiment with curated font pairings alongside your color schemes.
• API Access: Utilize a dedicated API to programmatically generate color scales for external projects.
• Figma Integration: Leverage a companion Figma plugin to sync design tokens and colors directly within your design files.
• Color Harmony Controls: Automatically adjust color harmonies to ensure visual consistency and balance.

To use the tool, users navigate to the generator interface and input a base hex code to start creating a palette. The platform automatically calculates the remaining shades, which can then be further adjusted or refined using the manual editing controls. Users can save their palettes for future reference or export the resulting colors into their development projects. The integrated preview mode allows users to see how these changes affect the overall look and feel of various interface components, making it an essential utility for creating professional, consistent design systems.

Some common use cases include:

• Generating cohesive color systems for new web applications that require custom branding beyond standard defaults.
• Quickly creating secondary and status color scales to support dark mode or accessible UI designs.
• Standardizing design tokens across a team by importing generated colors into Figma via the official plugin.
• Building automated build pipelines that utilize the UI Colors API to generate dynamic color themes for user-facing dashboards.