Color
A color picker over CSS color strings, with optional alpha.
The color control edits a CSS-compatible color string. It is a
value control over string.
Try it
Usage
const background = pp.color({
label: "Background",
value: "#ffffff",
});Configuration
interface ColorConfig extends BaseControlConfig {
/** CSS-compatible color string. */
value: string;
/** Whether alpha values are supported. */
alpha?: boolean;
}
interface ColorControl extends ValueControl<string, ColorConfig> {}Example
background.subscribe((value) => {
document.body.style.backgroundColor = value;
});Enable alpha when you need transparency:
const tint = pp.color({
label: "Tint",
value: "rgba(0, 128, 255, 0.5)",
alpha: true,
});Color representations
The base control works with CSS color strings. Adapters for other
representations — Three.js Color, [r, g, b] arrays,
typed arrays, linear RGB, HSV/HSL — can be layered on top so the core control
stays small.