Svelte Integration

npm i@CymbolTech/colorassembly

<script lang="ts">
  import { onMount } from 'svelte';
  import { loadColorAssembly, type ColorAssemblyAPI } from '@cymbol/colorassembly';
 
  let api: ColorAssemblyAPI | null = null;
  let color = '#6366f1';
  
  $: rgb = api ? api.transforms.hexToRgb({ hex: color }) : null;
  $: hsl = api && rgb ? api.transforms.rgbToHsl(rgb) : null;
 
  onMount(async () => {
    api = await loadColorAssembly();
  });
</script>
 
{#if api}
  <div class="color-picker">
    <div class="preview" style="background-color: {color}" />
    
    <input type="color" bind:value={color} />
 
    {#if rgb && hsl}
      <div>RGB: {rgb.r}, {rgb.g}, {rgb.b}</div>
      <div>HSL: {hsl.h.toFixed(0)}°, {hsl.s.toFixed(0)}%, {hsl.l.toFixed(0)}%</div>
    {/if}
  </div>
{:else}
  <div>Loading...</div>
{/if}

// stores/colorAssembly.ts
import { writable } from 'svelte/store';
import { loadColorAssembly, type ColorAssemblyAPI } from '@cymbol/colorassembly';
 
function createColorAssemblyStore() {
  const { subscribe, set } = writable<ColorAssemblyAPI | null>(null);
 
  loadColorAssembly().then(set);
 
  return { subscribe };
}
 
export const colorAssembly = createColorAssemblyStore();

<script lang="ts">
  import { colorAssembly } from '$lib/stores/colorAssembly';
  
  let color = '#6366f1';
  
  $: rgb = $colorAssembly ? $colorAssembly.transforms.hexToRgb({ hex: color }) : null;
</script>