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.
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?
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
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!
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.
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?
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.
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.
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.
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.
@@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.
Adam is the man.
Awesome video. Love the new color space. Thanks!
Good news, I found a way to capture HDR screen recordings! stay tuned.
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
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
Amazing ❤
this is magic!
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?
Oh my god, I loved that, thanks!
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
Love this way of creating palettes :D
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
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.
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 👊
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.
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.
how to use these palettes in wordpress =P
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.
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?
💗
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!