Param Panel

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.

On this page