Pixel Art Color Ramp & Hue Shifting Tool

A professional-grade, single-file browser utility designed for game developers and pixel artists to generate, refine, and export custom color ramps.

Core Technical Features

• HSL-Based Ramp Generation: Dynamically create color ramps based on a single base color using incremental HSL (Hue, Saturation, Lightness) offsets.
• Advanced Control Panels: Individual controls for Hue-Shift per step, Saturation variation per step, and Lightness curves.
• Interactive Preview Grid: A live-updating swatch grid that displays the generated ramp, allowing users to see the color harmony in real-time.
• Export Formats: One-click copying for CSS Variables, HEX lists, and JSON configuration objects.
• Randomized Palette Seeds: An "Inspire Me" button that generates mathematically harmonious base colors and ramp settings for quick experimentation.
• Accessibility Overlay: A real-time contrast ratio calculator to ensure the foreground and background colors in the ramp adhere to accessibility standards.

UI/UX Layout

• Header: Contains the tool name and a brief instruction toggle for new users.
• Main Tool Area: A split-screen layout.
  • Left Sidebar: Contains the control knobs (sliders for steps, HSL offsets, and base color picker).
  • Right Panel: The primary workspace showing the color swatches with copy-to-clipboard functionality on each card.
• Bottom Section: A dedicated code-output box that dynamically updates whenever a slider is moved, displaying the CSS/JSON representation.

Aesthetic Specification

• Theme: Clean, professional "SaaS" light mode.
• Palette: Use a neutral gray-scale background (#F8FAFC) for the body, with crisp white containers (#FFFFFF) elevated by subtle drop-shadows (shadow-md).
• Accents: Use a soft, modern indigo (#4F46E5) for buttons and active states.
• Animations:
  • Use CSS transition: all 0.2s ease-in-out for all interactive elements.
  • Smooth fade-in animations for swatch cards upon generation.
  • Subtle hover-scale effects (1.02x) on color swatches to encourage interaction.

Technical Constraints

• No Local Storage: All calculations must be handled in-memory. State is reset upon refresh.
• Vanilla Architecture: No build steps. All CSS, HTML, and JS must reside in one file. CDN links (Tailwind CSS, FontAwesome) are permitted.
• Sandboxed Compatibility:
  • Avoid alert() or prompt(). Use custom modal components that render within the document flow.
  • All links must use target="_blank" and rel="noopener noreferrer".
• Responsive Design: The sidebar must collapse into a top-bar component on screens smaller than 768px, ensuring the color ramp remains visible.