Building the Dark Mode of Your Dreams with Color Science
summary
Practical takeaways: use LCHuv (called here LCHuv) or HSLuv to generate perceptually uniform ramps so each hue yields usable light and dark stops; stops ≤50 pair with black above WCAG 4.5:1 and ≥60 pair with white above 4.5:1 (7:1 only for stricter cases); a demo tool Color Lab (colorlab.dev) generates ramps, exports JSON and CSS/Swift/Android and it works; implement switching with the CSS media query prefers-color-scheme plus a user preference and theme/context wiring in React.
AI-written summary · about
chapters (10)
- 0:00Start
- 3:55Intuitive
- 5:38Light and Dark Modes
- 6:34Representing Color
- 13:47Creating a Color Ramp
- 16:09Putting It Together
- 21:20Color Lab
- 23:28Show me the code!
- 26:53Be kind to future you
- 27:24Thank you!
related talks
19mWhen colour theory meets technology
20mThe Dark Side of the Web
26mThe World Isn't Black and White, It's RGB
25mPractical Color Theory for People Who Code
43mWelcome... to the Dark Side?
36mThe Magic of Color
15mAccessible by law! Generating colors with JS and CSS Custom Properties
53mPractical Color Theory for People Who Code