[p5.js 2.0 Bug Report]: createColorPicker ignores initial colour arg on chrome, mac.

[nbogie]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.1.1

Web browser and version

142.0.7444.176 (Official Build) (arm64)

Operating system

macOS 14.6.1

Steps to reproduce this

Steps:

A: with above platform run this sketch https://openprocessing.org/sketch/2797749 or same on p5 web editor.
OR
B: run the following snippet.

Observed: three colour pickers created, all defaulting to black instead of expected blue, magenta, yellow.

Snippet:

function setup() {
  createCanvas(200, 200);
  background(200)
  createColorPicker(color(50, 0, 240))
  createColorPicker("magenta")
  createColorPicker("#F0FF00")
}

results on various browsers:

Browsers yielding black:

• Chrome 142.0.7444.176 on macOS 14.6.1

• Safari 17.6 (very old!) on macOS 14.6.1

• Discord user Jiskra originally reported the issue on windows chrome and edge (with p5v2.0.5, and a similar snippet)

Browsers correctly yielding colours:

• Firefox (145.0.1 (aarch64) on macOS 14.6.1

Affected p5 versions

• The problem occurs in at least these versions of p5: v2.0.0, v2.0.5, v2.1.1
• Changing p5 version back to v1.11.11 I get the expected colours on all browsers tested.

[nbogie]

on underlying causes

(disclaimer: I've no experience with this code)

I think one underlying issue is that p5.Color.toString("#rrggbb") doesn't behave quite as expected in p5 v2.x.

Both paths through the createColorPicker function use someColor.toString("#rrggbb") e.g.:

elt.value = this.color(value).toString("#rrggbb");

For example (as can be seen here),

color("skyblue").toString('#rrggbb') yields rgb(52.941% 80.784% 92.157%)

It seems my chrome and safari silently don't interpret this output as a colour when assigned to elt.value, whereas my firefox is happy with it.

In p5.js v1.11.11 it yields #87ceeb, which all our browsers seem understandably happy with.

Sketches and p5 examples demonstrating this

Demo sketch https://openprocessing.org/sketch/2797773

The color.toString() example in the beta docs shows the same problem. It doesn't output a hex string but one in rgb(percent percent percent) form. Incidentally I see 5 identical examples on that page.

debugging color.toString("#rrggbb")

I traced through a call to color.toString("#rrggbb") in the debugger (specifically this sketch on p5 v2.1.1).
I wouldn't pretend to understand much of it, but at runtime for me serialize(color) doesn't find a format in its table for format "#rrggbb" in color.space.getFormat(format) so it uses the default format (named rgb) which outputs in format rgb(52.941% 80.784% 92.157%), and not hex format per the parameter.

[nbogie]

Initial p5 #help discord conversation with @limzykenneth and jiskra (17/11/2025: 02:28)

[nbogie]

Hi @limzykenneth - tagging you on this createColorPicker issue as requested.

[nbogie]

I'd be happy to contribute regression tests for color.toString("#rrggbb") and fix up the examples for same, if that turns out to be relevant and useful.