oklch-pickerPlaygroundGitHub

Angular

Everything the picker does, in Angular, on one page. The value binding is [value] and (valueChange), the usual Angular pair.

Install

npm install @oklch-picker/angular

The stylesheet lives in the shared core, which the adapter already depends on. Import it once, anywhere.

import "@oklch-picker/core/styles.css";
This is the result, feel free to drag and experiment

The basics

A controlled picker. The value you get back is always canonical and always in gamut.

import { Component, signal } from "@angular/core";
import { ColourPickerComponent } from "@oklch-picker/angular";
import "@oklch-picker/core/styles.css";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [ColourPickerComponent],
  template: `
    <oklch-colour-picker [value]="colour()" (valueChange)="colour.set($event)" />
  `,
})
export class ExampleComponent {
  readonly colour = signal("oklch(0.7 0.15 255)");
}

Presets

Swatches under the sliders. Clicking one commits it, so it joins the recent colours too.

<oklch-colour-picker
  [value]="colour()"
  [presets]="['oklch(0.75 0.16 145)', 'oklch(0.7 0.15 255)']"
  (valueChange)="colour.set($event)"
/>

A wider gamut

P3 and Rec. 2020 as output spaces, not decoration: the slider reaches further and the value is clamped to the space you chose.

import { P3 } from "@oklch-picker/core/gamuts";

// A gamut is an object, so it is bound as a property.
export class ExampleComponent {
  readonly P3 = P3;
}

// <oklch-colour-picker [value]="colour()" [gamut]="P3" (valueChange)="colour.set($event)" />

Letting the user switch space

A segmented control over the output space. Off by default, since most pickers target one.

<oklch-colour-picker
  [value]="colour()"
  [gamut]="gamut()"
  [gamutChoices]="[SRGB, P3, REC2020]"
  [parts]="{ gamutSwitch: true }"
  (valueChange)="colour.set($event)"
  (gamutChange)="gamut.set($event)"
/>

Alpha

On by default. An opaque colour is unchanged in every format, so the alpha forms appear only when a colour is actually transparent.

<oklch-colour-picker [value]="colour()" [parts]="{ alpha: false }" (valueChange)="colour.set($event)" />

Storing recent colours yourself

The picker keeps a list per session. Pass one in to store them in a backend or share them between pickers.

<oklch-colour-picker
  [value]="colour()"
  [recents]="recents()"
  (valueChange)="colour.set($event)"
  (recentsChange)="save($event)"
/>

On a server

The markup the server sends is the finished picker, not a shell that fills in on hydration.

import { renderApplication } from "@angular/platform-server";

await renderApplication(bootstrap, { document });

Where next