P3 Color Picker

The Issue

In many of my recent web projects, I’ve started to use wide-gamut P3 colors. The thing is, wide-gamut color on the web is so bleeding-edge that the tooling to design with these colors is (presently) non-existent. For example, the development tools for Safari don’t have a wide-gamut color picker, and Firefox and Chrome don't even support it yet—you need to use a fallback.

My best wide-gamut color selection tool, up to this point, is macOS’s ColorSync Utility, which lets you convert sRGB values to P3 Color Values. Short of ColorSync’s color calculator, which I could use to start from an sRGB color and then slowly nudge it out of gamut, I never had an easy way to quickly and precisely pick colors outside of the guessing and checking with numbers.

The Solution

P3 Color Picker is a pretty ideal one-day distraction project. The solution wound up being quite elementary-level vanilla JavaScript:

• set up event listeners on the slider values
• take the slider values when changed, and do basic string manipulation to these values into a properly formatted color(display-p3 0 0 0 / 1) string
• use that string to update the .style property of the body with the new wide-gamut P3 color.

If it sounds too simple, yeah, it is. But it works, and it’s also, as far as I can tell, the first wide-gamut P3 Color Picker on the web. I think that's pretty cool.

The Why

The purpose of building and shipping this aligns with a lot of my product philosophies:

• Ship a simple, pragmatic solution that solves problems
• Make the world better for others around you
• Try to do something positive that been done before

I think this project those goals out of the park. Sure, this project is not perfect—I could spend a bit more time iterating on and polishing the design. I could also try to figure out the math to convert from sRGB to P3 color. But hey, that’s stuff I can do in the future.

Right now, P3ColorPicker.cool solves my particular wide-gamut color selection problems, and I think that it’ll ease the difficulties of others trying to use wide-gamut color on the web too.