RSS FeedTwitterMastodonBlueskyShare IconHeart IconGithub IconArrow IconClock IconGUI Challenges IconHome IconNote IconBlog IconCSS IconJS IconHTML IconMedia IconGit IconSpeaking IconTools Icon
My google avatar.
DevRel@Google
notecss

CSS HD Color Guide

Meet the new web color spaces!

  1. What is a color gamut or color space
  2. Review of the classic color spaces
  3. Meet the new web color spaces
  4. Migrating to HD CSS color
  5. Debugging color

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

Check it out!!

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

Join the conversation on

122 likes
31 reposts
  • Daniel Infante
  • DrJume
  • Stéphane 🕊
  • Azalush “森あざらし”
  • Bramus
  • romainmenke
  • Una 🇺🇦
  • Sitnik the Developer
  • Andrey Sitnik
  • Андрей Ситник
  • CPU ⬜ Carré Petit Utile
  • Chrome Developers
  • Dan Burzo
  • Alexander Harding :verified:
  • Matthew
  • Bramus
  • iamdtms 🇭🇺
  • Ergün Erdoğmuş
  • Maibam Maneesana
  • Stefan TRMSC | eduBW
  • CSS by T. Afif :verified:
  • Alex Rothuis
  • Nate
  • Віталій Бобров 🇺🇦💗🛡️⚔️
  • Murat Çorlu
  • Eric Portis
  • Elly Loel ✨🌱
  • Michael Klöpzig
  • Vivek Galatage
  • Michael Klöpzig
  • Dominique Hazael-Massieux

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

Alexander Harding :verified:Alexander Harding :verified:

@alex @mozilla they're workin on it!

Adam ArgyleAdam Argyle

@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
M Λ T T YM Λ T T Y

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

cool demo!

Adam ArgyleAdam Argyle

@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.

Ethan GardnerEthan Gardner

Crawl the CSS Webring?

previous sitenext site
a random site