PALETTE GENERATOR

Standalone, zero-dependency JavaScript implementation powering this tool. Free to inspect, copy, and build upon.

let palette = [
      { hex: '#ff2200', locked: false },
      { hex: '#ff7700', locked: false },
      { hex: '#ffcc00', locked: false },
      { hex: '#00c896', locked: false },
      { hex: '#00e5ff', locked: false }
    ];

    const wrap = document.getElementById('palette-wrap');
    const codeOut = document.getElementById('code-output');
    const toast = document.getElementById('toast');

    function showToast(msg) {
      toast.textContent = msg;
      toast.classList.add('show');
      setTimeout(() => toast.classList.remove('show'), 2000);
    }

    function getRandomHex() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    function generatePalette() {
      palette.forEach(c => {
        if (!c.locked) {
          c.hex = getRandomHex();
        }
      });
      render();
    }

    function render() {
      wrap.innerHTML = '';
      palette.forEach((c, idx) => {
        const col = document.createElement('div');
        col.className = 'color-col';
        col.style.backgroundColor = c.hex;

        col.innerHTML = `
          <button class="btn-lock ${c.locked ? 'locked' : ''}" onclick="toggleLock(${idx})">
            ${c.locked ? '🔒' : '🔓'}
          </button>
          <span class="col-hex" onclick="copyHex('${c.hex}')">${c.hex}</span>
        `;
        wrap.appendChild(col);
      });

      updateCodeOutput();
    }

    window.toggleLock = function(idx) {
      palette[idx].locked = !palette[idx].locked;
      render();
    };

    window.copyHex = function(hex) {
      navigator.clipboard.writeText(hex);
      showToast(`Copied ${hex}!`);
    };

    function updateCodeOutput() {
      const cssVars = `:root {\n` + palette.map((c, i) => `  --color-${i + 1}: ${c.hex};`).join('\n') + `\n}`;
      codeOut.textContent = cssVars;
    }

    document.getElementById('btn-generate').addEventListener('click', generatePalette);

    document.getElementById('btn-copy-css').addEventListener('click', () => {
      navigator.clipboard.writeText(codeOut.textContent);
      showToast('CSS Variables copied!');
    });

    document.getElementById('btn-copy-tailwind').addEventListener('click', () => {
      const tw = `colors: {\n` + palette.map((c, i) => `  color${i + 1}: '${c.hex}',`).join('\n') + `\n}`;
      navigator.clipboard.writeText(tw);
      showToast('Tailwind Config copied!');
    });

    window.addEventListener('keydown', e => {
      if (e.code === 'Space' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
        e.preventDefault();
        generatePalette();
      }
    });

    generatePalette();