[p5.js 2.0 Bug Report]: p5.Color.toString('#rrggbb') always returns HSL string

[finleyaa]

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.x

Web browser and version

Google Chrome 142.0.7444.176 (Official Build) (arm64)

Operating system

MacOSX 15.3.2 (24D81)

Steps to reproduce this

Steps:

1. Create a p5.Color instance in any color mode
2. Call .toString('#rrggbb') or .toString('rgba(r, g, b, a)') on the p5.Color instance

Snippet:

// Taken from https://beta.p5js.org/reference/p5.color/tostring/
function setup() {
  createCanvas(100, 100);

  background(200);

  // Create a p5.Color object.
  let myColor = color('darkorchid');

  // Style the text.
  textAlign(CENTER);
  textSize(16);

  // Display the text.
  text(myColor.toString('#rrggbb'), 50, 50);

  describe('The text "#9932cc" written in purple on a gray background.');
}

Working snippet

It seems that calling .toString('hex') does work, because that's the name of the format in colorjs.io.

function setup() {
  createCanvas(100, 100);

  background(200);

  // Create a p5.Color object.
  let myColor = color('darkorchid');

  // Style the text.
  textAlign(CENTER);
  textSize(16);

  // Display the text.
  text(myColor.toString('hex'), 50, 50);

  describe('The text "#9932cc" written in purple on a gray background.');
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms.

For guidance on contributing, check out our contributing guidelines and other resources for contributors.
💬 If you have questions or need support, feel free to join the Processing Foundation Forum or visit our Community page.
📜 Please also review our Code of Conduct to understand our community standards.
Thank You!

[Anshumancanrock]

Hi @davepagurek! The issue was that colorjs.io doesn't recognize p5.js format strings like #rrggbb, so I added a mapping layer that translates them to colorjs.io's hex format. Also added tests to cover all the hex format variations too.

Please let me know if you have any feedback. Thank you !

[davepagurek]

Hi! This is definitely a bug, but also is the same bug responsible for this #8284, which has a PR underway. Follow progress over there 🙂