Palette

Palette is a web-based tool designed to streamline the process of generating custom color palettes for Tailwind CSS projects. It allows users to create a complete set of color tokens—including neutral shades and custom accent colors—by simply defining a light-mode background and a dark-mode background, then adding one or more primary colors. The tool automatically computes a full range of lightness steps (50 to 900) for each color, following the Tailwind convention, and outputs ready-to-use configuration code that can be pasted directly into a `tailwind.config.cjs` file. The workflow begins with the user choosing a background color for light mode (e.g., `#fafafa`) and a background color for dark mode (e.g., `#222222`). Palette then calculates the corresponding foreground text colors and ensures adequate contrast by displaying AA and AAA accessibility ratings. The user can see these ratings in real time, which helps maintain readability across themes. Next, the user adds custom colors by specifying a name (e.g., "blue") and a base hex value (e.g., `#2196f3`). The tool automatically generates ten harmonious shades—from 50 (lightest) to 900 (darkest)—plus a `DEFAULT` variant. These shades are computed using interpolation and brightness adjustments to match Tailwind's expected lightness curve. Beyond single accent colors, Palette supports the addition of multiple colors, each with its own name. This lets designers build a complete brand palette or UI color system. The output code includes a `neutral` palette that mirrors the light and dark background colors, ensuring a consistent set of grays. For example, if the light background is `#fafafa`, neutral 50 matches that value, and neutral 900 matches the dark background. This integration means the background and foreground tok