Styling · oklch-picker

@oklch-picker/core/styles.css is a starting point, not a requirement. Every element has a stable class name, so you can skip it entirely and write your own.

ColoursMetrics

.oklch-picker {
  --okp-text: #1a1a1a;
  --okp-text-muted: #6b6b6b;
  --okp-line: #d8d8d8;
  --okp-surface: #ffffff;
  --okp-warn: #9a6b00;
  --okp-focus: #2f6fd0;
  --okp-thumb: #fff;
  --okp-thumb-line: rgb(0 0 0 / 0.55);
  --okp-segment-selected: #1a1a1a;
}

.oklch-picker {
  --okp-gap: 10px;
  --okp-radius: 6px;
  --okp-track-height: 12px;
  --okp-chart-height: 34px;
  --okp-chart-large-height: 180px;
  --okp-side-by-side-width: 560px;
  --okp-rail-width: 152px;
  --okp-thumb-size: 16px;

  /* A native range thumb is inset by half its width at each end, so
     everything positioned by value is inset to match. Change it only
     alongside --okp-thumb-size. */
  --okp-inset: calc(var(--okp-thumb-size) / 2);

  /* How strongly reference-gamut outlines are drawn on the chart. */
  --okp-boundary-opacity: 0.45;
}

The --okp-text … --okp-focus colours arelight-dark() pairs by default, so override them with a plain colour to pin one, or your own light-dark() pair to keep both schemes.

Colour scheme

It follows the system colour scheme by default. Setdata-theme="light" or data-theme="dark" on the root element to pin one. That is what this site's own theme toggle does, so the pickers below follow the button in the header.

Renaming the classes

Every class is prefixed, and the prefix is a prop. Change it and the stylesheet no longer applies, which is the point when you are writing your own:

ReactVueSvelteSolidAngularQwikAstroNo framework

<ColourPicker value={colour} onChange={setColour} classPrefix="brand-picker" />

<ColourPicker v-model="colour" class-prefix="brand-picker" />

<ColourPicker bind:value={colour} classPrefix="brand-picker" />

<ColourPicker value={colour()} onChange={setColour} classPrefix="brand-picker" />

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

<ColourPicker
  value={colour.value}
  onChange$={$((c: string) => (colour.value = c))}
  classPrefix="brand-picker"
/>

<oklch-picker class-prefix="brand-picker"></oklch-picker>

<oklch-picker class-prefix="brand-picker"></oklch-picker>

className adds a class to the root element without replacing the prefix, for the common case of one-off spacing.