Thinking on ways to solve color palettes
HTML-код
- Опубликовано: 2 июн 2024
- 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 → goo.gle/3MAx4NC
Get the source → goo.gle/3n4Sfcg
Watch more GUI Challenges → goo.gle/GUIchallenges
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GUIchallenges #CSS #ChromeDeveloper 
Наука
Subscribe for the latest → goo.gle/ChromeDevs
missed opportunity to upload this in HDR 😅
A problem I had when trying to report a bug with the HDR color support was no recording or screenshot tools captures the HDR colors. Adam had the same problem.
@@truvc hmm, you're right. looks like you can't do HDR with software capture you need a capture card 🤔
@@truvc screenshots will capture it, but video screen recordings dont
It's so beautiful. I love how much sense lch makes. I hope it makes tons of non-technical users delve into creating color palettes.
Good news, I found a way to capture HDR screen recordings! stay tuned.
Awesome video. Love the new color space. Thanks!
amazing, this was longed for ages. future is now
Adam is the man.
Fantastic demo on OKLCH, I'm sold as a system designer that loves colour-mixing with simplicity
Love this way of creating palettes :D
Oh my god, I loved that, thanks!
Amazing ❤
this is magic!
Excellent video - gave me lots of ideas. Question: is there anything in CSS (or js) that can automatically calculate a color to be used for text (foreground color) based on any background color, so that the text has a suitable APCA contrast from the background color? It would be handy to just choose various background colors and have the browser pick good contrasting text colors automatically.
Thanks for populating OKLCH! Kinda wished keeping colors within gamut would be addressed (since you can easily go into imaginary colors territory with OKLCH) and constant APCA contrast ratios between palette steps. Btw, where does 60% lightness number comes from?
Thanks for the video!
to avoid going into imaginary land, that's why i capped my chroma's around .3, since that tends to be where p3's edge is.
60% comes from testing and some other habits in other palettes like Material in HCT. in this space, a delta of 60 for T does a very similar thing.
hope that's helpful!
@@AdamArgyleInk thank you for the info! :)
@@AdamArgyleInk Thanks for taking the time to reply, makes sense
I've been playing around with this and I'm a bit confused. I thought this was supposed to result in the same(ish) contrast ratio across all hues assuming lightness and chroma are the same. But taking an example from my testing: this teal oklch(50%, 0.156, 160) and this purple oklch(50%, 0.156, 320) have contrast ratios agains white of 5.23 and 6.51 respectively. Am I missing something here? Am I misunderstanding the point of oklch?
Amazing!
It would be highly advantageous to have different methods or approaches for creating deltas for L and C when creating color palettes. Since colours are very hard to deal with a consistent methodology with different approaches will be handy.
Hi! Great presentation. How are you checking for color contrast directly in the browser and how can I use the mechanism to evaluate other color combinations in the browser?
devtools prefs / preferences / elements / show css documentation tooltip 👊
now animate the hue variable infinitely and it'll look even cooler
How do you enable that fancy information block with the contrast score when you hover the elements.. I can't seem to find anything online about what that is or how to turn that on. I'm guessing it's an extension.
Great vid. What font is zey using?
I'm still missing it and I know I asked you before. What's the difference between using lab or oklab and lch or oklch?
oklab and oklch are verrry similar, but the "ok" versions have micro adjustments made to smoothen out some areas the space doesnt perform well. with this minor adjustment also comes a slightly different way of specifying the color, like chroma is a decimal in oklch/oklab while it's an int in lch/lab.
The “ok” versions have more perceptual uniformity. For normal LAB and LCH, an equal change in values doesn’t always lead to an equal change in perceived output, because we don’t perceive all colors the same way. OKLAB and OKLCH should be much more consistent to our eyes and therefore more intuitive when picking colors. Color spaces are really complex but fascinating. I highly recommend the episodes of HTTP203 that talk about them to get a better understanding.
how to use these palettes in wordpress =P
💗
❤
The HTML header element is not considered a banner landmark when it is descendant of an
Pretty good video! But GOD WHY the creepy cartoon dude with the goat-like slit pupils?
It's an animated drawing of his dead brother. Maybe not criticize especially if you don't know the background?
@@ce9916 It's a darn creepy drawing. I'm pretty sure his brother, may he rest in peace, did not have goat-like slit pupils.
@@fionawashere1086 As a matter of fact he did (coloboma)
@@ce9916 So does all of that make it appropriate on an official Google Chrome channel? These are very private issues, and they have nothing to do here.
@@fionawashere1086 racists always show their true colors sooner or later
Horrible demonstration of the overcomplicated new color spaces.
Amazing!