Frontend Masters Boost RSS Feed

P3 in Color Inputs

Chris Coyier — Fri, 23 May 2025 14:34:34 +0000

I just complained that color inputs couldn’t deal in P3 colors. Looks like Safari is the first-mover on supporting that, as well as alpha:

<input 
  type="color" 
  value="oklab(59% 0.1 0.1 / 0.5)" 
  colorspace="display-p3" 
  alpha
>

I was able to make a quick demo and see it on iOS:

Under the Sliders tab, it’s still just R G & B, but it seems to me you can produce colors still in the P3 space. And if you’ve set the color space, it gives you a P3 hex code there (which I didn’t even know was a thing honestly). The actual value that you get is like: color(display-p3 0.921957 0.31855 0.969179). Which I guess is fine? Just don’t expect to get out a color in the same format you put in.

Safari also displays the alpha transparency in the preview color chip, which is great to see. This might be tricky to actually use right away, depending on what you’re doing, as non-supporting browsers will see the value as invalid and display/return black/#000000

Colormaxxing

Chris Coyier — Thu, 27 Feb 2025 13:02:34 +0000

Sometimes giving a good name to something is what helps it sink into people’s minds. Daniel Karuna may have pulled that off here with “Colormaxxing“. The P3 color space is just bigger than the sRGB color space, and the extra colors tend to be in the more intense regions.

What if I told you that #ff0000 or rgb(255, 0, 0) is not actually the reddest red you can have in your browser?

Color Picker with Display P3

Chris Coyier — Fri, 12 Apr 2024 22:46:41 +0000

One of my recent moanings-and-groanings is the fact that seemingly no color-picker supports Display P3 colors. Display P3 allows you to use far more vivid colors then we’ve historically had access to in CSS, but now are totally supported in CSS through newer color functions like oklch(). Not even the built-in color picker to macOS.

Well it’s time for me to quit my bitchin’ because I’ve just seen two. I only looked at Mac stuff because that’s what I use. Feel free to chime in with options on other operating systems.

XScope can do it — but XScope is $50 and I find it heavy handed for the work I do. System Color Picker is free and I find very nice in it’s simplicity (it’s just a UX improvement over the default). The workflow I want, and it delivers, is: pick color from screen, have color on clipboard in OKLCH (that’s it).