Responsive Color

on YouTube ↗46m

" summary

Explains how HSL(A) makes color math intuitive, shows exact numbers (256 RGB values, 16M combos, 1 in 20 people with color deficiency), and proves responsive color by swapping palettes with media queries now and by ambient-light queries when available (JS in Firefox today). Demonstrates practical tools: HSL and HSLA notation, Sass lighten/darken functions and variables to generate consistent variants, and image tinting with background-blend-mode. Tests include bright sunlight, grayscale printers, and small-screen contrast changes.

AI-written summary · about

" chapters (24)

1. 0:00Intro
2. 4:29Hue Value
3. 5:29Saturation
4. 6:08Color Notation
5. 7:04RGB Notation
6. 8:16HSL Notation
7. 10:00Opacity
8. 11:59Colorblindness
9. 13:26Accessibility
10. 15:26Color
11. 16:42Language
12. 18:20Device Colors
13. 19:03RGB
14. 20:22Light
15. 22:50Screen Size
16. 25:04Examples
17. 28:26Color Names
18. 29:22Color Functions
19. 31:33Saturated Desaturate
20. 32:57Background Blend
21. 33:53Screen
22. 35:32Responsive Design
23. 36:59Lent Mode
24. 37:52Testing for Accessibility

" related talks

• 19mHSL: The RGB You've Been Waiting ForVisnu Pitiyanuvath · JSConf Iceland 2016
• 28mThe Colorful Future of CSSAlvaro Montoro · Nerdearla 101 2022
• 26mThe World Isn't Black and White, It's RGBEnrico Giacomazzi · cssday 2025
• 29mHd css ColorsAdam Argyle · CSSCamp 2021
• 36mThe Magic of ColorEva Ferreira · ColdFront 2017
• 39mThe Chroma Zone Engineering Color on the WebLea verou · Kod.io 2014
• 30mThe Evolution Of CSS4 ColorsChris Lilley · CSSConf.Asia 2016
• 51mArt of CSSNatalya Shelburne · Frontend United 2017