Support for new high definition color spaces.

[hellonearthis]

Increasing Access

I would like to suggest the inclusion of high-definition color spaces, such as oklch(), in the p5.js colormode() library. By incorporating these advanced color spaces, p5.js can cater to a wider range of diverse users, improving accessibility and enabling more inclusive visual experiences. Allow me to outline the benefits and rationale for this feature request:

Enhanced Color Precision: High-definition color spaces, such as oklch(), provide a greater level of precision and accuracy in color representation. This increased precision ensures that colors are faithfully rendered across various devices, benefiting users with visual impairments or sensitivities. By including these color spaces in the colormode() library, p5.js would allow developers to create visually pleasing and accessible experiences for a broader audience.

Extended Color Gamut: High-definition color spaces offer an expanded range of colors that can be expressed and manipulated. By incorporating these color spaces into p5.js, you empower designers, artists, and developers to work with a more comprehensive palette, enabling them to create more vibrant and visually engaging experiences. This inclusivity of color expression fosters diversity and encourages the exploration of new artistic possibilities.

Compatibility with Modern Displays: The inclusion of high-definition color spaces in p5.js aligns with the advancements in display technologies, which now support wider color gamuts and higher color depth. By providing support for these modern color spaces, p5.js ensures that developers can fully utilize the capabilities of high-definition displays, resulting in visually stunning and accessible applications.

When using gradients with colours the resulting colours brightness is consistant, see image below.

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
• Internalization
• Friendly Errors
• Other (specify if possible)

Feature request details

With the new and more vibrant colour spaces available in the browsers, can P5.js add support for these colour modes.

It could be added to the colorMode() with the use of colour-mix

[davepagurek]

I believe your link for vibrant color spaces (https://developer.chrome.com/articles/high-definition-css-color-guide/#what-is-a-color-space) only applies to CSS. I think js canvases don't let us use high dynamic range colors just yet, and while we can internally represent higher bit depth colors, the final output on JS canvases is locked to sRGB.

We could potentially still include support for other color space definitions (e.g. to get different values of lerpColor like in your image), but due to the technical limits of right now, they would all get mapped to 8-bit-per-channel RGB under the hood. If there has been an updated canvas spec that allows us to change that, let me know though, because that would change things!

[limzykenneth]

There are a few challenges to implementing this, but before we get to those, it is technically possible to use whichever color mode supported by CSS in HTML canvas as the color definitions in HTML canvas are all CSS color strings, which means oklab(50% 130 20) syntax works with native HTML canvas API. Not sure about WebGL though.

The main challenge is that in p5.js, all colors are encoded in RGBA values and passed to the native API as hex string, that means any benefit you may have for more color precision with a different color mode will get squashed into RGBA regardless. As for wider color gamut and modern displays, their benefit depends on users having access to device supporting them. I don't know how widespread something with P3 gamut support are available for example (although newer iPhones have wide support but I'm not sure how that translate into benefit for wide and diverse users with different access to the latest technologies).

In any case I'm not very opposed to implementing this but my main concern is that this will likely require a complete reengineering of how color works in p5.js that will likely touch a lot of moving parts. I'm also not sure how practical it is to first explore this in an addon library first. Basically I would like a bit of a plan on how we can adopt this if we were to try as I don't think it will be straightforward.

[meodai]

(the background is set in CSS and supports p3) https://editor.p5js.org/meodai/sketches/j-oGJup6a

I would love to have this added as well.