Color in CSS Or: How I Learned to Disrespect Tennis

Everybody’s talking about container queries, nesting, scroll-driven animation, and view transitions. In all the excitement for these new modules, one topic is a bit overlooked: color in CSS. Manuel Matuzović summarises all the new things we can do in CSS with color to create flexible, scalable, accessible, and user-friendly design systems.

Oh, and he talks about squash…

Transcription

(Upbeat Music)

(Someone waking up, making a surprised sound)

[man talking on the phone] Well, I don’t know, honey, that car’s been parked there for a long time. Well, no, of course I did, and I had Cinco de Mayo at the Jeffersons. Whoa, that’s a mean-looking tennis player.

Tennis player.

Tennis player.

Tennis player.

Tennis player.

Tennis player.

(Music) I’m not a simple man, but I enjoy the simple things in life. Like how it feels to destroy the hopes of others with a slick flick of a line.

I don’t know what it’s like to be like everybody else. All of this pussheads sitting around the couch watching dog shit, I can relate to.

Cause football sucks!

Tennis sucks!

Baseball’s cool!

Curling rules!

But they’re not the sports for me, they’re not my cup of tea. Because I’m a squash man.

I’m a squash man.

And if you didn’t know it, I guess you know now.

[Manuel] That was the song “Squash Man”, by the squash-themed hardcore band, the Eradicator.

My name is Manuel Matusović, and today I’m here to talk about color in CSS.

And the reason why I’m at this very event is that about a year ago, I posted the following in social media. I wrote, “It surprises me how excited I am by color theory. I find it hard to understand and learn, but super interesting. I can see myself digging into colors on the web next year.” I didn’t expect much when I wrote it. I just put a thought on Macedon and I didn’t expect any reaction. But little did you know, Marc replied privately and in German he asked, “Would be the perfect time to talk about it in Berlin.” And I said, “Yes, so that’s why I’m here.” And the reason why I posted that is I was working on a new workshop with my friends at Smashing Magazine called the “Advance Modern CSS Masterclass” where I teach people all the new things in CSS. And in preparation for the workshop, I made a list of all the new properties, modules and terms that I wanted to teach people.

And of course, the list contains stuff like container queries, view transitions, coping, nesting, and my beloved has pseudo-class. So a lot of the things that people are really, really excited about and blog about a lot. But looking at the list, I also realized that many things in the list were related to color. And that got me curious. I was wondering what else is there we can do with color in CSS today. So I went back five years, ten years, even twenty years to see what else there is. And as it turns out, the list is pretty long and I’m probably not even covering everything we can do with color in CSS. And obviously, I mean, CSS is evolving, it’s constantly growing and in twenty years stuff happens, right? But when I had this list in front of me, I was surprised by how much there is and how little I was using. Or at least for the most part of my career.

So my goal today is to get you as excited about color and color theory as I am and apparently also Marc. So it’s not that would be here. And I also wanted to show you some cool stuff that you can do in CSS with color today. And to do that, we have to go back almost twenty five years because that’s when I made my first website. Don’t worry, I won’t take you down memory lane the next twenty minutes, but we have to start there because this is the code. This is the code I was writing on my first website. You can see there is no CSS. I’m using HTML to style the page. So you have to start an end tag here and I’m using presentational attributes like B, G, color, text and a link.

And I’m using hex values for those attributes.

And the reason why I’m showing you this code is that when I learned web development, I was told that I’m only supposed to use a tiny subset of the sixteen point seven million colors that RGB offers only two hundred and sixteen colors. The so-called web safe colors, because back then in the nineties or the early two thousands, when I started, there were still a lot of screens that didn’t support more than two hundred and fifty six colors. So if you really want to make sure that your colors get displayed, you had to pick one of these colors.

And by the way, it’s two hundred and sixteen and not two hundred and fifty six because forty colors were reserved for the operating system or something like that. So you could pick one out of two hundred and sixteen colors.

