Tailwind CSS Custom Color Palette Generator

Overview

A web-based utility for developers to generate a full 10-shade scale (50-950) from a single base color. The application focuses on speed, accessibility (WCAG compliance), and direct code integration.

Layout Structure

• Header: Contains the tool name and an "Export Config" button.
• Primary Input Section: A full-width row featuring a text input for hex codes and a color picker component.
• Preview Grid: A dynamic grid displaying the 10 generated swatches. Each swatch shows the scale name (e.g., 500), the hex code, and a toggle for white/black text to verify readability.
• Sidebar/Bottom Panel: Real-time code preview window showing the tailwind.config.js export structure.

Design System

• Color Palette: Neutral gray backgrounds (#F9FAFB) with white card backgrounds (#FFFFFF) to emphasize the generated colors.
• Typography: Sans-serif, monospaced font for hex codes to improve readability.
• Animations:
  • Hover effects on swatches (slight scale up).
  • Smooth transition animations when the primary color is updated.
  • Notification toast when code is copied to the clipboard.

Interactive Features

1. Dynamic Shade Calculation: Real-time generation of 10 shades using HSL interpolation.
2. Contrast Checker: Built-in functionality to indicate if a specific swatch passes WCAG accessibility standards for text.
3. Quick Copy: One-click copy for individual hex codes and the entire configuration object.
4. Export Options: Dropdown to toggle between standard JS objects or Tailwind CSS variable formats.
5. History Tracking: A localized list of previously generated palettes for quick iteration.