Hd Color GUIde · February 2, 2023

February 2, 2023

devrel@google1 year ago

notecss

CSS HD Color Guide

Meet the new web color spaces!

What is a color gamut or color space
Review of the classic color spaces
Meet the new web color spaces
Migrating to HD CSS color
Debugging color

It's the article I wish I had when learning about CSS color updates.

Wizard of Oz image with Dorothy going from black and white to color.

Join the conversation on

122 likes

29 reposts

@argyleink @mozilla We need display-p3 in firefox! 🥺

Alexander Harding :verified:

@alex @mozilla they're workin on it!

@argyleink I made a little converter thing the other day for a project that takes hsl css vars and spits out lch https://svelte.dev/repl/c50a103a9a574b06bb7242949f79d76b?version=3.55.1

HSL CSS var to LCH • REPL • Svelte

@mattpilott nice! thanks for rounding the values, i find the values like 20.28372 to just be noise.

cool demo!

@argyleink Color pickers are the barrier for me. I use the one in my IDE during development, and it only does HSB, RGBA, and hex.

Adam!!! Why did you turn off comments on youtube!!! I had to struggle to remember my twitter pw just so I could tell you how awesome your content is. Thank you so much for the quality work you put out! SUper appreciative.

Crawl the CSS Webring‽