Couple of years later, I finally learned CSS and also the two hundred and fifty six color displays were history, but I was still doing the same thing like use hex values. But now in CSS with properties like background color, border color and color and so on. Another milestone in my early days was when finally in CSS we got gradients like the linear gradient function. That was huge for me because before that, if you want the gradient, you would have to open a application like Photoshop, for example, draw one, change the canvas size to one pixel, save that as an image.

Then in your CSS you would reference that one pixel with image and repeat it horizontally.

And here’s a gradient. Nice. You know, it sometimes needs some tweaking here and there. Cool. I mean, it’s fine. Like the gradient looks nice. It’s not perfect, but it’s OK. But of course, if you wanted to change something, you would have to go back to Photoshop and, you know, it’s not cool. But now we have the linear gradient function and all the other functions, which is amazing. And that was it. Like that’s all I’ve been doing with color for the first 15 years of building websites. There wasn’t much more except maybe the RGB or the RGB a function actually here and there because our B is really cool because it allows you to apply an alpha channel as well. But I never really understood how RGB the RGB function is better than hex because I find both essentially unreadable. Like for me, the developer experience using hex and RGB is horrible.

For example, can you tell which color this hex codes represents?

Is it better if I use RGB? It’s the color of the text here, like this pinkish red, whatever that is.

I was in Hamburg, like Marc just said two days ago, three days ago, and I talked to my friend Marco and he told me about this talk by a designer named David De Sandro, who actually can read hex and he’s color blind. So he can read hex and explain to you how the color looks like without actually being able to perceive it. I haven’t watched the talk, but it sounds really promising. So check it out. It’s online.

Anyways, what I like much better than hex and RGB, because like I said, the developer experience is horrible, is HSL because HSL is readable to me. So I can look at an HSL function. I can tell you kind of what color it is. HSL has three channels, but now we don’t mix red, green and blue anymore. But we have a hue and you pick the basically the hue is the color. You pick it on a color wheel starting at zero degrees up to 360 degrees. Then you have the saturation from 0% to 100%. So 100% is a really intense and vivid color. And then you have the lightness from 0% to 100%. 0% is black, 100% is white.

And if you know how the color wheel looks like, you can tell what a color will probably be. You know that it starts at zero with reds and then at 120 turns green and then at 240 it turns blue and then it turns red again. So if you look at the function, you know 120 is green, 100% means it’s an intense green and 10% means it’s dark.

So if you look at this representation of HSL, you can see we pick the color in the circle. If you want to apply saturation or chroma, we go from the inside out and if you want to define lightness, we go up and down. And HSL is especially great when you’re working with custom properties. I have this super awesome notification component here at DIV. And I’m applying a background color and a border color. And I’m using custom properties for the border color and the background color and the border color. And the code is fine. But there’s just one thing that I would improve here. I would want to make it more dynamic because now we have static values here and you can see there’s also some repetition. So both the border and the background have the same hue and the same saturation. Only the lightness is different. So what you can do is just create more custom properties, one for the hue, one for the saturation, one for the lightness. You reuse the hue, you reuse the saturation and you actually also reuse the lightness, but you just put it in a calc function and subtract 20%.

And this is really cool because now you have almost something like a system here because if you wanted variations of this notification component, then all you have to do is just change the hue custom property. You just change the color and you immediately get the corresponding border color and so on. So this is really awesome. It sounds like HSL is perfect for color systems inside your design systems.

But there is a problem with HSL. It’s like tennis. It has some great features, some great concepts, but it sucks.

Before I can explain why, we have to learn two new terms. We need to understand these terms in order to talk about color spaces and HSL and maybe better options.

By the way, now I guess it’s a good time to tell you that I’m not an expert in color theory. I’m just a CSS developer. So the things that I say today are kind of right. Not 100% accurate, but good enough for you, CSS developers.

And me as a CSS developer. So I did a lot of research, but the things I’m saying here are not scientific, but good enough for us, CSS.

The first term we need to learn is gamet. The gamet defines the range of colors. How many colors are there? And a gamet can have a name, for example, sRGB or these three.

