Build a Color Converter (HEX/RGB/HSL) with AI

Build a single-page Color Converter tool as a static HTML file with embedded CSS and JavaScript. No frameworks or dependencies. LAYOUT: - Dark theme (background #0d1117, text #c9d1d9) - Center-aligned content, max-width 700px - Header: "Color Converter" title with subtitle "HEX / RGB / HSL / CMYK — edit any format, all update live" - Main sections from top to bottom: Color Preview, Format Inputs, Contrast Checker, Color Name, Recent Colors COLOR PREVIEW: - Large swatch rectangle (100% width, 160px tall, rounded 12px) showing the current color - Checkerboard pattern behind it for when colors have transparency - Native HTML color picker input (type="color") positioned as a small button in the top-right corner of the swatch labeled "Pick" - Clicking the swatch itself also triggers the color picker FORMAT INPUTS: - Four cards in a 2x2 grid, each containing: HEX card: - Label "HEX" in small caps - Text input showing the hex value with # prefix (e.g., #3b82f6) - Support 3-digit shorthand (#abc) auto-expanding to 6-digit - Small copy button (clipboard icon) next to the input - Validate: only allow 0-9, a-f, A-F characters RGB card: - Label "RGB" - Three number inputs side by side for R (0-255), G (0-255), B (0-255) - Range slider below each input that matches the value - CSS string display below: rgb(59, 130, 246) - Copy button copies the CSS string HSL card: - Label "HSL" - Three inputs: H (0-360 degrees), S (0-100%), L (0-100%) - H input has a hue gradient slider background - S and L inputs have range sliders - CSS string display: hsl(217, 91%, 60%) - Copy button copies the CSS string CMYK card: - Label "CMYK" - Four inputs: C (0-100%), M (0-100%), Y (0-100%), K (0-100%) - Display string: cmyk(76%, 47%, 0%, 4%) - Copy button copies the string - When the user edits ANY input in ANY card, all other cards update immediately - Debounce updates by 50ms to avoid input lag - Invalid values show a red border on the input with no update until valid CONTRAST CHECKER: - Two rectangular boxes side by side: - Left box: current color background with WHITE text "Aa Sample Text" - Right box: current color background with BLACK text "Aa Sample Text" - Below each box show: - Contrast ratio (e.g., "4.53:1") - WCAG AA rating for normal text: "Pass" (green) or "Fail" (red) - WCAG AA rating for large text: "Pass" or "Fail" - WCAG AAA rating for normal text: "Pass" or "Fail" - Use the WCAG 2.1 relative luminance formula for contrast calculation - Thresholds: AA normal >= 4.5:1, AA large >= 3:1, AAA normal >= 7:1, AAA large >= 4.5:1 COLOR NAME: - Display the closest named CSS color (e.g., "dodgerblue", "coral", "mediumseagreen") - Include the full list of 148 CSS named colors - Show the exact named color swatch next to it and the delta (how close the match is) - If exact match, show "Exact match!" in green RECENT COLORS: - Horizontal row of small square swatches (32x32px) showing the last 12 colors used - Stored in localStorage - Click a swatch to load that color back into the converter - Small X button on hover to remove a color from history - "Clear All" link at the end COPY BEHAVIOR: - Each copy button shows a small "Copied!" tooltip for 1.5 seconds - Copy buttons are small icon-style buttons (not full-width) KEYBOARD SHORTCUTS: - Tab cycles between format inputs naturally - Enter in hex input triggers conversion - Ctrl+Shift+C copies the HEX value Make it responsive: on mobile, format cards stack to single column. Contrast boxes stack vertically. Recent colors wrap to two rows.