Thinking on ways to solve color palettes
bookmark_borderbookmark
Stay organized with collections
Save and categorize content based on your preferences.
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:
Watch more GUI Challenges → https://goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs
arrow_back Back to all episodes
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2023-05-17 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2023-05-17 UTC."],[],[]]