Here you see a representation of the sRGB gamet, the triangle here. And the colors inside the triangle are the colors that we can use in sRGB.

And then there is another shape, this gray shape, much larger shape outside. And this represents the colors that we can actually perceive as humans. So there are way more colors that we could see and actually use, but sRGB is limited to the colors inside this triangle.

And there are different gametes. There’s not just sRGB, but there’s, for example, display P3. Some more triangles here. So the inner triangle, the red one is sRGB. You can see there is one that’s slightly larger, the purple one, that’s display P3. And then we have stuff like Rec 2020 or Profoto, which can display even more colors.

So we use the term gamet to define how many colors there are. And if you want to talk about the range, you can say that it’s a low range or a narrow gamet or a high range or a wide gamet.

Another term we need to know is color spaces. A color space is an arrangement of a gamet. So it takes the colors from a gamet and arranges them and it also establishes a method for accessing the color. So, for example, in the RGB color space, and this is kind of confusing. So there’s the sRGB gamet, but there’s also a color space named RGB. In the RGB gamet, we have a square shape and this is the arrangement of the sRGB gamet. And the way of accessing the color is by using blue, red and green. And you already know that, like when you use HEX or when you use the RGB function, that’s basically what you’re doing here. There is another color space that also uses the sRGB gamet, HSL, but now the shape is different. Now we have a cylindric shape and also the method of accessing the colors is different. Like I already told you, you have the hue, saturation and lightness.

So you use the term color space to talk about an arrangement of colors and how and methods for accessing them. And also when you talk about interpolation, which you will do later.

Here’s a 3D demonstration of the sRGB color space and the colors you see inside here are the name colors in CSS. So that’s how they look in the RGB color space and we switch to a conic representation of HSL. This is how the same colors look in HSL.

So, coming back to the problem with HSL. The RGB color space is in a square shape. When we convert to HSL, we get this conic shape.

And as long as we stay inside that shape with our combinations of hue, saturation and lightness, we are fine. It will give us a color.

But if we combine values that are outside that shape, which is absolutely possible because we can use any amount of saturation and lightness with any hue, then it may happen that we get outside of that shape. Because not every hue has a combination for every amount of saturation and lightness. And this is kind of a problem because it might happen that we get out of gamut. So we are outside of the gamut, we try to pick a color that doesn’t exist.

And on top of that, you can see how this shape looks like a perfect circle in the middle, but in reality it isn’t because different hues have different amount of maximum saturation.

A good way of dealing with that would be to just find the closest color that matches that combination. But unfortunately, that’s not how it works in HSL because HSL is pretty old and back then they weren’t able to find an algorithm that does that in a performant way. So what they did instead is that they just used white and black to fill up this conic shape, creating a cylindric shape. So they just fill up the top with white and fill up the bottom with black and then it can’t happen that you are out of gamut.

That’s an easy mathematical transformation of RGB, but one that doesn’t reflect human perception because this is not how we perceive lightness. Which means that the lightness component in HSL is not accurate. And that’s why it’s like tennis.

So it’s...

No, it’s so random. I’m sorry.

So HSL is fine for picking a single color. That’s absolutely fine, but it’s not suitable for using it in a color system.

Because the results can be very unexpected and they’re also not uniform. Here is a demo to show you how that looks like. So what you see here are different hues, different colors, and they all have the same amount of saturation, 100% and the same lightness, 50%. And can you see the problem here? Can you see what’s wrong with it? I think it even works on this screen.

The greens are so much lighter than the blues for some reason, but we’re using the same lightness and the same saturation. Only the color, only the hue is different. And that’s the problem we have with HSL.

So while this scale might have consistent lightness according to the color model, it definitely just feels wrong for us visually.

And this is why we say that HSL is perceptionally not uniform. You don’t get the same perceived lightness. They’re different.

