Palette

Palette is a web-based tool that helps developers create a full color system for Tailwind CSS projects. You start by selecting your light mode and dark mode background colors. The tool then automatically generates a complete 10-shade neutral palette based on these choices, ensuring perfect contrast ratios for accessibility. You can also add and name custom accent colors, which Palette expands into their own full set of shades. The final output is a ready-to-use Tailwind config.js code block that you can copy and paste directly into your project.

What makes Palette special is its focus on accessibility and practical workflow integration. It calculates and displays WCAG (AA and AAA) contrast scores in real-time as you choose colors, so you know your palette will be readable. The tool is built with the same technologies it supports, like Vite and Tailwind, and it outputs clean, production-ready code. It handles the tedious math of creating harmonious color scales, letting you focus on design instead of manual hex code adjustments.

This tool is a huge time-saver for web developers and designers who use Tailwind CSS. It's perfect for quickly prototyping new projects, ensuring brand colors meet accessibility standards, or maintaining consistency across a design system. Instead of manually building out each color shade, you get a complete, accessible palette and config file in seconds, which is especially useful for freelancers, agencies, and product teams building accessible web applications.