Transcript

[Banjo music]

MANTRA: Just Build Websites!

Dave Rupert: Hey there, Shop-o-maniacs. You're listening to another episode of the ShopTalk Show. I'm Dave--in the LAB--Rupert and with me is Chris--OKLCH--Coyier. Hey, Chris. How are you doing today? [Laughter]

Chris Coyier: Yeah. Not bad. What's up, yo'? This is episode... Yeah, yeah, I was just looking. I was like, "Man, 556, that's crazy."

You know it's not just Dave and I this week. We have a wonderful, special guest. I think we're going to end up talking about color a whole bunch, which is great because now is the time, kids. CSS has changed almost a little bit behind actual browsers changing.

Dave: I think, literally this week, Color 4 landed in Chrome 1.11, so literally this week.

Chris: Oh, okay. Timing is extra good then.

Dave: Yeah.

Chris: I think I got excited about it too early, but now I'm glad that I know a little bit about it, now that I can actually fricken' use it, or at least in a few browsers because we're going to end up having to talk fallbacks and all that kind of stuff. Really, it connects to actual monitors as well, which I find fascinating.

But here I go talking my mouth out again before even introducing our amazing guest. It's Andrey.

00:01:32

Andrey Sitnik: Yep. Hi, everyone.

Chris: Hey! Yes. Thank you. You reached out to us about this, and I was like, "Hmm... I wonder." Then the more I thought about it, the more it seemed like a wonderful idea for a show.

You have something to do with Evil Martians, that group. Is that you?

Andrey: Yep.

Chris: Yes. Okay.

Andrey: Yep, I'm the principal front-end developer in Evil Martians.

Chris: Principal front-end developer at Evil Martians. And what is Evil Martians?

Andrey: It's a consultant company. We help people build startups.

Chris: Build startups. Yeah, right on. Okay, so there are a bunch of people that work there.

I end up on the Evil Martians blog quite a bit because you have quite a few good writers there as well. There's some kind of company culture there that gets you all writing and building tools and kind of being a bigger part of the Web component than perhaps an average agency is. Is that about right?

Andrey: Yeah, thank you.

Chris: Okay. There's all kinds of stuff from back-end development, Ruby stuff, and then all of a sudden they're like, "Let's talk about CSS and color stuff." And so, the origin of this show and what we're going to end up talking about is new color spaces.

I'll have to look up the exact blog post title, but one of them was like, "OKLCH is basically the best one," and that's something I've been thinking of recently. I guess it's just my brain thinks that that just happens to be the one new color format that has the same properties as the old one. I always get them screwed up. The other one that started with L.

Andrey: LCH.

Chris: Well, there's LCH, but what's the old one?

00:03:15

Dave: HSL.

Chris: HSL. It didn't start with L. Sorry. HSL, I was always, in my mind, like, "That's the best old-school one we have," and the whole reason for that was that it was a little bit human-readable. I've got some pushback on the human readability because you do have to know what number--

Dave: The color wheel, yeah.

Chris: Yeah, you have to know the color wheel a little bit. But even if you don't know the color wheel, adjusting the saturation and the lightness, you didn't need to memorize anything. It was so easy to change those percentage values and manipulate the color. For that reason alone, it was the best of the old-school formats.

Then all of a sudden, we start hearing news. "Oh, my God. Your monitor can display way more colors than these color models in CSS were even capable of doing." I was like, that's interesting news to me. Who invented a color format that couldn't display all the colors, you fricken' weirdos. That's wild.

But anyway, okay, I'll buy it. Now there are new colors formats. They've got to come to CSS. Because we can now use them, it unlocks all these new colors for us. It's just the weirdest news I ever heard, I think, when I first heard it. But I'm like, okay. If we've got to use those new ones, great.

They're like, "Well, here's a new one. It's called LAB," or something. You looked at the numbers for LAB, and you're like, "Well, I have to do that now? That looks horrible." I'm willing to do it because the colors are really cool and, hey, I want those unlocked. But then we're told, "Oh, there's LCH, too. And there's even a spicier version of it that fixes some problems with LCH called OKLCH, which, ugh, that's a whole other thing," but it retains the human readability of HSL but has all these new features. Then there's this Evil Martians blog post that's like, "It's the best one."

That was a lot of words, but how did I do? [Laughter]

00:05:03

Andrey: It was correct, like, I think. [Laughter]

[Laughter]

Chris: Yes. Yes. Something about y'all at Evil Martians likes this OKLCH format, and you do work for other people, so I guess that matters.

Andrey: Yeah. Right now, we are facing very big changes since how we work with colors. Like you know Vance is a front-end developer. He's painting pixels in the colors, and so how we define the colors is essential, I think, in the development. But at least before the current moment in Web development, we do it without a deep understanding about what we are exactly doing. We just mostly copy/paste the hex color from Figma, and the designers mostly choose it randomly according to their feelings, their subjective feelings if they are beautiful.

Chris: Mm-hmm.

Andrey: As a result, we did not understand how it actually worked. And the colors are very similar to the time, like many developers work with time, and many of the Web developers think that it's just a timestamp. But in reality, the time is so much more complex, and if you want to do something real with the time with libraries, you need an understanding of all of this complex stuff.

The same with colors. We paint the pixels in colors for years but without a real understanding how colors work. And so, for me, OKLCH, my favorite part of OKLCH is some sort of data finesse or Moment.js but for the colors, some advanced tool to do the stuff right.

