Thinking on ways to solve color palettes
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
Видео Thinking on ways to solve color palettes канала Chrome for Developers
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
Видео Thinking on ways to solve color palettes канала Chrome for Developers
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
ChromeOS Policy APIThe WASI Revolution: Luke Wagner on WebAssembly's Past, Present, and FutureFit to Page (The Standard, Ep. 2)New in Chrome 103: HTTP 103 early hints, Local Font Access, AbortSignal.timeout, and more!Balancing Creativity with User Testing -- Designer vs. Developer #2Thinking on ways to solve CARD STACKUX Research and Usability Testing - Designer vs. Developer #21Best web features of 2018: Part 2/4 - HTTP203How to create personalized web experiencesRandom paint effects - HTTP 203What's new in web animationsNew in Chrome 102: PWAs as File Handlers, inert, the navigation API, and more!Intro & Setup - Progressive Web App TrainingMaintainable Code - HTTP203CSS background-attachment #ShortsWhat is Blink?What's new in web UILearn passkeys for simpler and safer sign-inDebugging memory leaks - HTTP 203It's viewports all the way down | HTTP 203