Build a Color Palette Generator with AI

Build a single-page color palette generator as a static HTML/CSS/JS site. Use a dark theme with background #0f0f17 and a full-width layout. The accent color is #ec4899 (pink). The main view is a full-width horizontal strip of 5 color swatches that fills most of the viewport height (calc(100vh - 200px)). Each swatch is an equal-width vertical column showing its color as the background. On each swatch, display (in text that auto-contrasts with the background — white text on dark colors, dark text on light colors): the HEX code (large, centered), the RGB values below, and the HSL values below that. At the bottom of each swatch, show three action buttons: a lock/unlock toggle (lock icon made with CSS, when locked the color persists during regeneration), a copy button (copies HEX to clipboard with brief "Copied!" feedback), and an edit button that opens a color picker input (use the native HTML color input positioned invisibly, triggered by the button click). When a user edits a color via the picker, update that swatch in real time. Above the swatches, show a toolbar with: a large "Generate" button (accent color, or bind to spacebar with a hint "Press Space to generate") that generates a new 5-color palette, a harmony mode dropdown selector, and a format toggle (HEX / RGB / HSL / Tailwind). The harmony modes determine how colors are generated mathematically using HSL color space: - Random: 5 completely random colors with varied saturation (40-90%) and lightness (30-70%). - Complementary: pick a random base hue, generate colors at hue, hue+180, and three variations with different saturation/lightness. - Analogous: pick a random base hue, generate 5 colors within a 30-degree hue range with varied saturation and lightness. - Triadic: pick a random base hue, generate colors at hue, hue+120, hue+240 with 2 variations. - Split-complementary: base hue, hue+150, hue+210 with 2 variations. - Monochromatic: single random hue with 5 different saturation and lightness combinations. - Tetradic: hue, hue+90, hue+180, hue+270, plus one variation. When generating, locked colors stay fixed and unlocked colors are regenerated according to the selected harmony mode. Below the swatches, add an "Export" section with buttons: "Copy CSS Variables" (generates :root { --color-1: #xxx; --color-2: #xxx; ... }), "Copy Tailwind Config" (generates a colors object for tailwind.config.js), "Copy SCSS Variables" ($color-1: #xxx; format), and "Copy Array" (["#xxx", "#xxx", ...]). Add a Contrast Checker section below the export buttons. Show a 5x5 grid where each cell shows the WCAG contrast ratio between two palette colors. Color the cell green if the ratio meets WCAG AA (4.5:1 for normal text), yellow for AA Large (3:1), and red if it fails. Clicking a cell shows a preview of text in one color on the other color's background with the exact ratio displayed. Implement the relative luminance calculation per WCAG 2.1 spec: L = 0.2126*R + 0.7152*G + 0.0722*B (with linearized sRGB values), contrast ratio = (L1 + 0.05) / (L2 + 0.05). Add a Palette History section. Every generated palette is saved to localStorage (keep last 50). Show them as small horizontal strips (5 tiny color squares in a row) with timestamp. Clicking a history entry loads that palette back into the main view. Add a "Clear History" button and a "Favorite" star toggle per entry that pins favorites to the top. Make it responsive: on mobile (under 768px), the 5 swatches stack vertically as horizontal bars instead of columns. The toolbar wraps into two rows. The contrast checker grid scrolls horizontally. Add the spacebar shortcut for desktop and a prominent "Generate" floating action button for mobile. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].