And if we work with CSS, that can be a problem. Here’s an example. So we have two buttons here. They have a dark purple background color. One button says “Send” and one says “Save”. Oh, shit, I’m using the wrong element here. It should be a div. I’m sorry.

And you can see how they look the same. And now I want to create a variation of the “Save” button. I want it to be green. Now, if we use the same system that we had in my notification component, that’s easy, because we have hue saturation and lightness. And we only want to change the hue to something close to 120, because this will give us a green button. And if we do that, that’s what we get. A really, really light green, which is unexpected, because we didn’t change the lightness, we didn’t change the saturation. Only the hue.

And this color doesn’t harmonize at all with the purple color, because we would expect it to have the same perceived lightness. And also, it’s bad for accessibility, because the combination of white and purple works, and I would expect to also work with green. But here, the contrast is definitely not high enough.

And this is where Lab comes into play.

Lab was designed as a perception of a uniform color space. It takes human perception into account. I have no idea how they do that, but it’s a cool thing to say. It just works. I’m an expert.

So, unlike the RGB color model, Lab can in theory cover the entire range of visible colors. So, if our screens get better, then Lab can also display more colors, which is a cool thing. We have three channels here. We have L, the lightness, which also takes a value from 0% to 100%, or 0 to 1. We have A and B, and the A axis is relative to the opponent’s green and red. So, if you’re moving towards a negative value, you get green. If you’re moving towards a positive value, you get red. And the B component is relative to the opponent’s blue and yellow. Again, the negative value is moving towards blue, and the positive value towards yellow.

So, Lab is great because it works similarly like...

No, it’s great because it’s a perception of a uniform, sorry. And it also uses the display P3 gamut. So, it doesn’t use sRGB, but display P3. If you remember the red triangle and the purple triangle, it only looked slightly larger, but there are actually way more colors in P3. It’s 50% more colors. So, today you can use much, much more colors than with Hex and RGB.

The only thing that I don’t like about Lab is that, again, we are mixing colors. And this just doesn’t work for my brain. Like, it doesn’t work that I have to mix green with blue, and I don’t know what the result is. I can only write CSS.

Luckily, there is LCH. And just like HSL is an easier to use cylindrical representation of RGB, LCH is an easier to use cylindrical representation of Lab. So, instead of the A and B components, we now have Chroma, which is basically saturation, you can say, and Hue, and the lightness stays the same.

And it also uses a similar hue color wheel or hue angle like HSL, but instead of three colors, it uses four colors. That’s the only difference, so the degrees will give you a different result.

And you can also see how LCH is also in this cylindrical shape, but it doesn’t fill it up artificially with white and black.

The thing is with LCH, it doesn’t fill it up with white and black, but it applies gamut mapping. So, if you pick a color that is out of gamut, it’s actually in this white space here, so you get no result. In HSL, you will always get a result, but in LCH, you don’t get a result. What really makes sense here is to just apply gamut mapping. So, you take the value, try to find the closest color that is still in gamut.

Sounds like a smart idea. It makes sense to me as someone who doesn’t understand color theory.

But unfortunately, what browser vendors did is they applied a naive clipping mechanism. So, instead of mapping the colors, what they do is they just clip the RG and B values. And this can be a problem if you pick a color that’s white out of gamut.

The problem is that with clipping, the lightness is not preserved. Here’s a demo that illustrates that. So, you have a couple of rows here. In the first row, you see I’m using the color 90%, 50% and 0 degrees. And this color is still in gamut. As soon as I increase the saturation to 16%, we are already out of gamut, but the color is still the same, so it’s fine. 70%, 18%, 19%, 20%, it’s all fine. We still have the same color.

But as soon as I’m jumping to 40%, 60%, so I’m really white out of gamut, we get a different result.

And that’s really unexpected.

