If playback doesn't begin shortly, try restarting your device.
•
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
CancelConfirm
Share
An error occurred while retrieving sharing information. Please try again later.
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#GUIchallenges#CSS#ChromeDeveloper…...more
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#GUIchallenges#CSS#ChromeDeveloper…...more