Chris: You hear that, everybody? OKLCH is like Moment.js for colors. That is beautiful poetry.

Andrey: But not without the performance problems like Moment.js.

Chris: [Laughter] Yeah.

Andrey: Of course, you use data finesse.

Chris: Yeah, it's not ... [indiscernible] JavaScript. [Laughter] Cool. Yeah, all right. Well, say more about that then. How about some more on OKLCH and why that one, if you could?

00:07:09

Andrey: I think that we need to know about OKLCH not because it's cool, not because it's like Moment.js for the colors, but because it has practical results.

We saw two results which affect your business. The first one is a design system and palettes in this design system. The second one is white gamut, like HD colors on your landing pages.

The design system allows you to choose to create your designs faster, so spend less time of very expensive developers. And the HD colors, they allow you to make your brand, your landing pages much more vivid and so sell better.

These are the two practical reasons why OKLCH is really important for every developer since it will affect the business. It sounds great.

Dave: My understanding is it's almost like subconscious, right? Kind of putting aside the fact that colors, in general, are kind of just made up, a little bit of a construct, but we perceive redder reds as more vibrant, and we perceive greener greens and limes. I mean my wife and I, we fight about the color of a tennis ball all the time. She says it's green. I say it's yellow because its literal name is optic yellow. But whatever. That's just me. Wikipedia, too, there are all these fights over the color of a tennis ball.

Chris: Wow!

Dave: Yeah, go with me down this world. It's beautiful. But it's just our perception of color is kind of so part of us. I don't know. It's almost like supernatural, I would say, because it's just like, "Yeah, that's pink," is how we kind of experience it. I don't know. Now I'm getting art school here.

Not my usual self here on the ShopTalk, but we had these trees in Austin called Red Buds, and they bloomed really purple. They bloom this purple, purple, and they're called Red Buds. So, I guess, to somebody they're red. But these purple blooms, and it was just beautiful this year because I've lived in my neighborhood for five years, but I hadn't seen that purple yet to where I was shocked by it.

Chris: Hmm...