Here’s another demo, one by Miriam. So, we are using here a blue color, a hue of 242 and chroma 50%. And on the left, you see a gradient from 100% lightness to 0% lightness in the browser as it is today. And then you see the same thing as designed by the spec. So, this is how it not works in browsers, and this is what we have in browsers today. And you can see how the right gradient makes much, much more sense. Because it actually starts at white, because 100% is white. Then it slowly gets light blue, until it gets dark blue, and then finally black. But what we have in browsers today, at least with this combination of saturation and hue and lightness, is it starts randomly at light blue, gets a bit darker, but not really dark.

And, yeah, that’s a problem. That’s a huge problem. Because with more and more color spaces, and also differently shaped color spaces, and also random numbers, I will show you the numbers, how to use LCH and so on, it’s really likely to get out of gamut. So, it will happen, and it will also happen to get widely out of gamut. And we need an algorithm that mitigates the problems. Like, the browser, whatever, I don’t know who it is, who has to solve the problem, but I guess it’s the browser. It just has to make sure that it closely matches our expectations. Miriam was so nice to raise an issue last year with the CSS Working Group. There is a threat, it’s a pretty long threat, and a lot of opinions.

So, if you want to get mad, you just sit down and read the thread.

They’re working on different solutions, but I don’t really know where they are now. So, we still have this not so great solution in the browser. They may change it, but yeah.

We’ll see. So, if HSL is tennis, then LCH and LAB are curling.

They are great, but they’re just not a sport for me. That’s because there is a bug in the lab in LCH. Yes, there can be a bug in a color space. Who knew? And here it is. When you use a hue value between 270 and 330, there is an unexpected hue shift towards purple. And you can see that here. So, at the tip of the triangle, you have blue. And then, if you transition towards white, what you would expect is that the blue turns to light blue and then finally to white. And if you transition from blue to black, you want it to be dark blue and then finally black. But you can see how the blue turns purple. And that’s because there is a bug.

And that’s why Bjorn Autoson designed a new color space, one that’s also perceptually uniform, that takes human perception into account, and one that fixes that bug. So, this is how it looks like in this new color space. So, now you can see this nice transition to light blue and dark blue. That’s perfect. And this new color space is called OKLab, because it’s an OK implementation of lab.

Really, it says here in this back, it says, “It’s called OKLab Color Space because it’s an OKLab color space.”

I really love the pragmatism here. So, that’s really cool.

Here’s a demo to show that. So, what we have here are two color pickers, the huge squares at the top are color pickers.

And I picked the blue and here’s the white. And now I’m mixing white to the blue color in the lab color space.

And that’s really unexpected because it turns purple. And now I’m switching from lab to OKLab. And this is OK.

That’s fine.

So, for you, that means in most cases, it’s better to use OKLab and OKLCH because these color spaces fix the bug. In CSS, we have dedicated functions for all of them. So, there’s an LCH, an LAB, OKLCH, and OKLAB function that you can use. The numbers look super random because they are, if you ask me.

So, if you look at OKLCH, it has lightness. I understand lightness is 0% to 100% or 0% to 1%. Chroma goes from 0 to 0.37. And then you have the hue wheel and you can also apply an alpha channel if you want to. In OKLab, we have the same lightness and A and B go from 0.4, 0.4 to 0.4.

Magic numbers, but luckily there are color because like this one at OKLCH.com by the Evil Martian screw. And you can see that you have for each channel, you have range sliders. And what I really like about that is like you have a lot of white areas in those range sliders. And those represent colors that are out of gamut. So, as soon as you move into one of the white areas, you know, OK, display P3 doesn’t support that color. And there is a 3D animation for people who understand it. And you can also drop in and hex value, for example, and will convert it to OKLCH. This is a really, really useful tool.

So, if you go back to my example from earlier where I’m using my, you know, HSL technique here to create a button, this is what we have with HSL. And this is the same thing with LCH. And that matches my expectations because now I have a color that really harmonizes with the purple. And it also is probably accessible. I didn’t test it, but it should be. Cool. You may have noticed that in LCH, I’m not using any commas. So, in the new functions, because there is a new space separated functional color notation syntax. And you can use it with the old functions. So, if you use RGB, you can use commas. Or now you can also use spaces if you want to, which is really convenient because you can forget about RGB. You can just add a slash and also apply opacity with RGB.

