P3 Color Picker
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.
- 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
.styleproperty 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 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.