Interactive Color Palette Card

The code

Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="color-card">
  <div class="color-preview" id="colorBox">
    <span class="color-val" id="hexText">#6366f1</span>
  </div>
  <div class="picker-body">
    <div class="picker-label">
      <span>Adjust Hue</span>
      <span id="hueDeg">239°</span>
    </div>
    <input type="range" min="0" max="360" value="239" class="hue-slider" id="hueRange" />
    <button class="copy-hex-btn" id="copyHex">Copy HEX Code</button>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same component, then ask it to adapt the colours, text or framework to your project.

Create an interactive color palette card with an HSL hue range slider and 1-click copy in HTML, CSS and vanilla JavaScript.

Requirements:
- Card container with large color preview swatch at top displaying current HEX code.
- Continuous rainbow gradient track for the hue range input slider (0 to 360 degrees).
- Mathematical HSL-to-HEX conversion that updates the preview and hex badge dynamically on slider input.
- Copy HEX button that writes to navigator.clipboard and provides visual feedback.

Return one HTML file with <style> and <script> tags.

How to build it, step by step

1. 1

   Style the range slider with a multi-stop rainbow linear-gradient background.

2. 2

   Calculate RGB from HSL values inside an input event handler.

3. 3

   Update DOM background and formatted hex string in real-time.

4. 4

   Use navigator.clipboard.writeText with temporary button state change.

Customisation tips

• Keep saturation and lightness constant while varying hue for harmonious palette exploration.
• Display degree units alongside the slider for precise tuning.

More components