CSS Color Party 🎉

Adam Argyle joins Amelia and Nick to catch them up on all the goings on within the world of CSS colors. There are a lot more options than you’d expect if you haven’t been keeping up, and Adam’s here to help you avoid the “gray dead zone”!

Leave us a comment

Changelog++ members save 4 minutes on this episode because they made the ads disappear. Join today!

Sponsors:

• Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com
• Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs.
• KBall Coaching – Free exploratory coaching sessions from JS Party co-host KBall! Click here to get started
• Changelog News – A podcast+newsletter combo that’s brief, entertaining & always on-point. Subscribe today.

Featuring:

• Adam Argyle – Twitter, GitHub, Website
• Nick Nisi – Twitter, GitHub, Website
• Amelia Wattenberger – Twitter, GitHub, Website

Show Notes:

• Adam’s site
• Color interpolation animation
• oklch() - CSS: Cascading Style Sheets | MDN
• The “Gray Dead Zone” of Gradients | CSS-Tricks - CSS-Tricks
• OKLCH Color Picker & Converter
• Wes Bos single color experiments on TikTok
• color-mix() - CSS: Cascading Style Sheets | MDN
• A Preview of 4 New CSS Color Features | CSS-Tricks - CSS-Tricks
• OKLCH in CSS: why we moved from RGB and HSL—Martian Chronicles, Evil Martians’ team blog
• CSS HD Gradients
• Gradient.style Discord
• High Definition CSS Color Guide - Chrome Developers

Something missing or broken? PRs welcome!

Timestamps:

(00:00) - It's party time, y'all
(00:39) - Welcoming Adam back to the pod
(01:47) - CSS (and JS) colors are cool
(03:50) - A high-level little intro
(06:41) - The box of crayons
(09:46) - Who can go to Discotown?
(15:30) - The color functions
(19:44) - Sponsor: KBall Coaching
(20:25) - Gradients!
(23:50) - Bringing JS to the color party
(27:51) - What to use when
(31:10) - Best/worst case scenarios
(35:07) - Differing display support
(38:30) - What is Rec 2020?
(42:14) - What's changed in monitors
(45:11) - Color gamuts
(52:35) - Sponsor: Changelog News
(54:22) - Design tool support
(57:19) - Adam announces gradient.style
(1:10:16) - Wrapping up
(1:13:05) - Next up on the pod

Episode source