But the important part here is with the new functions like OKLCH, LAB and so on, you have to use the space separated syntax. So, the commas separated syntax doesn’t work. All right. So, we have dedicated functions for LCH and LAB and so on. But what if you wanted to use a color in a different color space because there are way more color spaces?

What if you wanted to use a color space like sRGB-linear? That’s where color comes into play, the color function. It takes up to five values. The first value is the name of the color space.

So, for example, Rec2020 or sRGB-linear. Then you have three channels, RGB. You define them using values from 0 to 100% or 0 to 1. And then there’s this optional alpha channel. And that’s how you can use sRGB-linear if you want to, if you need to. But please remember that just because you can use a color space doesn’t mean that your device actually supports it. So, you may want to do some feature detection. And it’s actually possible in CSS there is this color gamut media feature where you can check does this browser support a white gamut? It uses the value P3, but P3 doesn’t necessarily stand for display P3. It just stands for white gamut. So, yeah. P3 represents white gamut and Rec2020 represents really white gamut.

Don’t laugh. Chris Lindley said that. I just copied it. He knows color. That’s how he said it. Just copying their stuff.

All right. What’s really cool about having different color spaces is that we can use them now in gradients. And this allows us to create different gradients or differently looking gradients because colors are arranged differently in different color spaces, which gives different results in gradients.

So, if we take a function like linear gradient and we create a gradient from left to right or from start to end and we start with hot pink and aqua, then we get a nice gradient. Cool. Or not so nice because RGB is actually not really cool for gradients.

What if you wanted to use another color space? We just use the in keyword. So, we can say, you know what, give me this gradient, but in oklab or in okrch.

And here’s a comparison. So, we have the same gradient from hot pink to aqua in sRGB, in oklab and in okrch. And what you maybe see is that RGB is too dark and that okrch is way more vibrant colors than oklab. So, you might want to use okrch for your gradients or not. You just test and you know, you just when you create a gradient and you don’t like it, you don’t like how the colors look like, just test different color spaces and see what works for you.

Another really cool thing is that now with polar color spaces, we can also, we also have options for hue interpolation because by default, if you create a gradient, it always takes the shortest routes on the color wheel. So, if you make a gradient from green to purple, it will take the shorter route here. Now we have control over that. So, in CSS, in addition to the in keyword, we can also say, you know what, take the shorter hue or the longer hue. And this is how it looks like. So, this is the same gradient, hot pink to aqua, but now on top it takes the shorter route and in the bottom it takes the longer route.

And having access to different color spaces is not just great for gradients, but also for color mixing. Color, what, you say? Yes, we can mix colors and Miriam kind of spoiled it because it was in her slides, but that’s not a problem. Here it is again.

So, it’s fine. You ruined the entire talk. So, what we can do now in CSS is we can mix two colors and we can also define the color space. So, we can say mix two colors in sRGB or in display P3 or whatever. And then we get a new color. And that’s the color we get when we mix hot pink and aqua in sRGB. No one is laughing. That’s the squash ball. I drew a squash ball in keynotes. Okay.

I was so happy yesterday at 10.30 p.m. when I made that, but okay. Thank you. That’s the reaction.

What’s cool about that is that we can also now specify how much we want. Like, we can say, you know, by default it’s just 50-50. We get 50% hot pink, 50% aqua. But we can say, no, give me 70% hot pink and 30% aqua. And that’s really cool because I didn’t know that this goes way back, like this very similar syntax here. So, it’s so nice to see. If you use values that don’t add up to 100%, then the remaining value will be added as an alpha channel. So, that’s why this color looks very grayed out. And something I found really confusing is that if you mix the two colors in different spaces, you get really, really different results. You can see how in HSL you have this purplish blue, strong color. Then you have in XYZ it’s almost gray. And then LCH you have this light blue. And I found that really confusing, but the best way to deal with it is to just accept it. It’s just really, that works really well for me. Like, I know that if I mix colors, I’m just going to try it in different color spaces. And sometimes it will look horrible. Sometimes it will look great. And that’s life. Let me just move on.

