pixi-silk/ui/color

Colour pickers: wheels, rings, OKLCH, channel sliders.

import { ChannelSliders, ColorModel, ColorPicker, ColorSlider } from 'pixi-silk/ui/color';

Classes#

Class	Description
ChannelSliders	A stack of ColorSliders for one colour model, with optional letter labels.
ColorModel	The colour every picker edits. Stored as HSV + alpha (so hue survives greys and black), readable and writable as hex, RGB and OKLCH. Bind several pickers to one model and they stay in sync.
ColorPicker	Base of the pickers. It binds to a ColorModel and turns presses into edits of one part at a time: a drag keeps editing that part even outside it. Handles animate towards the model. The colour field redraws only when it changes, the handles every frame they move. A drag writes to the model continuously and calls `model.commit()` on release.
ColorSlider	A gradient track for one channel. The track shows what each position would give with the rest of the colour unchanged, so moving the hue recolours the saturation track and so on.
ColorWheel	Colour wheel: hue around the disc, saturation from the centre out, and a value strip beside it. Origin at the top-left corner, the disc first, then the strip.
Eyedropper	Pick a colour from the scene. `start()` turns the canvas into a sampling surface: a loupe follows the pointer showing the colour under it, a click or tap picks it, Escape or a right click cancels. Add it to the stage first. `start()` moves it to the top of its parent, and while active it takes every pointer press on the canvas.
HueSquarePicker	Hue ring with a saturation (left to right) / value (bottom to top) square inside.
HueTrianglePicker	Hue ring with a saturation / value triangle inside (Blender, Krita, GIMP). The triangle turns so its pure-hue corner points at the hue on the ring. Corners: pure hue, white, black.
OklchPicker	Perceptual picker: lightness (top to bottom) against chroma (left to right) for one OKLCH hue, with an OKLCH hue strip below. The area outside sRGB is greyed, with its edge drawn, so colours stay picked by how they look, not by how a screen mixes them.
SwatchPalette	Swatches to click: a fixed palette or the recent colours of a model, as a grid or a ring. Dragging across swatches previews them, releasing commits. The swatch matching the current colour wears a ring. A ring layout centres on the origin, a grid starts at it.
SwatchPopup	A ring of swatches that pops up around a point, for quick colour changes mid-stroke. Press, drag towards a colour and release, or tap to keep it open and tap a colour. The centre shows the colour under the pointer and cancels. Picks by angle, like the radial menu. It starts closed: add it to the stage, then call SwatchPopup.openAt.

Interfaces#

Interface	Description
ChannelSlidersOptions	Options of ChannelSliders.
ColorModelOptions	Options of ColorModel.
ColorPickerOptions	Options every picker accepts.
ColorPickerState	Reactive state of a picker.
ColorSliderOptions	Options of ColorSlider.
ColorWheelOptions	Options of ColorWheel.
EyedropperOptions	Options of Eyedropper.
HSVA	Hue in degrees (0..360), saturation, value and alpha (0..1).
HueRingOptions	Options of the hue-ring pickers.
OklchPickerOptions	Options of OklchPicker.
SwatchPaletteOptions	Options of SwatchPalette.
SwatchPopupOptions	Options of SwatchPopup.

Type Aliases#

Type Alias	Description
ColorChannel	Channel a ColorSlider edits: HSV (`h`, `s`, `v`), RGB (`r`, `g`, `b`), OKLCH (`L`, `C`, `H`) or alpha (`a`).
ColorSampler	Reads the colour under a point, in global (canvas) coordinates. Return null where there is nothing to sample. The lib does not read pixels itself: the app knows its scene (a texture, a render target with `renderer.extract`, or plain maths).
OKLCH	OKLCH: lightness 0..1, chroma (about 0..0.37 inside sRGB), hue in degrees.
RGB	Straight sRGB channels, 0..1.
SwatchPointer	What SwatchPopup.openAt needs from the pointer event that opened it.

Variables#

Variable	Description
HUE_STOPS	Pure hues around the wheel, interpolated in sRGB so every angle is an exact HSV hue.

Functions#

Function	Description
angleToHue	Hue in degrees, 0 to 360, of a screen angle in radians. The inverse of hueToAngle.
channelColor	The colour at position `t` (0..1) of a channel track, given the rest of the current colour.
checker	Checkerboard behind transparent colours, clipped to a rounded rectangle: the corner cells carry the corner radius, so it works for pills and swatches without a mask. Needs `radius <= cell`.
drawHandle	A picker handle: the colour it points at inside a white ring, with a soft shadow and a thin dark rim so it reads on light and dark colours alike. `alpha` below 1 shows a checker inside.
drawSvSquare	Exact HSV saturation / value square: hue, white fading to the right, black rising from the bottom. Adds three filled rounded rectangles to `g`. `hue` is in degrees.
hexToRgb	0xRRGGBB to sRGB channels 0..1.
hsvToRgb	HSV (hue in degrees, saturation and value 0..1) to straight sRGB 0..1.
hueToAngle	Screen angle (radians, 12 o’clock is hue 0, clockwise) of a hue in degrees.
inGamut	True when the OKLCH colour fits in sRGB, with a tolerance of `eps` per channel.
luminance	Relative luminance (WCAG 2), 0 to 1, from straight sRGB. Use it to pick a readable colour on top.
maxChroma	Largest chroma at this lightness and hue that still fits in sRGB, found by bisection. 0 for black and white.
oklchToRgb	OKLCH to sRGB, reducing chroma (keeping lightness and hue) until it fits.
oklchToRgbUnclamped	OKLCH to sRGB, not clamped: channels outside 0..1 mean the colour is outside sRGB.
pureHue	The colour of a hue at full saturation and value, as 0xRRGGBB.
readChannel	Reads one channel of the model, as 0..1. Hues map 0..360 degrees to 0..1, OKLCH chroma 0..0.37 to 0..1.
rgbToHex	sRGB channels 0..1 to 0xRRGGBB. Channels are clamped to 0..1 and rounded.
rgbToHsv	sRGB to HSV. Greys have no hue: `hue` is kept for them, so a picker does not jump back to red.
rgbToOklch	sRGB to OKLCH. Greys keep `hue`.
writeChannel	Writes one channel of the model from `t` 0..1 (clamped), with the scales of readChannel. OKLCH writes reduce chroma to fit sRGB.