Build bulletproof color systems

Kevin Powell ยท Beginner ยท๐Ÿ–Œ๏ธ UI/UX Design ยท1w ago
๐Ÿ‘‰ Start writing CSS with confidence: https://thecascade.dev/courses/css-demystified/?utm_source=youtube&utm_medium=social&utm_campaign=regular-video ๐Ÿ”— Links โœ… light-dark() video: https://youtube.com/shorts/1-yzpfTTGIg (short) โœ… color-mix() video: https://youtu.be/I9zHX-jSKpA โœ… CSS Day: https://cssday.nl/ โœ… ZurichJS: https://conf.zurichjs.com/ โœ‰ 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/ --- 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 editors: In most videos, Iโ€™m using CodePen these days: https://codepen.io/ - with High Contrast Dark theme and the font Commit Mono And if not CodePen, then Iโ€™m probably using Zed: https://zed.dev/ with the theme Ayu Dark, and the font ZedMono In older videos, I was using VS Code - https://code.visualstudio.com/ with the theme One Dark Pro Var, and the font Cascadia --- โŒš Timestamps: 00:00 - Intro 00:58 - The basics of contrast-color() 03:15 - Using it with a more robust setup --- 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! #css
Watch on YouTube โ†— (saves to browser)
Sign in to unlock AI tutor explanation ยท โšก30

Related AI Lessons

โšก
** 50 Essential Prompts to Elevate Your Design Skills **
Elevate your design skills with 50 essential prompts to overcome creative blocks and encourage exploration and experimentation
Dev.to AI
โšก
Designing for Decisions, Not Screens
Learn to design digital products that focus on decision environments, not just screens, to improve user experience
Medium ยท UX Design
โšก
How I build Sanity Portable Text custom components in Next.js
Learn to build custom Sanity Portable Text components in Next.js with TypeScript types
Dev.to ยท Nayan Kyada
โšก
Vicinage, type-safe and zero-runtime UI styling, right in the markup.
Learn about Vicinage, a tool for type-safe and zero-runtime UI styling in JSX markup, and how it can improve your development workflow
Dev.to ยท chbyb

Chapters (3)

Intro
0:58 The basics of contrast-color()
3:15 Using it with a more robust setup
Up next
Stanford CS547 HCI Seminar | Spring 2026 | HCI and Human-Centered AI for Digital Health
Stanford Online
Watch โ†’