colorMode()

Changes the way color values are interpreted.

By default, the Number parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. This is equivalent to calling colorMode(RGB, 255). Pure red is color(255, 0, 0) in this model.

Calling colorMode(RGB, 100) sets colors to use RGB color values between 0 and 100. Pure red is color(100, 0, 0) in this model.

Calling colorMode(HSB) or colorMode(HSL) changes to HSB or HSL systems instead of RGB. Pure red is color(0, 100, 100) in HSB and color(0, 100, 50) in HSL.

Some additional color modes that p5.js supports are:

RGBHDR - High Dynamic Range RGB defined within the Display P3 color space. Colors are expressed with an extended dynamic range. To render these colors accurately, you must use the HDR canvas.

HWB - Hue, Whiteness, Blackness. Similar to HSB and HSL, this mode uses a hue angle. Instead of saturation and lightness, HWB defines colors based on the percentage of whiteness and blackness. This is the color model used by Chrome's GUI color picker. Pure red in HWB is represented as color(0, 0, 0) (i.e., hue 0 with 0% whiteness and 0% blackness).

LAB - Also known as CIE Lab, this color mode defines colors with Lightness, Alpha, and Beta. It is widely used in professional color measurement contexts due to its perceptual uniformity.

LCH - A more intuitive representation of the CIE Lab color space using Lightness, Chroma, and Hue. This mode separates the color's chromatic intensity (chroma) from its lightness, simplifying color selection and manipulation.

OKLAB - A variant of the CIE Lab color space that corrects for non-uniformities inherent in LAB. The adjustment provides a more perceptually accurate and uniform representation, which is particularly beneficial for smooth color transitions.

OKLCH - An easier-to-use representation of OKLAB, expressing colors in terms of Lightness, Chroma, and Hue. This mode retains the perceptual benefits of OKLAB while offering a more intuitive format for color manipulation.

p5.Color objects remember the mode that they were created in. Changing modes doesn't affect their appearance.

Single-value (Grayscale) Colors:When a color is specified with only one parameter (e.g., color(g)), p5.js will interpret it as a grayscale color. However, how that single parameter translates into a grayscale value depends on the color mode:

• RGB, HSB, and HSL: In RGB, the single value is interpreted using the “blue” maximum (i.e., the single parameter is mapped to the blue channel's max). In HSB and HSL, the single value is mapped to Brightness and Lightness max respectively with hue=0 . and saturation=0.
• LAB, LCH, OKLAB, and OKLCH: The single value is taken to be the lightness (L) component, with the specified max range for that channel.
• HWB: Grayscale relies on both the whiteness (W) and blackness (B) channels. Since a single value cannot directly account for two distinct channels, the library uses an average of their max values to interpret the single grayscale parameter. For instance, if W has a max of 50 and B has a max of 100, then the single grayscale parameter is mapped using (50 + 100) / 2 = 75 as its effective maximum. More complex or negative ranges are currently not handled, so results in those cases may be ambiguous.