 Welcome to another episode of GUI challenges where I build interfaces my way and then I challenge you to do it your way because with our creative minds combined we will find multiple ways to solve these interfaces and expand the diversity of our skills and today we're looking at color and we're specifically looking at the relative color syntax and what it can do all of its features. I'm going to break down about 10 or 11. I didn't even count how many versions of like kind of handy ways that you can use relative syntax but let's check them out in today's GUI challenge. So here's our little demo site this is what I've built to sort of showcase what is relative color syntax a couple links like to the spec into the can I use and a brief breakdown of like what it is and so relative color syntax creates a new color from another color. You can break a color into variables modify those variables and return those edits and modifications for a newly defined colors values. This little image here well here let's look at the large one this is kind of showing you how it works you say RGB you can kind of pick a color space to work from and I'll just start with RGB since a lot of y'all are familiar with that we're going to make a new RGB color from this named color of green and what the browser is going to do and what the syntax does is it breaks this green down into RGB values passes those values up and over into here for you to use as well as alpha with the slash so this is pretty much like if we got rid of from in green we're defining a new color RGB you know we've RGB we can put numbers here we can also well you'll see we could put whatever number we want here and we don't have to use the variable but then the slash syntax allows us to optionally pass alpha so you don't have to use RGB any a anymore you just use RGB and so that's the sort of semantics of the effect here and we're going to use that to do all sorts of really cool color modifications so let's also check out can i use we can see it's already in safari chrome i'm in canary right now with the experiments turned on so here i've got the experimental web platform features you go to chrome colon slash slash flags and you can find this and you enable it and you can go test this out in canary today it is set to ship though in 118 you can kind of see that here with the little green flag so that's the next stable version of chrome is going to have relative color syntax and this is a very very powerful way to work with color so let's check back at our demo and look at all the different kind of use cases that i've outlined here and so i've got one right here this is just well let's let's twirl it open let's twirl open all of them and just go through each of these one by one so right here we have the basics and this is very similar to the image that we've already seen but this says okay lch from hex code a hex of yellow lch so really all that this does is this converts from hex to okay lch and does no transformations to it so this is sort of just extracting and converting a color and it might seem a little useless at first um because you know just a straight conversion doesn't really do anything but this is a great introduction to the syntax since everything's very minimal notice i didn't pass any alpha and i'm just showing that you can make a color from another color especially like a hex color and we'll do modifications to this like light net or dark in it there's all sorts of cool things and so those are the big basics here where we're just doing color space conversion over here we're just showing that it can work with custom properties so i've got an okay lab new color being extracted from a variable that's called cyan and that just so happens to be holding a value of cyan and this can be an rgb it can be an hex it can be an okay lch it doesn't matter what color space this variable is in it's going to get broken down and converted into okay lab and then lab come back for us for use and this is kind of cool just to show that it works with custom properties i think it might even work best with custom properties did i say that here yay it's it's never been more useful because if you've got like a brand color this works out really well and yeah there's the statement it might even be best with custom properties okay so we've gone over the basics we've gone over that it works with custom properties and now we can kind of get into these other pieces let's close these out since we know what they mean now all right so this one says do math on the pieces with calc so if i focus in on this one we can see i'm passing in lime i'm making an hsl color from lime and notice how it's pink the output of this color is pink and that's because i've taken the h value and subtracted 180 like 180 degrees this is like doing a full 180 turn on the hue which kind of gives us the complement and so you can see that then i just pass in s and l as they were so i'm not changing the saturation i'm not changing the lightness all i'm doing is rotating the hue with a calc on one of those variables that we get in here and so this finds the color in the opposite side of the wheel because we basically spun the hue by 180 degrees you also have access to other functions so it's not just calc you can use clamp min max sine cosine etc all these different mathematical functions that allow you to kind of compute in css they work here inside of these color um functions which is super cool and so that is you can do pieces uh do math on the pieces with calc and we'll go into even more ways that that becomes useful so then here access an alpha channel value so let's say we've got a you know semi transparent yellow so it's already kind of transparent we can make a new lch color from that so we just take lc and h so we're not changing the color itself but look at this we do slash calc alpha divided by two so we cut the alpha in half of whatever it currently is so like if it's 50 transparent we are now making a 25 transparent yellow and this could be nice for hover effects maybe for shadows things like that but just the idea that you can take any color and give it alpha or modify the alpha is super valuable so you can think of like a brand color and you need to make like a kind of cool hover highlight that like bursts out out from the button or something which is something i i do all the time in my ui but anyway you can make it semi transparent based on a brand color really easy just by changing the alpha with the relative color syntax and so yep here i just cut the opacity in half relatively adjusting the opacity so the relative change there's what's key it's relative because i used whatever its current alpha was then later you're going to see i make some absolute changes where you don't have to use calc alpha you could just throw away alpha entirely do slash 50 percent and just make a 50 version of yellow so it throws away the yellow that what or the transparency that was on this transparent yellow and just absolutely sets a new one so you have the option to use relative transformations or absolute transformations and i find that distinguishing kind of idea to be really really valuable as we move forward okay so you have access to channel values and calc works on them and it works with custom properties super cool stuff what else do we got here well like i was saying you can make an absolute change right i call this an absolute change versus a relative change where a relative change would have taken into consideration the value of the variable and in this case here we take transparent yellow and look it's just like i was saying we pass in a new alpha for the alpha channel so we you can do that with any of these channel values too so you can throw away the lightness and just put a number here put a number in the chroma put a number in the hue any valid value that goes into these channel values can be just thrown in here and so you can partially use or fully use the extracted variables that you get from one of these colors it's super cool all great so that was an absolute change to pass an entirely new value let's look at how to desaturate a color with the relative color syntax so we have hsl from magenta we're taking hue so we want to stay in the same hue we're going to calc on s the saturation and we're going to divide it by two and then pass the l channel back in so we've cut the saturation of this magenta color in half and here's our result on the left and that's pretty sweet we just cut the saturation and you can also do this in chroma it just depends on the color space that you choose so there's multiple ways for you to change saturation to change chroma just depends on which color space you chose from here so here i chose hsl which is going to give me the s value but we could also use chroma here and just do our math on the c value and then change the saturation that way chroma and saturation are not a hundred percent interchangeable so it might be worth testing out each to see which one you like the results of better so that's desaturating a color with relative color syntax let's also look at desaturation by just setting a new value so this is again like the absolute change so i'm taking magenta i'm saying hue and lightness and then i'm just providing a new saturation value 20 so i think magenta has normally a hundred percent saturation and i've said well i just want 25 percent of that so instead of doing math on that value i just pass in an entirely new saturation value and i get this nice little mauve kind of cool particularly effective in ok lch and ok lab and that's because the saturation of the chroma like to desaturate they stay in that perceptually linear lightness and so it's kind of nice to think about things that way so to desaturate relative or desaturate absolute so we had a couple of examples of that with alpha and saturation now super cool and here's another interesting one you can do you can chroma boost so normally we talk about colors like removing the saturation but you could also add saturation or add chroma so in this case i'm taking a color from lime which is in the srgb color space which has a maximum amount of brightness that that color space can represent i'm taking that color turning it into an ok lch color and taking the chroma and boosting it up to 0.4 normally this lime color would probably come in at about like 25.25.3 and i've said 0.4 which is going to take that lime green and really boost it up into the maximum lime green that this display can show so that's why i'm calling that a chroma boost because uh well we turned up the saturation into a new wider gamut color space of ok lch and then leveraged its ability to represent higher chroma colors by passing in a higher chroma color so again in this one we're converting from a lower like a narrow gamut to a wide gamut color and then boosting the chroma inside of their super duper cool stuff okay so here's another one we got reliably lighten so you can lighten in hsl with the l channel if you want you could lighten in a couple of other ways but i'm going to lighten this blue in ok lab because look at that lighten i got here i lightened it by 20 by 20 percent so i make i made it like i increased the lightness which is going to be towards white and i think that that's a really nice blue you'll find that if you try to lighten in hsl or other color spaces you might get an undesirable result and ok lab is a very very good space to color mix or in this case to lighten and color um just a cool trick that you can take a hex color or whatever kind of color you don't have to care what kind of color is in this variable you're just converting it to ok lab and lightening it inside of a space that's nice and reliable for that task super cool look at this one liner i'm going to use this one all the time for hover effects and stuff and conversely you can reliably darken so here i'm taking l and i'm subtracting 20 so i'm moving it closer to darkness closer to a black color and we can see i've got a darker red from this very very vibrant bright red super cool and yeah just a note as it says here different color spaces will give different results and that is something that we're just going to have to live with as we all still figure out color in this digital world right now okay here's another trick you can just remove the hue entirely so here we're passing in yellow which is going to have a hue saturation and lightness and look i passed the value of none and so i'm like i don't care what the hue was but i do want to stay within the saturation and lightness of this color and hue of none is going to essentially be zero and that gets us into red and so that's why we see a red color here so you have the opportunity to completely remove color values or color channels by passing the none value in which is a normal part of the syntax and in this case this is an absolute change like we were talking about earlier absolute first relative because i didn't do any math on the variable i just set a new value here and that's just kind of a cool thing to think about you can remove the hue you can remove saturation you could remove lightness entirely from a converted color in relative color syntax you could also just go grayscale so here we take cyan we were like hey i like the lightness in the hue but i want no chroma and then we convert it to a nice little light gray that's in the same brightness and vibrancy visually that your eye has between the cyan and this gray it's just lacking chroma entirely which is kind of cool so you can go grayscale any color that you want with just a little bit of relative color syntax you can find a complementary color which is kind of what we did in this example up here but this one's much more explicit where we're just calling it out as a feature so we're taking orange we're rotating the hue 180 degrees and that's going to give us blue right so we're getting the complementary color we could change this to yellow and we'd get purple you know etc so if you know the color wheel and you want a complementary color an analogous color things like that you can rotate the hue here keep the saturation of lightness and make really nice palettes this way so kind of cool and you can invert colors so this also depends on the color space and the strategy of what you're going to invert but here i'm using rgb and i'm inverting each of the r g and b channels by taking one and subtracting their current value so this is um the the strategy that you can use to invert colors in rgb look we kind of get the complementary here but really it's an inverted color just kind of a cool technique you'll need to employ a different strategy if you're using okay lab or okay lch but still the opportunity to invert the the values of each of the variables here is there for you which is kind of cool all right you can also with the syntax mix and match so look at this i'm making a color from yellow and rgb and then i'm passing the alpha as the r channel the b variable as the g value oh this is really hard the wait the b as the g the g is the b and the red as the alpha and like it mixes pink color just so you can mix and match them like this you don't have to put them back in order those variables are there for you to you to use in the channels as you see fit which is also kind of cool that you can do this you can repeat one of those variables over and over again so here i'm just taking a variable um making hot pink into rgb and then just repeating g over and over again which is going to give me a gray color because this is you know this is going to be 80 80 80 or something like that so you get a nice gray color out of it but that's just kind of cool the syntax works like that you can mix and match and you can repeat the variables you could even add variables together if you wanted to and our last example is a gotcha with the color function so notice we're using the color function from here now normally the first parameter that you'd pass in the color function is the color space that you want to make the color in but with the relative color syntax that comes after the from keyword and the color that gets passed in so that's why i'm noting it here's a gotcha is you might have expected to say color open parentheses display p3 from yellow you know rgb but that's not how the syntax works the syntax wants to know the from color before you start defining the rest of the color value and that is it for all of the different demos with relative color syntax i'm super duper excited about this you can you can take this syntax and build really really incredible things i have a prototype where um well here i'll just show you the prototype all right so here's my code pen this is open props kind of prototyping the ability to use relative color syntax to define many different well balanced palettes all with one definition of color and then we're just changing the hue for each of these and getting an entirely new palette so again this is one definite this is 50 look here they are 15 color variables that all i do is change the hue see how it says from color base so i'm going to pass some sort of color base and then just build an entirely new set from it so i can pass a hex color here this could be a brand color maybe it's just a blue that you really really like and it will build out a really light version all the way to a really dark version of those colors for you and um it's super duper handy these values that i've typed in here are hand created you could kind of theoretically um mathematically generate these if you like i just found that these were very balanced across all these different hues and the other cool thing about this is i can also make a gray scale version of all these and tint each of those so look i have a hueless gray palette where um obviously there's no hue passed in but then i have this warm one where i pass in a little bit of chroma that's maybe in a orange or a reddish tint and i can get a warm gray and get these sort of clay colors out of it and i can also pass in a blue tint and get a cool gray and so you have the ability to make this even more blue or less blue no hue some hue it's really really powerful stuff so that is all for relative color syntax i hope you enjoyed this GUI challenge check out the demo page and get ready to modify your colors with this awesome destructuring syntax and i'll see you on the next GUI challenge