In today's GUI Challenge, @AdamArgyleInk builds a wide gamut color palette with okLCH, checking accessible color pairs along the way, inspecting color with devtools, and showing many other neat tricks for leveraging the features of this new web color space.
Chapters:
- 0:00 - Introduction
- 0:24 - HSL and LCH
- 2:09 - caniuse
- 2:50 - Demo Overview
- 3:51 - First okLCH color
- 5:14 - Wide Gamut DevTool Color Picker
- 6:53 - More okLCH color
- 9:40 - oklch.com overview
- 11:05 - More okLCH colors
- 14:08 - okLCH and Accessible Contrast
- 16:08 - Palette usage
- 19:12 - Hue adjusting
- 20:28 - Mapping adjustments for contrast control
- 22:05 - Recap
- 22:53 - Debugging Corner
- 23:22 - Outro
Resources:
- Try a demo → https://goo.gle/3MAx4NC
- Get the source → https://goo.gle/3n4Sfcg
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs