UI Colorgen

UI Colorgen: Simplify Your shadcn/ui Theme Customization

UI Colorgen is a dedicated user interface application crafted to streamline the color setup process for shadcn/ui. It presents a comprehensive list of TailwindCSS colors, available in hex, RGB, and HSL formats. Users can interactively update color variables using an integrated Color Picker, select their desired color format, and even add custom variables, making theme customization for shadcn/ui projects more accessible and efficient.

Features:

• TailwindCSS Color Listing: View a comprehensive list of TailwindCSS colors in hex, RGB, and HSL formats.
• Interactive Color Picker: Visually update color variables using an intuitive color picker tool.
• Custom Variable Addition: Enhance your color palette by adding your own custom color variables to the list.
• Initial Color Selection: Define a starting color for your newly added custom variables.
• Format Selection: Choose your preferred color output format (hex, RGB, or HSL) to match your project's needs.
• CSS Variable Generation: Automatically generate CSS custom properties for the root element in your globals.css file.
• Tailwind Config Generation: Create the necessary color configuration section for your tailwind.config.js file.
• Click-to-Copy: Easily copy color values in your selected format directly from the interface.

Summary:

UI Colorgen simplifies theme customization for shadcn/ui by providing a visual interface to select, modify, and manage colors. It displays TailwindCSS colors in multiple formats, allows for adjustments via a color picker, and supports custom variables. The tool then generates the necessary CSS variables for globals.css and the color configuration for tailwind.config.js, accelerating your development workflow when working with shadcn/ui themes.