Skip to content

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

Closed
Closed
[p5.js 2.0 Bug Report]: createColorPicker ignores initial colour arg on chrome, mac.#8284
Assignees
Piyushrathoree
Labels
Area:ColorArea:DOMp5.js 2.0+

Description

@nbogie
nbogie
opened on Nov 20, 2025

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.

Activity

  1. nbogie
    added
    p5.js 2.0+
    on Nov 20, 2025
  2. github-actions
    added
    Area:Color
    Area:DOM
    on Nov 20, 2025

  3. nbogie commented on Nov 20, 2025

    @nbogie
    nbogie
    on Nov 20, 2025
    ContributorAuthor

    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.

  4. nbogie commented on Nov 20, 2025

    @nbogie
    nbogie
    on Nov 20, 2025
    ContributorAuthor

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

  5. nbogie commented on Nov 20, 2025

    @nbogie
    nbogie
    on Nov 20, 2025
    ContributorAuthor

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

  6. nbogie commented on Nov 20, 2025

    @nbogie
    nbogie
    on Nov 20, 2025
    ContributorAuthor

    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.

  7. Piyushrathoree commented on Dec 22, 2025

    @Piyushrathoree
    Piyushrathoree
    on Dec 22, 2025
    Contributor

    @davepagurek could you please assign me ?

  8. davepagurek
    assigned
    Piyushrathoree
    on Dec 22, 2025

  9. Piyushrathoree commented on Dec 27, 2025

    @Piyushrathoree
    Piyushrathoree
    on Dec 27, 2025
    Contributor

    @davepagurek please take a look .

  10. sidhansu10 commented on Dec 28, 2025

    @sidhansu10
    sidhansu10
    on Dec 28, 2025

    I’ve opened a PR that adds regression tests for color.toString('#rrggbb') to lock in the expected hex-format behavior. This should help validate and protect the fix for this issue.

  11. Piyushrathoree commented on Jan 7, 2026

    @Piyushrathoree
    Piyushrathoree
    on Jan 7, 2026
    Contributor

    @davepagurek i think this one is ready to being reviewed please take a look.

  12. davepagurek
    marked [p5.js 2.0 Bug Report]: p5.Color.toString('#rrggbb') always returns HSL string #8451 as a duplicate of this issue on Jan 27, 2026
  13. davepagurek
    closed this as completedon Jan 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Area:ColorArea:DOMp5.js 2.0+

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions