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.
9:18 - personally I don't see that supposed 'juiceness', probably its a combination of youtube encoding and my old monitor's limited display capabilities. Anyway, this is probably the best video on LCH in CSS to date.
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!
been testing out lch for simple, automatically generated color palettes and while it's nice that there's perceptual uniformity in the lightness, the chroma still has to be modified on a per-swatch basis to make the entire palette look good and uniform. i think hsluv might fix this
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?
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?
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.
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.
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.
@@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.
Subscribe for the latest → goo.gle/ChromeDevs
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.
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
Good news, I found a way to capture HDR screen recordings! stay tuned.
Awesome video. Love the new color space. Thanks!
Fantastic demo on OKLCH, I'm sold as a system designer that loves colour-mixing with simplicity
amazing, this was longed for ages. future is now
Adam is the man.
9:18 - personally I don't see that supposed 'juiceness', probably its a combination of youtube encoding and my old monitor's limited display capabilities. Anyway, this is probably the best video on LCH in CSS to date.
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
been testing out lch for simple, automatically generated color palettes and while it's nice that there's perceptual uniformity in the lightness, the chroma still has to be modified on a per-swatch basis to make the entire palette look good and uniform. i think hsluv might fix this
Amazing ❤
Oh my god, I loved that, thanks!
Love this way of creating palettes :D
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.
this is magic!
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 👊
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?
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.
Great vid. What font is zey using?
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.
Amazing!
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.
💗
❤
The HTML header element is not considered a banner landmark when it is descendant of an
how to use these palettes in wordpress =P
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.
now animate the hue variable infinitely and it'll look even cooler
Amazing!