Color Picker

import { Component } from '@angular/core';
import { WrColorPicker, WrColorPickerTrigger } from 'ngwr/color-picker';

@Component({ imports: [WrColorPicker, WrColorPickerTrigger] })
export class MyComponent {}

<wr-color-picker [(value)]="color" />

<wr-color-picker [(value)]="color" [alpha]="false" />

<wr-color-picker
  [(value)]="color"
  [swatches]="['#3969e2', '#f51c6a', '#00a400', '#ffba00', '#fa383e', '#cbd5e1', '#8594a4', '#0f172a']"
/>

<button wrColorPickerTrigger
        [(value)]="color"
        [swatches]="palette">
  <span class="swatch" [style.background]="color()"></span>
  {{ color() }}
</button>

import { parseHex, toHex, rgbToHsl } from 'ngwr/color-picker';

const rgb = parseHex('#3969e2');        // { r: 57, g: 105, b: 226, a: 1 }
const hsl = rgbToHsl(rgb!);             // { h: 222.96, s: 0.744, l: 0.555, a: 1 }
const back = toHex(rgb!, true);         // '#3969e2ff'

<button type="button" wrColorPickerTrigger [(value)]="brand" #swatch="wrColorPickerTrigger">
  Brand colour
</button>

<!-- Anywhere else in the same template -->
<wr-btn (click)="swatch.open()">Pick a colour</wr-btn>
<span [style.color]="swatch.value()">{{ swatch.value() }}</span>