Color Picker

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

@Component({
  imports: [WrColorPicker, WrColorPickerTrigger, FormsModule],
})
export class MyComponent {
  protected readonly color = signal('#3969e2');
}

<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: 220, s: 0.74, l: 0.55, 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>