Get rid of that "a" and drop those commas!

🔗 Links
✅ A pragmatic guide to modern CSS colours - part one: https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-one/
✅ A pragmatic guide to modern CSS colours - part two: https://piccalil.li/blog/a-pragmatic-guide-to-modern-css-colours-part-two/
✅ Piccalilli courses:  https://piccalil.li/courses/

✉ Keep up to date with everything I'm up to  https://www.kevinpowell.co/newsletter
💬 Come hang out with other devs in my Discord Community https://discord.gg/nTYCvrK
⭐ Are you a beginner? HTML & CSS for absolute beginners is for you: https://learn.kevinpowell.co
🎓 Start writing CSS with confidence with CSS Demystified: [https://cssdemystified.com](https://cssdemystified.com/)
🚀 Already mastered CSS? Check out my advanced course, Beyond CSS: https://www.beyondcss.dev/

⌚ Timestamps
00:00 - Introduction
01:45 - probably not worth refactoring
02:00 - Why we need to get used to the space-separated syntax
02:50 - Wider color gamuts with the new ones
03:50 - Relative colors use the space-separated syntax

#css

---

Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://cottonbureau.com/people/kevin-powell
💖 Support me on Patreon: https://www.patreon.com/kevinpowell or through YT memberships: https://youtube.com/@KevinPowell/join

---

🧑‍💻 My editor: VS Code - https://code.visualstudio.com/

🌈 My theme: One Dark Pro Var Night
🔤 My font: Cascadia Code

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel:

Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Kevin Powell

Modern CSS color syntax no longer requires the 'A' suffix in RGBA/HSLA or comma separators. The new space-separated syntax uses a forward slash before alpha values (e.g., `rgb(255 0 0 / 0.5)`). This syntax is mandatory for newer color functions like OKLCH, LAB, and the color() function, which support wider color gamuts beyond sRGB. The most practical benefit is relative colors, which allow manipulating existing color variables on-the-fly, such as adding transparency to any color format using syntax like `hsl(from var(--color) h s l / 0.5)`. The legacy comma syntax still works and doesn't require refactoring existing projects.

Stop using the legacy color syntax

Okay okay, heard, will do it right away!

hmmm, no, I don’t think I will.

wait, people don’t press tab to complete autofill for whatever copilot suggests!?

I already push oklch into our library at work. I became weirdly obsessive about it, despite that I don’t understand much about underlying technology and specifications history regarding colors. But it really shines in terms of WCAG (calculating contrast ratio), better handling of things like setting state for hover/active etc.