Vanilla JavaScript

npm i@CymbolTech/colorassembly

import { loadColorAssembly } from '@cymbol/colorassembly';
 
// Initialize
const api = await loadColorAssembly();
 
// Transform colors
const rgb = api.transforms.hexToRgb({ hex: '#6366f1' });
const hsl = api.transforms.rgbToHsl(rgb);
 
console.log('RGB:', rgb); // { r: 99, g: 102, b: 241 }
console.log('HSL:', hsl); // { h: 238, s: 84, l: 67 }

<!DOCTYPE html>
<html>
<head>
  <title>Color Picker</title>
  <style>
    .preview { width: 200px; height: 200px; border-radius: 8px; }
    .color-info { margin-top: 16px; font-family: monospace; }
  </style>
</head>
<body>
  <div id="app">
    <div class="preview" id="preview"></div>
    <input type="color" id="colorInput" value="#6366f1">
    <div class="color-info" id="colorInfo"></div>
  </div>
 
  <script type="module">
    import { loadColorAssembly } from '@cymbol/colorassembly';
 
    const api = await loadColorAssembly();
    const preview = document.getElementById('preview');
    const input = document.getElementById('colorInput');
    const info = document.getElementById('colorInfo');
 
    function updateColor(hex) {
      preview.style.backgroundColor = hex;
      
      const rgb = api.transforms.hexToRgb({ hex });
      const hsl = api.transforms.rgbToHsl(rgb);
      
      info.innerHTML = `
        <div>HEX: ${hex}</div>
        <div>RGB: ${rgb.r}, ${rgb.g}, ${rgb.b}</div>
        <div>HSL: ${hsl.h.toFixed(0)}°, ${hsl.s.toFixed(0)}%, ${hsl.l.toFixed(0)}%</div>
      `;
    }
 
    input.addEventListener('input', (e) => updateColor(e.target.value));
    updateColor(input.value);
  </script>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/@cymbol/colorassembly/dist/wasm_exec.js"></script>
<script type="module">
  import loadColorAssembly from 'https://cdn.jsdelivr.net/npm/@cymbol/colorassembly/dist/index.js';
  
  const api = await loadColorAssembly({
    wasmPath: 'https://cdn.jsdelivr.net/npm/@cymbol/colorassembly/dist/color-assembly.wasm'
  });
  
  // Use api
</script>