Here’s a great tool by Adam Argyle. So, like I said, you can pick two colors and you can test how it looks like in different color spaces.

And also in the middle, there’s a range slider, so you can specify the amount of color that you want to mix.

All right. So, we have all those new color spaces and we have some new color functions. And that’s all great. But what if you’re working with some legacy CSS? If we’re working with some third party CSS, someone is providing us with boring old hex codes. Then we can use the relative color syntax. And I really love that. Because it allows us to use an existing color from a different color space in a new color space. So, you can see here I’m using the OK LCH function. And I have a bug here. No! I changed yesterday. There’s a keyboard missing. It should say from the color, use the LC and H channels. You can just say, from this hex code, please use the LCH in my OK LCH function. And what’s fantastic about that is that I can also use it as a custom property. So, I can just use a custom property, reference it here. And what I can do as well is I can say, you know what, give me the lightness, give me the chroma, but I want a different hue. So, you just change the hue.

Or you can leave the hue and change the lightness. You can do whatever you want. You can even use Kalk in there. So, you can say, you know what, from the color, give me hue saturation. So, I’m using HSL here. Hue and saturation and subtract 10% from the lightness. And this is really, really powerful.

And we can also use the channel keywords in their corresponding arguments, or we can just mix them up and get really wild here. I took that from the spec. I don’t know what it does, but you can see how RG and BR in all different, in all three places and something is happening.

So, if we now look back at my notification component from earlier, you can see how I did it in the past. And now I’ve created a custom property for my base color, like the info color, the blue. And based on this color, I’ve created two more colors. I’m just using from, I’m referencing the base color, and all I do is I’m changing the hue. So, we are taking the same lightness, the same chroma. We’re only changing the hue. It should look fine because it’s okay. And then we just use it as a background color. And in my border color, I’m tweaking the magic numbers some more to get a similar effect.

Yeah, it takes some time to get into OK LCH and OK lab because the numbers, like I said, really feel random a little bit, but yeah, with the help of color because it works well.

All right.

Another really cool thing is color fonts. So, we’re moving now to a different topic. And color fonts are really awesome. What you see here is a random arrangement of...

A random arrangement of randomly picked letters.

And at first sight, it doesn’t look special. But at second, you realize there are multiple colors in there. And I didn’t use like an image from words like what’s called clipart. I didn’t export clipart here. That’s actually a WAV file, like a WAV2 file. And it comes with different colors. And it also comes with different palettes. So, this font file also has different color schemes built into the font, similar to like a variable font has different axis built into the font.

So, if you want to use one of those, you have to create a new add rule, the font palette values add rule. You define a name using this dash dash syntax. So, I just came up with pink because, you know, it’s a pink scheme. And then you have to define the font family, which is a... I guess. And then you reference the corresponding palette using the base palette property. And if you want to use it at the very bottom, you use font palette. And then you just reference the name of the add rule that you created.

Now, the big question is, how do I know if a color font comes with color schemes and how many are there? There is a great, great tool by Ruloniskans. And I absolutely love the websites because it’s so random. He put food on a font website. Who would do that? Like, who would put food or sports into a very technical topic? And what you can do here is you just drop a font, it will analyze it, it will tell you all kinds of information about the font, like how many glyphs are there, how big it is, what’s the format, how many languages does it support, and it also shows the different color schemes that you can use. And it also has information about, you know, axis, so if it’s a variable font, you also get that information. So, that’s how you know how many schemes there are and you can use them or how many palettes there are. If you don’t like a color, you just use the override colors property. It’s zero index, so if you want to change the first color, you use zero. If you want to change the fourth color, you use three and you just define another value.

And if you want to create a custom scheme, you just override all the values, use override values, you change all the colors, and then again, in this randomly arranged, random arrangement of random letters, you can see...