Dave: I think there's something to what you're saying, how color grabs us, how color influences us is huge (when we're paying attention, I guess, I should say). But I think now, as of this week, we now have greater access to a broader spectrum of colors, which is hard to wrap your brain around.

Chris: It is a bit. You mentioned design systems, too. What I'm thinking is... Here's my guess, and then you say what you really mean. A lot of color systems that I'm used to, you have Red 10, Red 20, Red 30, Red 40, because you want different versions of it. Or maybe if you're a little more simple, a light red, red, and a dark red - or something like that.

In the past, perhaps we had to kind of hand-pick those, perhaps hex codes, because our designers told us that this is the appropriate darker red. Maybe that was a side effect of you couldn't trust HSL to adjust that final number to be a darker red and really mean it. That perceptually it was wrong and that there's something kind of cool. And I hesitate to say magical because I'm sure it's very mathematically inclined. If you're using OKLCH, you can adjust the H or the L in LCH and get a darker red that really, actually is a darker red.

00:11:01

Andrey: Something like this, yes, but it's even more, deeper case like ... [indiscernible] problem. Right now, we create so many pages. If you're starting a startup or a big company like Google, you're creating a lot of pages. You need to put a designer's attention to every new page.

For instance, let's grab a very simple case. You design your button in your accent colors, the accent color of your company, now blue.

Chris: Mm-hmm.

Andrey: But on some page you have a delete button. Of course, you need to make this button a red to warn the users that this is something dangerous. Before, you need to ask the designers to do it, and it doesn't have a problem only with this button. It goes to every page.

Right now, we need to create so many programs, user interfaces, et cetera that we don't have enough designers to do it. This is why instead of creating and picking every color for every page, people found that it will be much faster if we define the system and use implementation. People will be able to use the system and to find the right color.

For instance, if you have an accent color for the button and you have some sort of math behind any colors of your page, it's very easy to choose the red one. This is what we see right now without design systems. But the math behind the colors are not in the CSS. They are mostly some sort of generator center. But right now, we can define all these properties of this math inside our code, so front-end developers will not work with just hex numbers from Figma or a product generator but could define this math inside CSS, and it means a lot for the complexity ... [indiscernible].

For instance, there are two very simple cases why OKLCH is very important. The first one is you have a temp color and you need a red one. All other math except OKLCH doesn't allow you to create this, another button, with another hue but keep the same situation and the ... [indiscernible] maybe is LCH, a little, but it has a way ... [indiscernible]. But in HSL, you could face very big contrast changes during the change of the hue, and it's really visible and it's really a problem. That's why nobody uses it.

And another reason why OKLCH may be very useful is another example. You have a button and you have a hover style for the button. For instance, 10% lighter. You want to define it on the answer, like the current color of the button and make it 10% lighter. The new CSS allows you to define this math inside the CSS. It doesn't matter what color you define on the button. It will automatically generate the hover color according to this math.

The result, the OKLCH maybe many users use a lighter or darker function in Sass, and they saw very strange behavior on these functions. Sometimes they're darker, 10% darker or not 10% darker. It depends on the hue. Like 10% darker for the red and for the blue, it was completely different. It's because HSL is a very bad color system. It's very interesting why, but yeah. This is what we now are capable of doing with OKLCH.

Chris: Right. It's almost like we didn't even know it until now. We knew it by our actions, you know? Nobody just lightened a color and used it because it just felt so untrustworthy. Or some people used a tool, something like Sass, which had color functions built into it. They'd use lighten, but nobody used lighten consistently. Nobody was just like, "Lighten 10%," and then they knew that would work on every single color. It was always this little game of, like, "Oh, that doesn't look right."

Some colors, you'd lighten 10%. It would blow it out to white. You'd be like, okay. I guess 4% then. It was just this little game of trying to figure out what the number was. And it felt weird for something that feels like it should be so mathematically sound really was not. [Laughter] You had to do it. Now, 10% is 10%. At least - I don't know - we hope so.

00:15:51

Dave: I like that you've kind of drawn a line in the sand and just said, "OKLCH is it," because with P3 and LAB and all these kind of new color spaces we have access to, I don't know. I like the line in the sand [laughter] because I can react to it now. Right? I can be like, "Yeah," or I can be like, "No, I don't think so." But I like it.

Chris: You know on the ShopTalk Show, Dave, instead of trying to lighten the color, we literally use filter.

Dave: Oh, good.

Chris: Yeah.

Dave: Saturate.

Chris: A filter 110% and just let it go. Not the best approach, but for a small, little dumb site like ours, who cares, right? In the future, we'll definitely switch this up to the model.

Do you have some thoughts on that, Andrey, the why OKLCH over one that is still new, like LAB or P3? How should we think about that?

00:16:50

Andrey: Yeah. OKLAB and OKLCH are two color spaces. It was created only in 2020. It's very new.

Chris: Whoa. Whoa.

Andrey: But the CSS working group, they see that all other solutions have problems, and they, for those reasons, took this new color space because this was the real way. Anyway, right now, we are destroying the old tech system and creating something new, and this is why it doesn't matter what type of system you use. We just need the best one. This is why they took OKLCH, very new, and put it to the specification.

It's not only just the functions. To be honest, OKLCH is a part inside many different parts of the specifications. For instance, gamut correction center. Because of OKLCH, has a very good math to work with the colors.

Chris: You have created or helped create - or something - a tool specifically for OKLCH. For all the reasons you've already talked about, you have kind of, in a way, crowned a winner, and it's OKLCH, which I personally like. There are reasons, I should say, that this crowning a winner business I'm saying a little bit tongue and cheek. There are some cool things you can do with other formats.

One of the things I think about is that any given gradient between two colors, what happens on the way from one color to another color really depends heavily on the color space that it's in. I think that OKLCH does a pretty good job of making them generally pleasing. But you may want to try others. That's a reason you might pick another space is because you prefer what happens in a gradient in another color space. That's just one thing I think about. But generally, for a design system, as Andrey mentioned, OKLCH is pretty darn good.

So, what's up with this tool and how does it work?

00:18:52

Andrey: Yeah. When they start to be curious about the color spaces and the new specification, they found that nobody really knew anything about it. There was only one talk on YouTube about OKLCH and only one article. And there was no toolset. There weren't any color pickers at that moment, so you can't even see the color space, how it looks, or ... [indiscernible] 3D model of the space looks like. There were no Polyfills, there was no documentation in NDM, nothing.

I found that sometimes when you see that some tool has no ecosystem, it is a reason for you to avoid this too. But for me, it's completely opposite. It means that you finally can do something really important for the people. And together with my colleague Roman Shamin (and many other people the open-source community) we started to create this whole ecosystem, and we are doing it for a year right now, so we started about the same date a year ago, and so worked the whole year (for the people). When the browser will implement it, the tools will be ready; are already created. It was an amazing year.

Yeah, we need to write some good guides explaining what it is, explaining the benefits. We need to create the Polyfills. We need to create the linters because OKLCH works a little different. You need another way to think about it, but we can speak about it a little later.

You need a color picker and the documentation, Figma support, et cetera. It's so huge, and we started to do it, create a color picker, the first OKLCH color picker. We created the second article. The first one was a genesis article.

I'm also the creator of PostCSS, and I help the developers of PostCSS and preset-env create the Polyfills and help ... communities create a plugin for the ... [indiscernible] OKLCH, and it was an amazing year.

00:21:07

Dave: If I can mouth describe the tool, oklch.com--

Chris: Killer. Killer domain name. Whew!

Dave: I mean it couldn't be more exact. You basically have... you can choose what color - whatever - OKLCH or LCH on the left. In the middle column you get the color you're looking at, like pink, red, or blue. You're zoomed in on the lightness, so it goes from very dark to very light across the X-axis. Then there's alpha there, too. We'll skip that.

But chroma is where it gets interesting because it's like these waves of color.

Andrey: Yep.

Dave: Then there's a little white line in the wave. There's also a white line on the lightness. But anything above that white line is the P3 color scale, right? Then if I hit Rec. 2020, which is the even newer color gamut, there's another line, and so I can go even farther with color.

Chris: Yeah.

Dave: You have these other cool visualizations, but that chroma wave thing really gets at what this is. It's like you are literally going beyond the bounds of RGB and into a different color space. Anyway, it's cool. I haven't seen it displayed like this. I think it's really useful for me to go and browse colors.

Chris: Yeah.

Dave: Usually, these color tools are like, "Enter a color," and it's like, "I don't know. Tomato." You know? [Laughter] But my question is, because you're showing me the P3 and the fallback, if I put on Rec. 2020, it says my browser doesn't support that, and so I'm very curious about that. But I see P3 and I see a fallback, is this kind of the idea? This tool can maybe automate fallbacks in PostCSS or something like that?

00:23:10

Andrey: Yeah. The color picker is just a color picker. It's very similar to the HSL color picker but just more complex because the OKLCH color space, as a space, is more complex, and so we need better visualization.

There is an article from our designer Roman Shamin who created the design of this tool because it's not obvious how to create a color picker to a completely different color system. You can use this color picker even without browser support for OKLCH to do this math for you.

For instance, if you desire and you want to create a hover color for the button, you take your color from Figma, go to the color picker, put it inside, increase the lightness, and then copy the hex back and go back to the Figma. It's already a tool even without browser support.

But to explain why the color space has so different, like so unusual form, what is P3, let's go deep to the theory.

Chris: Let's do it.

Andrey: In this cartoon, when you have a school bus and it can shrink and can go inside the....

Dave: Yeah, Magic School Bus. Let's go.

Andrey: Yeah, so the color spaces. We have colors. Colors is something in the property of the light. But it doesn't have the properties which we work as a developer. It doesn't have a red, green, and blue component. It doesn't have lightness, et cetera. It's all inside our brain.

Because our eyes ... [indiscernible] detectors, but they don't see only green, blue, and red. They see the whole spectrum but with a different power. So, you'd see a green. If we're talking about the green pixel inside our eyes, it sees green better than a blue one, but it still sees blue.

Chris: Hmm...

Andrey: As a result, the system is extremely complex. And to work with this, we need some sort of math. I don't know. Some sort of coordinates.

People in the 1930s, they created a very interesting experiment. They don't have any computers, et cetera. They just have lamps, and they have some real object, real yellow, green, something. And so, they create three lamps, and the three lamps light to the surface on the right side. On the left side, they put a real object. They start to change the lightness, so people, the person who is in this experiment, start to see these objects in a different color. This is how they create some sort of the model of how to explain any colors as a combination of these three colors.

Right now, in CSS, we have a color space called XYZ. This is exactly the result of this experiment.

Chris: Oh, wow.

Andrey: XYZ is the lamps. In our screens, we have similar lamps, like the small pixels, sub-pixels: the green, yellow, and red. But of course, their colors is not similar to the lamps. As a result, there is a math formula which convert XYZ to your RGB specific to your monitor.

Chris: Mm-hmm.

00:26:43

Andrey: But there is a problem. Unfortunately, for our devices, some pixels can't produce any colors which is visible by our eyes. Unfortunately, at the moment of 1990, we can produce only about 35% of the colors. As a result, this advertisement about your monitor that you can see six million colors, unfortunately, this is not such a big number because it's not all the colors of the Earth. It's only 35%.

And this is one of the reasons why if you took a sunset on your camera and see the picture on your screen, you don't see the same deep, emotional feelings because some pixels is not so powerful to produce this so saturated red, for instance, as you have in the real world. This is why the whole space is much smaller.

So, the color space is a way how you can encode any colors in the three coordinates - in some coordinates, but mostly the three coordinates. The gamut is the size of the space. How much color can you produce?

Two different color spaces can have the same gamut because they can encode the same number of colors but with different numbers. There is color spaces is unlimited for the gamut, you can encode any types of the gamut, but some other color spaces is very limited to the specific gamut.

For instance, SRGB, HSL, and many others is limited to only the SRGB color space. The SRGB color space is that 35% of the colors which people agree that every monitor should be able to render.

Chris: Even hex codes too, right? Yeah?

Andrey: Yep. Yep. Even hex code is an SRGB model but in a different coding format.

LAB, OKLCH, OKLAB, and LCH, it's unlimited. It's called device-independent color format, color spaces. It means it doesn't limit to a specific gamut. It could work with any gamut, even things which seem impossible right now.

Why is it important? Because a few years ago, we started to be able to produce completely new LED for our monitors. We were able to produce new pixels which could produce much more saturated light. And if we have much more saturated green, blue, and red, it means that your monitor can display much more saturated colors, and you finally have a picture much closer to that sunset, which you're able to see.

All new able devices, most of the Android with ... [indiscernible] screens, most of the laptop ... [indiscernible] screens is capable to display these colors. This is why when you see sunset pictures on your iPhone, it looks better than on your screen, for instance, on Windows, because an Apple device can produce more colors.

This new set of the colors, this new gamut called P3, it's about 45% of the colors visible by human eyes. It's still not even half, but still better than P2.

Chris: Wow! Not even half, still.

Andrey: Yeah. Unfortunately. Even Rec. 2020, we will be able to produce only 75% of the colors, but it's much closer. Just maybe one step higher and we will be in the final destination of 100%. But still, 30% of new colors. Most of them are much more vivid, but not all of them. Some of them is just a different one, and so with more colors, you are more free to create palettes for your design system. More colors is always better. It's not only for some sort of landing pages when you need to have vivid colors. Sometimes it's better because more colors mean the designer is more free to choose a subset of the colors in the design system.

00:31:08

[Banjo music starts]

Chris: This episode of ShopTalk Show is brought to you in part by Frontend Masters. That's frontendmasters.com. Their learning paths are super good. Aint they, Dave?

Dave: Oh, man. They have everything, whether you're starting from a certain level like beginner to professional expert, or you want to hit the computer science track or the full stack track or design to code track. Lots of different tracks from what skill you're trying to hit.

But then, boom, they've got technology-specific tracks like JavaScript, CSS, like if you need a skill buff in one area.

Chris: That's what I would do. I'd be like, "Dude, I need to learn TypeScript now. I'm way behind on this." Take the TypeScript class.

"Oh, I need to get a job." Dude, take the React class.

[Laughter]

Dave: Take the React class. No, I mean like or I'm doing Vue. I have a good understanding of Vue, but piecing it together over a bunch of blog posts isn't the best. You know?

Chris: No.

Dave: Watching Sarah Drasner's Vue course is super rad.

Chris: Yeah.

Dave: Or Node. Just seeing somebody build something, like an API or whatever, helps my brain internalize that way more than just piecing it together myself.

Chris: Right. Right, and I kept calling them courses and classes and stuff, but they're really learning paths. You might hop between different videos and stuff. There are elective coursework and stuff.

These learning paths are really put together to bring you the best of whatever that topic is. That really appeals to me. I think it's really quite cool.

Dave: And I think it can work for you as an individual or for your whole company, like if you're trying to do a big skill buff in React.

Chris: Yes!

Dave: Your company noticed, like, "Hey, we're not super great," so boom, get a whole skill buff for your whole entire team.

Chris: Yeah or in my case, we're switching over everything to TypeScript. Now guess who should level up in it. Everybody, not just you.

Dave: Yeah. Well, and if you want to do it, are you doing it in the one-month or the one-year plan? You know what I mean?

Chris: Yeah.

Dave: It helps to level up first, right?

Chris: Bring your company to frontendmasters.com.

[Banjo music stops]

00:33:19

Chris: It looks like in your tool, though, when you're looking at the waves, really interesting, which I still don't totally understand, but there are waves. Where the white line is that Dave was describing, it's generally stuff above that white line, so you get more saturated and brighter and more vibrant colors. It's not like we're getting a bunch more dull, swampy green. That's already been covered.

Dave: We have plenty swamp green--

Chris: Yeah.

[Laughter]

Dave: --in HTML. Yeah.

Chris: Yeah. So, when this happens, when we get even closer and closer, is it going to keep going upwards? In other words, are we going to get more brighter, more vibrant?

Andrey: Yep. Yep.

Chris: Yeah, okay.

Andrey: At that moment, it will be the same vibrant as you see it on the sunset. Of course, it will be only as colors, not as the lightness, but it's still much better.

Chris: Yeah.

Andrey: And vivid colors, they really sell, so this is a point. This is why new colors is some sort of new ... [indiscernible] when your page could sell more products.

Chris: Nice.

Dave: Are the days of picking hexes, like let's pick some colors, are those over (in your mindset)? I feel like you've fully adopted the new spectrums, the new gamut. Are those days over? How do I need to reshape picking colors for our design system?

Let's say we want some grays. We want some reds and blues. How do you do that now? Is it different than just like, "Let's just open up the color palette"? How does it work now?

00:35:03

Andrey: At least right now in Evil Martians, we mostly choose a few of the most accent colors and produce other colors according to the math. There is an experiment created by Alexey Ardov. He's the creator of Huetone. It's a tool to create palettes automatically. But he created a very nice project called Color Playground. When you need to define a hue, your accent hue, then you define contrast, which you need for a different contrast, and it generates the whole palette for your website, the whole thing for your website just according to these numbers.

I believe that our future is something like this when you choose only a few colors. Then the system creates all other for you, and you don't need to spend the time. And you spend more time on creating a good user experience, not to cherry pick the color numbers.

Dave: No, I mean that seems like we can get lost. If we're seeing 75% of all colors theoretically to the human eye, you could get lost picking. Are design tools hindering us a bit? Figma, does that do OKLCH or are we kind of in a jam there? What are your thoughts?

Andrey: Yeah. Unfortunately, with all this color ... [indiscernible] Figma is keeping us behind. And design tools because we need a few things.

First, we need a way to work with a different gamut. Not only with SRGB as the current one, but also with P3. In Figma, there are options, but they are not simple.

The second one, we need a way to work with the colors in OKLCH, and we don't have this in Figma right now. It's sad, but I hope the Figma developers hear us, and they will let. This feature is not so hard, to be honest.

Dave: Yeah. No, they would be... hmm.... I mean I wonder what they're going to do. I bet now that it's in--

Chris: They seem to be on top of it. They're a little better than... I shouldn't say that, though, because I think if you open up Photoshop specifically, they have some kind of LCH picker in there. But it's a little funky.

Andrey: And unfortunately, it's LCH not OKLCH. But Photoshop use OKLCH in gradients, so color space is the way to encode coordinates. When you grow a gradient, you just take two dots and create a path in some color space. So, a color space really has a result on your gradient.

OKLAB gradients are very good right now. They mostly solve any problems of other formats. So, this way, Photoshop added OKLAB gradient. But this is ... [indiscernible] gradient is not so... It depends on the task which you want to solve, and so the color space, there is no one winner. There is no silver bullet.

Chris: No, there's not, and I hate that, that there's not. I feel like it was a year ago or so. There was talk around gradients and color spaces. A lot of the demos showed you. I think it was between red and blue. It goes through gray crappy land. You're like, "Look at how boring that is. I picked this bold red and this bold blue, and it goes through a very dull color space in between."

Look at this new color space. It now goes to purple in the middle, which is a little more expected because it's the mix of those two colors, and it remains bold. But I can see a choice that's like... I don't necessarily want to go through purple. That's pretty arbitrary. You know? I could want to do something else in the middle.

Of course, you could add more stops to affect how that works, but it is interesting to see. I saw an Adam Argyle post the other day that said, "Do a gradient between red and red, but interpolate between different color spaces," and one of them goes through the whole dang rainbow if you pick the HSL space. It was very interesting to watch. I don't know. You get it, right?

Andrey: Yep. Yep.

Chris: A whole rainbow interpolation is a very interesting side effect of all this color space stuff.

I do have a question. You open up Photoshop. If you really want to use -- what did you say -- LCH not OKLCH, they'll give you the three numbers but they're in three different input boxes.

Andrey: Yep.

Chris: I think just little UX stuff like that has a tremendous impact on our industry. if you want that number, you've got to click back and forth and copy and paste three different numbers into the format. I feel like I love this. I want this. I'm a CSS guy. I own Photoshop. But I will never do that. I'm just too lazy. I just won't do it.

Dave: Is that why hexes won?

Chris: It is! That's why hexes won. [Laughter] I almost feel like we should nix...

You know how you're writing a variable or let's say a CSS class name and you put dashes in the class name, or you write the same class but you put underscores instead. We all know this intuitively as programmers. The one with underscores, you can double-click and get the whole thing. The one with dashes, you can't double-click and get the whole thing. You get up to the dash and then the clicking stops. Somebody decided that's how computers work (a million years ago) and that's what we get.

It almost makes me wish that one of these new color formats didn't use, on the percentage sign, because the percentage sign will also stop a copy and paste.

Andrey: Aw...

Chris: And didn't use spaces. They used underscores instead because then it would be... Then you could double-click and get the whole thing. Anyway, that's a dumb, little aside. But the copy-and-paste ability is a big deal, which is almost advice for y'all at Evil Martians.

That tool, the OKLCH tool is awesome. It's so good. I've already used it a bunch of times. It's the best one around. But there almost seems to be... I almost wish there was some kind of little special section that I could expand or something that would give me both OKLCH and a fallback together as a more copy-and-pastable piece together because every time I use this stuff I think, "Oh, I can use it, but I have to put a fallback." I know you'll tell me I should use PostCSS, so there's that. [Laughter] Or what? You can go.

00:41:40

Andrey: There always is... There is another way. For those, you don't need to put a fallback.... There is a very good Polyfill which is called preset-env. If you write OKLCH inside your CSS, it will automatically convert it to the hex. But if this OKLCH format is in P3, it will automatically generate a media query and the fallback colors. I'm not sure about a media query, but it generally can generate a fallback.

Chris: Yeah.

Andrey: If your screen doesn't support P3, a fallback is generated for you. The main problem right now do gamut corrections, change it in one gamut to another in a bad way, both Safari and Chrome, and so I highly recommend to use preset-env because they do it much better.

Chris: Nice. Yeah. Yeah.

Andrey: Chrome and Safari is going against the specifications, and the Polyfills is the only tool right now in CSS which works correctly.

Chris: Right. Right. Right. Right. There are two kinds of fallbacks, which blows my mind too. You could be on a very modern browser that supports all this stuff but be on a piece of crap monitor that doesn't. But that's okay because somehow -- and I don't know how much you know about this. But it sounds like you know a lot here -- it does pull that color back down into a reasonable fallback for the monitor somehow, right?

00:43:12

Andrey: Yeah, it's called the gamut correction or gamut modification.

Chris: Okay.

Andrey: It's meaning that we have some sort of big subset of the colors. For instance, P3, you choose a color from P3.

Chris: Mm-hmm.

Andrey: Unfortunately, you are rendering ... [indiscernible] monitor with a SRGB color model. And so, it's impossible to render this color. It's impossible even to see this color, what it looks like.

Do you remember when you opened in Photoshop some files and it asked you about some sort of gamut correction profiles, et cetera? You click a random button because you don't know what is it?

Chris: Yeah. You're like, "Fine, fine, fine." [Laughter]

Andrey: It is exactly what we are talking about right now. It's called, again, the gamut corrections.

There are two ways. In Photoshop, in pictures, we take each color and reduce it. When the camera can catch 45% of the colors, and we render it on the screen at 35%, we just reduce all colors (saturation, mostly), to the 10% back. This is why the pictures look so shitty because they become faded.

Chris: [Laughter] Yeah.

Andrey: But in CSS, it's different algorithms. If this color is beyond the possibility of your monitor, only this color will be reduced. It will be reduced by the OKLCH color space. So, there are two ways to reduce it. The first way is to convert it to the SRGB color space. In this case, because it was in between and inside SRGB's invisible color, you will have more than 100% or less than zero numbers in SRGB functions.

The one way is called clipping. You just reduce it. If it's 120, you just reduce it to 100. If it's below zero, you make it zero.

Chris: Okay.

Andrey: But it will change the hue, and so color becomes a little bit bluish red or like yellow going to green a little. But unfortunately, this is what Safari and Chrome do right now because this is the fastest way.

The proper way inside the CSS specification is to convert the color to OKLCH in only this color space and then start to reduce the saturation and lightness. You can see it in oklch.com the graph of the lightness and saturation, and they start to reduce it on this graph.

Chris: You never change hue is the point, right?

Andrey: Yes.

Chris: Right.

Andrey: Yes, only saturation, and it looks pretty... what you will expect. Of course, faded away but still working. Not a problem.

Chris: And then the other kind of fallback is that you're using, say, oklch() and your browser doesn't understand that because you're on something that doesn't yet.

Andrey: Mm-hmm.

Chris: Oh, by the way, the "Can I use" tables are super out of date for this. Somebody should get on that.

Andrey: I already sent a pull request. But unfortunately, we need to wait a few days. And I hope it will be updated when the podcast will be released.

Chris: Okay. Yeah.

Andrey: Right now, OKLCH is supported not only by Safari but also by Chrome, as Dave mentioned, but also by Firefox. The OKLCH color format, it's inside this competition between the browsers what spec we should support. The ... [indiscernible] 2023, and so all browsers, it's right now a race of implementing it. This is why Firefox already have it. But unfortunately, behind the flag. Sorry.

I hope that in months, we will have it in all browsers. But we need to wait about half of the year or even more to have it in UC browser, Samsung browser, et cetera. Right now, Polyfills, unfortunately.

Chris: Right. But you did mention a media query. I think there is a way to detect the P3 color space in a media query.

Andrey: Yep.

Chris: But you also kind of don't have to because you can just declare it one above where you use OKLCH, and it'll just fall back to that, right?

00:47:19

Andrey: Theoretically, yes. But here is ... [indiscernible]. Imagine that you have two buttons, and one button must be much more saturated because it's a problem and ... [indiscernible] on your landing page. And if you will make P3 color for the ... [indiscernible] on the SRGB screens, these buttons will have the same colors because you reduce the one color.

Chris: Mm-hmm.

Andrey: But another color was the same, and so you reduced the difference between the colors. Sometimes, unfortunately, you need to use, say, media query and maybe create a different set of the colors.

Chris: Oh... Yeah.

Andrey: But this is why math is so important. If you have a math calculation, it's not a problem. You just increase the saturation difference between the color and the computer will do everything for you.

Chris: Right. If you're a design systems thinker and that's how you've built your site, you could set... Chances are, you're already setting all these as custom properties, and you could set the whole slew of them differently.

Andrey: Exactly.

Chris: In a non-support situation.

Andrey: And the same with a dark theme. Again, this is just another set of the colors.

Chris: Right.

Andrey: If you have very proper math behind it, you can generate it, too. Unfortunately, there is a problem with this. You can do it only with OKLCH. You need another good thing called APCA, APCA contrast format.

Dave: APCA.

Chris: APCA - no idea. That's impossible to say. Yeah. [Laughter]

00:48:52

Dave: That's the new... What is APCA?

Chris: No idea. Never heard of it.

Andrey: It's a contrast math to calculate the contrast between two colors. Right now, we use--

Dave: That's the new kind of potentially WCAG 3.0 contrast algorithm that's kind of floating, right?

Andrey: Yeah.

Dave: Okay.

Andrey: The current one, to be honest -- it's very interesting -- is just very similar to OKLCH. To create the current contrast, you just convert the colors to the LAB format. It just calculates the difference between the L, the lightness. But unfortunately, the contrast doesn't work like this.

As I mentioned, colors are much more complicated. For instance, if you have text in one color and background in a different color, their contrast will be different if you will do the opposite, if you use the background for the text and the text color for the background. So, they're not interchangeable.

And APCA, it already uses all these problems, already built it inside the math, and so you calculate very good math. You have very good math to understand the contrast. Use them together, OKLCH with APCA, you can create the whole theme (the dark theme, the light theme, and ...) just with the math and a few hand-picked colors.

Dave: Wow. Interesting. I hadn't thought of those combined just to generate, like procedurally generate a dark theme. That's cool.

Andrey: Mm-hmm. A funny part about the stability for this, let's talk about it. The OKLCH color picker was created even to be used by screen readers. You know right now we... You think that maybe these tools are not suitable for the people who can see the colors, but we have a completely different opinion. It's even opposite.

OKLCH could be useful for them because they don't see how colors look like, and they can use math behind OKLCH to understand the colors just by these numbers. This is why all the OKLCH websites, you can use it only by keyboard and screen readers. It already was optimized for this way because it's important.

Chris: Well, that's nice. Good job.

Dave: No. Yeah, I mean I guess I think if you describe things in terms of lightness and chroma is maybe a bit weird, but hue, kind of here is where it is on the ROYGBIV spectrum, sort of. You know?

Chris: Yeah. I've also heard it's good. I mean screen readers is one level of accessibility issue, but there's people that are color blind, too, that maybe can see this website but not necessarily the colors on it but still use it because of the math.

Andrey: Yep. Yep. Or, for instance ... [indiscernible] developer who uses screen readers to work with, for instance, a developer who can see. But he sometimes needs to change the CSS just a little, and he can use this website to create just an error color for the main button.

Chris: Yeah. That's amazing. He's your perfect customer, I'd say.

Well, this is big-time for this. I'm glad we're doing this right now because, as we've mentioned at the top, I wasn't aware how eminent this was. I opened up my version of Chrome on my little booth computer here and it was Chrome 110, and the OKLCH gave me the little dotted line that said your browser will not display the P3 color space. Then I went About Chrome, and it started chugging away downloading version 11 or 111, and I restarted it. All of a sudden, I can see that. Like on this episode, that happened for me. So, the world is about to see some more vibrant colors.

I think Safari was first with the wide gamut with their P3 stuff. That one always confused me a little bit because you have to use the color function and then say which color space you're using and then put the values, which I think you can do for OKLCH too, but why would you?

00:53:17

Andrey: You don't have to. They just use color fonts called display between.

Chris: Yeah.

Andrey: And then the numbers just because... You know I don't know why, to be honest. It's really unsuitable for the people. But they use it. But I really think that you should use OKLCH. And the funny part, it was only one technology... it was only one version of Safari, which supports P3 but didn't support OKLCH color functions.

Chris: OKLCH.

Andrey: So, they mostly deploy wide gamut colors with OKLCH color functions together, and it's much better to define OKLCH with OKLCH color functions. For instance, for OKLCH color picker, we have the application icon. Of course, we use P3 colors for the application icon to be vibrant on your application list. And it's an SVG file. In SVG, you can use CSS. This is why you right now can use wide gamut colors even inside the SVG. We use OKLCH there, not color display between ... just OKLCH because Safari supports it.

Chris: Yeah. Nice. Yeah, that color function, I don't mind that there's a color function, but I was like, "Why is the syntax so weird?"

Dave: Oh, you have to assume 90% of the stuff in Safari is because somebody at Apple wanted it. [Laughter]

Chris: Do you kind of foresee the Web getting a little more saturated here in the next couple of years? Do you think so? I don't know. You'd go to websites and they're just going to start being brighter.

Andrey: Yep. Yep.

Dave: New era.

Chris: I kind of bet we will. People are going to start using these things. When you go to pick a color, if the color picker kind of supports people, they tend to drag up and to the right, like, "Give me a bright one."

Tooling is a big deal here. I'm glad the OKLCH tool is so good. but I also kind of hope that people copy you, that these good tools, and they're good copy and paste ability, which I'm obsessed with. I think every tool that wants to give you colors should support OKLCH and make sure that I can copy it really easily. Don't bury it behind those three inputs where I can't select across all of them. Ugh. Don't do that. [Laughter]

00:55:44

Andrey: By the way, right now we're supporting this tool called Huetone. It's a palette generator.

Chris: Okay.

Andrey: You have a very good contrast. It thinks about the contrast because it uses OKLCH inside. And so, we already have multiple tools with OKLCH. Use Huetone. It's a very nice tool.

Chris: Huetone, all right. All right, I think that might do it. Any final thoughts, Dave?

Dave: No, I guess, how do I get my designers to use it? What's the--?j

[Laughter]

Dave: The eternal challenge, how do I get my designers to use something? What's the secret?

Andrey: This is a very complex question. It's like ... [indiscernible] tools. Communication is not a problem, but between front-end developers and designers. The thing I like about OKLCH is because, to be honest, the designers think about color for years. But they communicate with front-end developers only with hex strings, and it was such a bad problem. This whole world of the colors, but we, as a front-end developer, don't see it and doesn't have a language to communicate with the designers.

But right now, we have a way. But not all designers knew about, have an idea about it. Yeah, unfortunately, we need to start more communication between the designers and front-end to explain that right now we have P2 colors. Start to educate.

My main recommendation here is go to your designer, choose an OKLCH color picker on the Apple screen, unfortunately, because it will be the best way to render the P2 colors right now, and explain to the designers that we have right now 30% more colors. What do you think about adding them to our landing page?

Sit them together and just do the magic and make a completely new landing page. It's very fun work. Create the bridges.

Dave: Yeah. Well, very cool. Hopefully, we see more colors here in the near future.

Chris: Yeah. I love it. The next time we have you on, you'll tell us why we stopped at 45%. Why don't we just do 100% right out of the gate, kids?

Andrey: [Laughter]

Chris: You'll have to--

Andrey: Unfortunately, the problem is with LED. We don't have such ... [indiscernible] right now.

Chris: Oh...

Andrey: We have only ... [indiscernible] which could produce much more saturated colors, and this is why we have a Rec. 2020 only in the cinema industry because they have projectors which use lasers. This is why, in a completely dark room, you can produce all colors.

Unfortunately, right now, you can buy a monitor only about 98% or something of the Rec. 2020 because, like this LED, we technically have it but it's extremely expensive. So, we need to wait a few years. Unfortunately, this is an area of hardware developers and physics, et cetera. We need to wait.

Chris: Gotta wait. All right. Fine.

Dave: Limited by physics. Ugh!

Chris: At least we have XYZ.

Andrey: [Laughter]

Dave: I hate physics. All right, well, Andrey, how can people follow you and give you money if they are not doing that already?

Andrey: Just go to the Twitter, @sitnikcode, for instance, or Open Collective, PostCSS will be the best options.

Dave: Awesome. Great. Yep.

Chris: All right. We'll link it up.

Dave: All right. Thank you for coming on the show. This has been really educational about OKLCH.

Thank you, dear listener, for downloading this in your podcatcher of choice. Be sure to star, heart, favorite it up. That's how people find out about the show.

Follow us on Mastodon, @[email protected].

Chris: Ooh... rough.

Dave: It's morse code, man. All right. Here we go. Thanks, Mastodon. At least it could be like toots.butt, so I think we lucked out. It's front-end.social.

Chris: Yeah, it could be worse.

Dave: All right. Then be sure to join us in the D-d-d-d-discord, patreon.com/shoptalkshow. Chris, do you go anything else you'd like to say?

Chris: Oh... ShopTalkShow.com.