Hiding parts

Everything except the sliders is optional.

ReactVueSvelteSolidAngularQwikAstroNo framework

<ColourPicker
  value={colour}
  onChange={setColour}
  parts={{ charts: false, name: false, notice: false }}
/>

<ColourPicker v-model="colour" :parts="{ charts: false }" />

<ColourPicker bind:value={colour} parts={{ charts: false }} />

<ColourPicker value={colour()} onChange={setColour} parts={{ charts: false }} />

<oklch-colour-picker
  [value]="colour()"
  (valueChange)="colour.set($event)"
  [parts]="{ rgbInput: true, hexInput: true }"
/>

<ColourPicker
  value={colour.value}
  onChange$={$((c: string) => (colour.value = c))}
  parts={{ rgbInput: true, hexInput: true }}
/>

<oklch-picker
  parts='{"rgbInput": true, "hexInput": true}'
></oklch-picker>

<oklch-picker parts='{"charts": false}'></oklch-picker>

What each one covers

Part	Default	Covers
`charts`	on	The gamut plots, large or thin
`preview`	on	The swatch in the footer
`oklchInput`	on	The editable `oklch()` field
`rgbInput`	off	The editable `rgb()` field
`hexInput`	off	The editable hex field
`alpha`	on	The alpha slider
`gamutLines`	on	Dashed outlines of narrower spaces, with their labels
`name`	on	The colour name in the footer
`notice`	on	The out-of-gamut message
`recents`	on	The recent colours row
`gamutSwitch`	off	The output space switcher

preview, the three value fields, and name make up the footer. Turning all of them off removes it entirely. Presets are controlled by the presets prop itself.

The value fields

The picker shows an editable oklch() field by default. Turn on as many of the three as you want. Each accepts anysupported format whichever one it displays, so pasting a hex into theoklch() field works.

All three fields at once. Type any format into any of them.

The hex field was on by default in 1.0 and is off from 1.1. Hex is sRGB only, so it cannot carry a P3 or Rec. 2020 colour at all, which makes it a poor default for a picker whose point is the gamut. Passparts={{ hexInput: true }} to keep it.

The rgb() field has the same limit, and is off for the same reason. In a wider output space both show the nearest sRGB colour, not the one the picker holds, while the oklch() field shows the value as stored. See Wider gamuts.

Alpha

OKLCH carries alpha, so the picker has a fourth slider for it, on by default. Without it a value passed in with transparency would come back opaque. Drag it left and the checkerboard shows through.

A colour that arrives partly transparent.

An opaque colour is unchanged in every format, and dragging back to fully opaque drops the alpha rather than emitting / 1.

The same picker with the alpha slider off.

Sliders only

Everything off, which is as small as the picker gets:

Three sliders and nothing else.

No charts

Footer kept, plots dropped.