...my own color scheme. Talking of color schemes, or in other words, dark mode, dark mode is also really awesome and there are all kinds of things you can do with that today.

If we create a really simple HTML document with almost no CSS, so... I forgot about that.

So, if there’s only like, you see here, just a font family and a line height and nothing much else, nothing else, and you change the theme to a dark theme by emulating it in the browser or in the operating system, nothing happens. Actually, in Miriam’s slides, we saw an option in the preferences in Chrome where you can say that dark is the default. I didn’t know that. So, by default, it’s just a light theme. We can change that using the color scheme property and we can tell the browser in what this page exists in light and dark. And you can do the same using HTML by using the color scheme at attack. And now, if I change the dark mode here, you can see how it turns into a dark theme. And I didn’t specify any colors, that’s just how it works by default.

But eventually, you will have to define colors and change them. For example, for the check boxes, I’m defining a new accent color, another thing we can do with color. And then in the prefers color scheme, media feature or media query, I’m saying in the dark theme, please use a different color.

Or what we can do now is we can use the light dark function. The light dark function takes two values. The first one is the color that you want to use in the light theme and the second one is the color that you want to use in the dark theme. So you don’t need the media query anymore.

Yeah, so we have hot pink in the light theme and if we switch, we get pink in the dark theme.

There’s an article by my friend Sarah Joy on CSS tricks, which is back from the dead, it seems. And they’re now actually publishing proper articles again. And she took a deep dive into the light, dark function and also color schemes. It’s really, really extensive. So if you want to learn about all that, check out their post.

And there are more media features. For example, there is the prefers reduce transparency media feature that listens to the transparency settings in some operating systems.

So let’s say you have an image and above the image, there is a diff with a background color and you want the image to shine through and in the diff you have some text for some people. It’s hard to read because you know it’s harder to read when you don’t have a solid color, but the background image shining through. And this is the same with trends like glass morphism where you have this glassy look here. For some people that’s hard to read. So what you can do is you can say if they have a preference for that for reduced transparency, you just define a different opacity, for example.

Another option we have is there is a prefers contrast option in Mac OS at least where users can change the operating system to using highly contrasting colors. That’s not high contrast mode in Windows where you have a complete really different theme. But here it’s just stronger contrast for existing stuff and stuff like borders and so on. And we can make changes according to that as well. But I would take that with a grain of salt because it doesn’t work as expected. My friend Killian Walckoff wrote a poll post called I no longer understand prefers contrast, which is pretty interesting. So check it out. And then we have also another one for forced colors that we can use to make tweak to tweak certain elements in high contrast mode.

All right, that’s it for me. Okay, here’s the thing in preparation for the workshop. I went on I stock photo and so on and I was searching for squash and then I have this come up and was like, what? What? And then I opened the dictionary and was like, oh, it’s called squash in English. I didn’t know that. So yeah, it sucks when you have to explain a joke. So I showed you most of the stuff that I recently learned and stuff that I find really interesting. And now it’s your turn. Now it’s your turn. You have to use this stuff experiment. Try to find out what the different color spaces can do for you and write about it and talk about it. For example, yesterday I was talking to Miriam and she told me how cool it is that we can use color mix in combination with the light star function to create new colors relative to the theme, which is really cool. Or I talked to Roma also yesterday who told me how he came up with a solution to query the color scheme. So he’s using container style queries to find out which color scheme is currently active.

And he also told me about this post by leave a rule where she basically creates the recreates the contrast color function, which doesn’t exist yet to generate automatically generate the text color that has high enough contrast for an existing background color using the relative color syntax. I’m not going to pretend like I understand anything she wrote because she’s just I don’t know not from this world, but it’s super super interesting stuff and that’s what we need. We need people to to to just experiment and see what we can do with color. And before you ask me after the talk why squash? There’s absolutely no reason. I just needed a theme for the slides and one morning I woke up and was like yeah, we’re an educator squash man. Thank you so much for listening. I hope you didn’t jolly.