Color Spaces and Colors in CSS

The past few months, I’ve seen a lot of posts on Color Spaces and Colors in CSS float by. Here’s a small roundup.


This content originally appeared on Bram.us and was authored by Bramus!

The past few months, I’ve seen a lot of posts on Color Spaces and Colors in CSS float by. Here’s a small roundup of articles and videos I found interesting.

~

To get into the subject, I’d highly recommend these two episodes of HTTP 203. I’ve watched each episode a few times already, as they are packed with tons of information. Great work by Surma (who did all the heavy lifting) and Jake!

Episode on Color Spaces

In this episode, Surma explains a bit of the history of color spaces (sRGB, CIE XYZ, p3, rec2020, CIE LAB…) and why they are important. Jake asks questions.

Episode on Colors in CSS

In this video, Surma and Jake pick up the topic of Color Spaces again, because there’s more to talk about. Device capabilities, perceptually uniform color spaces, color mixing and contrast calculations. And all of that is coming to CSS!

~

If you’re more into reading, go read Michelle‘s aforementioned Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH.

Posts that nicely pair along with that are:

~

On Twitter, Adam just published some examples that compare the results of gradient color mixing in several color spaces

You can check it out on CodePen (using Safari TP with the “CSS Gradient Interpolation Color Spaces” Experimental Feature checked).

By mixing in OKLAB for example, you can avoid the “Gray Dead Zone” of Gradients.

~

This mega Twitter thread by Sitnik the Developer is also worth a read. It mainly revolves around the Display-P3 Color Space and LCH to define colors.

~

One of the newer Color Spaces that has been defined is the OKLAB color space, a perceptual color space for image processing.

Oklab is able to predict perceived lightness, chroma and hue well, while being simple and well-behaved numerically and easy to adopt.

This comparison of OKLAB against HSV should tells a lot:

Shan Carter created an interactive OKLAB Color Wheel to go along with that.

~

From the same author as OKLAB also comes OKHSV and OKHSL, two new color spaces for color picking. What’s really impressive is Interactive color picker comparison that goes along with the post.

~

Finally, the CSS Color Module Level 4 Specificiation is worth digging into. I like reading specs, and this one — although about a difficult subject — was not too difficult to follow.

~

🔥 Like what you see? Want to stay in the loop? Here's how:


This content originally appeared on Bram.us and was authored by Bramus!


Print Share Comment Cite Upload Translate Updates
APA

Bramus! | Sciencx (2022-02-07T23:44:26+00:00) Color Spaces and Colors in CSS. Retrieved from https://www.scien.cx/2022/02/07/color-spaces-and-colors-in-css/

MLA
" » Color Spaces and Colors in CSS." Bramus! | Sciencx - Monday February 7, 2022, https://www.scien.cx/2022/02/07/color-spaces-and-colors-in-css/
HARVARD
Bramus! | Sciencx Monday February 7, 2022 » Color Spaces and Colors in CSS., viewed ,<https://www.scien.cx/2022/02/07/color-spaces-and-colors-in-css/>
VANCOUVER
Bramus! | Sciencx - » Color Spaces and Colors in CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/02/07/color-spaces-and-colors-in-css/
CHICAGO
" » Color Spaces and Colors in CSS." Bramus! | Sciencx - Accessed . https://www.scien.cx/2022/02/07/color-spaces-and-colors-in-css/
IEEE
" » Color Spaces and Colors in CSS." Bramus! | Sciencx [Online]. Available: https://www.scien.cx/2022/02/07/color-spaces-and-colors-in-css/. [Accessed: ]
rf:citation
» Color Spaces and Colors in CSS | Bramus! | Sciencx | https://www.scien.cx/2022/02/07/color-spaces-and-colors-in-css/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.