UI Colors

UI Colors provides a comprehensive online toolkit for working with Tailwind CSS color system. The main feature is a color generator that creates custom Tailwind color palettes from a single base color. Users input a hex value or use the color picker, and the tool automatically generates all 10 shade variants (50, 100, 200, up to 900) following Tailwind default lightness curve. This ensures the generated palette integrates seamlessly with Tailwind class naming conventions like bg-blue-500 or text-red-700. The site also hosts a color palette generator that suggests harmonious multi-color schemes optimized for UI design. A contrast checker tool evaluates foreground-background color pairs against WCAG accessibility guidelines, showing pass or fail for AA and AAA levels. The platform offers a Figma plugin that syncs Tailwind colors directly into design files, bridging the gap between design and code. A public API allows developers to programmatically generate Tailwind color palettes, with documentation showing REST endpoints for color conversion. The tool was built by Erik de Vries, a Netherlands-based developer who also created related tools like Shadcn Themes Generator for the shadcn/ui component library. The interface organizes colors into categories like Cards, Website, Branding, Dashboard, Components, and Charts, each showing example palettes applied to realistic UI elements. The tool supports exporting palettes as Tailwind config JavaScript objects, CSS custom properties, or SCSS variables.