Build bulletproof color systems

Kevin Powell ยท Beginner ยท๐Ÿ–Œ๏ธ UI/UX Design ยท1d 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

โšก
The Psychology Behind Habit-Forming Design
Learn how habit-forming design shapes user behavior in digital products and why it matters for UX designers
Medium ยท UX Design
โšก
Open CoDesign: Lโ€™Alternativa Open- Source a Claude Design Senza Abbonamenti
Learn about Open CoDesign, an open-source AI tool for generating landing pages, dashboards, and interactive prototypes from simple prompts
Medium ยท AI
โšก
Your email design system shouldn't live only in your head
Learn to create a systematic approach to email design to save time and ensure consistency across campaigns
Dev.to ยท J Now
โšก
Are we creating artifacts for clarity, or just better-looking uncertainty?
Learn to distinguish between clarity and uncertainty in AI-driven communication to avoid mistaking momentum for understanding
Medium ยท Startup

Chapters (3)

Intro
0:58 The basics of contrast-color()
3:15 Using it with a more robust setup
Up next
What's new in Chrome
Google for Developers
Watch โ†’