 Welcome to another episode of GUI Challenges where I build interfaces my way and not a 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 in today's GUI Challenge we're building color palettes with OKLCH. All right so why should you care about HSL or LCH they both have L's in them right they got to be the same it's not quite the same it's the let me let me show you a little demo here so on the left all these colors have HSL 50% lightness and their saturation is maxed out over here we have LCH which the L is set to 50% so just like HSLs and the chroma is set to something quite high as well but notice how we don't have quite the range of vibrance now initially that might make you think that LCH kind of stinks because well look at these these are delightful you can make candy out of those and these over here they look kind of bland and lame but this is where we start talking about this inner set of cells here so on the left we have this 50% red but what it actually ends up being is 54% gray perceptually same thing here we can see that this is changing though look at this this number staying the same in HSL why is the perceptual color changing well just look at blue you can't even read the black text on there because it's so dark look it's down here in the 30 range whereas yellow you can super read it because well it's in the 97% lightness range so perceptually HSL is all over the place look at these we have 30s and 90s and 80s and 60s and 50s and over here though and LCH we have consistency that consistency is what is going to enable you to build a dynamic palette that is accessible in a way that you can sort of predict that usability will be there that you can have color pairs that will be accessible across various hues and that is what we're going to work on today we're going to make a color palette in one hue maybe a couple hues we're going to be able to adjust the hue on it but we're going to see that we get a consistent palette across all these hues and then we're going to use it and it's going to be rad so then you also might be asking yourself can I even use OKLCH nobody I know is using this surely it's not available and then sure it's available pretty much everywhere it's very recently in Firefox so in case you're wondering where that was it's also pretty much recent across the board but that means it's a good time to get into it start getting familiar with this more powerful color space because not only is the lightness more consistent it's not just better for color palettes and design systems it also reaches in to wide gamut ranges meaning this will push the vibrancy and the color you wanted candy colors wait until you see the candy colors we can make with OKLCH because it is a wide gamut color space whereas sRGB or HSL they are limited let's dig into that coming up soon and here is what we're going to be building today I pretty much just have a div with a bunch of swatches in it you can see them here they're outlined we'll probably get rid of that outline but it's nice to see them skeletally there and then over here we have a header with some a small set of text we're going to put the two different colors here and then we're going to build a little card so we're going to make a color palette and then build our whole entire site with it checking it and light and dark along the way and then we're going to end in the debugging corner come along for the ride it's a colorful ride today I've also got a lot of really cool cascade layer setup so we have like our demo variables are going to be created here our light ones inside of it we're going to have demo usage this is when we're going to use our palette values and you can see I've already set up a lot of stuff so here we're already using swatch one through ten in these they're just undefined and we need to go do that work today and then down here we have the demo palette so it's just handling the layout for the palette items there and all the swatches we have just a general card layout and then the support styles that are kind of supporting things like a max width on paragraphs and kind of giving us some article styles and anyway nothing too important there but we are going to be spending our time right here so the first thing I'm going to do is looks like I forgot to add well I don't think I forgot to add I wanted to show that we're going to add a hue variable and we're going to stick it zero for now and immediately right off the bat hue zero in oklch which is the space we're going to be working in today is different than hsl it is not red it is a bright pink color and I don't know it's kind of a cool color actually it's like ruby red pink it's pretty sweet so to start out using oklch just like hsl we're going to call a function and we're going to pass three parameters in this order we're going to go from l to c to h so lightness to chroma to hue and our lightness at first let's have it at 99 percent we're going to give it a point one so that's not even that low chroma but we might drop that chroma down and then we're going to use our hue go for our hue this wish yeah we should see that populate right away now in the light theme that doesn't look so bad in fact that looks pretty good but I'm going to inspect it and switch to the dark or the light theme here and see that it is actually a little too saturated for me I'm going to want this at point 0 file let's cut it in half yes very very pale pink because if we want to use this against white we're going to want it to look pastel and this is also our lightest color in the palette so we want it really pushing that and look we're at 99 lightness with just a little bit of chroma and then we pick a hue and sure enough we got what we asked for and it looks great we can even pop open the new color picker and see if we are in wide gamut territory or not and it looks like we're on the cusp so what do I mean by wide gamut territory well literally there's a border between the two territories right here that's funny it worked out that way I totally didn't plan it this is the srgp territory this is where hsl hex hwb a lot of the colors that you've been familiar with over the past 20 years they fit inside of here now in the outer rim is your hdr your wide gamut colors and these are coming in your your new max your new phones all these things that claim to have a whole bunch of color they're displaying colors from here so css can now display colors from here as long as you stop using hsl and hex those will never reach into wide gamut ranges you're going to have to switch if you want to see your website in a high dynamic range it's almost like vhs versus dvd old sites are going to look desaturated they're not going to have to pop in colors that the new ones are and dvd websites this is like a weird anyway there's a reason that we need a new function and that's that srgp is literally limited to like a million colors and other color spaces can go into the billions so that's kind of what we're getting to and some of the colors are better so like when i was asking about the lightness range here if we're in high dynamic range space there are look you can see there's high dynamic range light colors high dynamic dynamic range dark colors and then of course your candy coat colors up here and we'll get to that one but right up here it's just kind of nice to see that i'm writing right on the line i'm just outside of where srgp was able to make a really light pink so i'm picking a new pink this is a pink that you've probably never seen in an app before because well it's just in a dynamic range space all right well i'm going to copy that and i'm going to keep building and i'm going to leave that color picker open because whatever so this next one i'm thinking we're going to drop it about 10 percent and let's double the chroma and that's that's pretty good maybe a little lighter that's pretty negligible let's just stick with that though for now we don't want to dwell too long on some of these okay so next one we're going to drop let's drop it another 10 percent just go down to 80 and in here we could even double the chroma because look we're a little desaturated a little muddy we can double the chroma get some vibrance in there and now we got ourselves kind of a nice little poppin pink there which is good because we're moving towards the middle and the middle one let's see it six or five one of these two i'm going to make our really vibrant one let's actually make it this one and this one is going to be 0.3 okay here we'll we'll get there we'll get there so this time let's jump another 10 percent and see where that gets us it gets us into muddy town so let's bring this up to 0.25 so you can also notice a little pattern happening here as we drop the lightness and enter a sort of middle zone we're gaining the ability to pump up chroma and hit these brighter colors which really means we'll probably be able to get in here let's do like 72 like 65 and 0.3 so in okay lch 0.3 is pretty much where your maximum is going to be for the display p3 color space in fact let's look at this one here look at our palette already kind of forming it looks great uh let's grab our candy colored coat color here pop this open and let's make sure we're in the top right look at we're not quite in the top right so that means i might be able to get some vibrance out of here if i drag this up here what does it do 0.31 and 0.67 yep we want that so we want 67% lightness and 0.31 so that's really going to give us look at that color that is a hot hot pink let's even compare it to regular hot pink deep pink deep pink is the is the deepest color that you can get hey where'd that go did i spell it wrong hey dev tools what's the dealio here let's go background deep pink all right well that and stuck and look do you see the difference this is the deep pink you thought that was the deepest color you look i don't need new colors there's no hdr is not the big look at that deep pink and look if we pop this open we can see we're pretty much in the top right corner of what is even capable of this particular color space and it's just not comparing to that that is juicy so it's exactly what we want and we want a really juicy color in our color palette because if you want those accents on like your tabs or your buttons to just really have that vibrancy that's what you want and we used the dev tools to help us discover the color so now we are in fact in the top right our hue is still maintained at zero and we got to sort of estimate our lightness and our chroma values for this in fact let's go to oklch.com and take a little short deviation here let's set the hue to zero because that's what we're working on let's set our chroma up to the maximum that we can get which was at what we're at point three one oh look this is even saying that oh we're gonna have to drop our lightness because we're like 67 lightness right and then we'll pull up on our chroma up here to like point three okay excellent now see what we have here also is a great comparison showing p3 versus the fallback so this is like as close as srgb can get according to this tool and notice our peaks and valleys here this inner territory is srgb this next one is display p3 that's the majority of the devices that we have out in the wild right now their hdr and then we have other future devices that are using this even bigger peak of rec 2020 and i've enabled those down here so that we can see them but as you can see we've got our chroma pretty much maxed out in the p3 space and look at how few of hues can represent that maximum chroma so we're just gonna we're like we've lost yellow yellow won't be able to have a chroma that high but what's cool is if we ask it from the browser it's still going to give us a super rad yellow and then look here we can even see the peaks and valleys in 3d so that pink that we're asking for is way up in this space here and it's just so cool to see so that's sort of the relationship that you have here is as chroma goes up hues will change and lightnesses will change and this tool is really good for helping you visualize it as well as chrome dev tools which has this view which is also super helpful okay well i'm going to grab our next color pop into color six here and i'm thinking let's just drop it by all 10 percent that's been a great theme so far okay that's okay um let's go like 25 something like that i don't know that's okay maybe a little darker actually i feel like um we need some more change yes excellent maybe a little more chroma out of there let's go like 27 that's getting kind of nitpicky but i did like that it's sort of vibrant it brought it up just a little bit here let's even let like let's do our dark color here because i feel like i'm going to need to know what our dark range is now okay lch has an interesting thing is that it starts to get super dark at about 10 percent which is one of edge kc features like okay lch is corrective and is probably the best space that we've ever had to build color systems in before but it does have this one issue which is a lot of the dark colors are packed into the 10 space and i also estimate it's because of our color support that like in a better monitor with even wider gamut we're going to see a lot more dark rich colors show up and we'll see them here underneath this 10 but i don't know that's a hunch i haven't really tested it um we're going to drop this chroma down to something like point two or something like that now that looks pretty um pretty dark on this dark theme but if we switch to well in the light theme i i suppose if we switch to the dark theme look at that that is not dark enough if i'm in a dark theme i need my darkest color palette item to be super dark so let's go like five percent that is still recognizably red it's very dark ruby red um and i think i'm just going to stick with that now we just need to figure out our range that goes between these oh we still need to fix this one so swatch number seven let's drop it you know 10 again that seems to be pretty consistent for us to make a change here we are making 10 items and so that that helps a lot let's drop this chroma down so we can get a little darker um i think i want to go darker than that um let's go like 35 okay that's pretty good and a nice ruby color look at that's like a you can see a crystal being that color um all right well here we'll go 25 and 25 nope let's go 15 let's go 30 i don't know here let's go let's go back to 25 with the yeah that looks fine let's fill out this last one and then we can kind of eyeball the rest here so we'll do like another 10 i drop this down like 0.2 as an estimate and that's pretty good yeah i don't love this color here so this one is a little it needs some chroma yeah i think that did it maybe we even dropped this one down a little bit here to be like 13 yes interesting i you know what i'm going to call it good for now because uh otherwise i'm going to be here all day nudging it but we have a nice set of light ones and we have a nice set of dark ones now here's the next thing that we want to do in order to help us make a predictable accessible palette we need to have on average a difference of 60 in the lightness between the text color that we're going to use so if we're in like a if we're going to have our text color be almost white we're going to want to pick a complimentary surface color another swatch that's at least 60 darker to get our accessibility score so for it almost 100 we're going to want something in the 40 range so we're probably over here in the swatch seven just to be safe and that's how you can make your color pairings is estimating a delta of l and so that's like this lightness channel here it's a really fun advantageous way to work um and yeah i think we'll continue with them so what do i have here next i have a text color set to swatch one oh so this is because now we're going to build the the accessible system out of it so we're choosing our lightest color for our most legible text so this is text you want it to like always be readable text too we want it to be you know kind of themed um but still be legible obviously still passing accessibility scores but it doesn't need to be as stark and contrasty as the text that we want to always be read right it's secondary text and i find that just one in two is plenty for almost all the apps that i design next i do like to make a few surfaces though so we've got one surface here that's at the maximum darkness so it's going to be a super dark uh surface color looks like i built dark first yep and then light theme next then we have nine and eight so i'm just walking down the set here and these are going to give us our really polar opposites so text one on top of surface one is probably going to be well here uh it's 99 to five that's like a that's a huge that's 94 yeah um percent lightness difference and so we're going to see probably almost a 21 contrast score there and so we could probably drop this down to like swatch two and swatch three and maybe we'll hear well maybe we'll do that in a second and then notice in the light theme i pretty much just invert everything i take swatch 10 and i make it text one so it's really really dark red text and we're going to get some like peachy text here on our secondary text and um let's just go use it so i'm going to collapse this and go to usage okay so usage we want to set our background to far surface one excellent in fact i might want to make that darker i'm going to make it darker right now that is not ruby dark red enough for me so maybe drop the chroma yes yeah that looks good very nice okay so i'll leave that i can kind of collapse this back up again and maybe i'll change that in the dark theme we'll see here in a second um i can get rid of this swatch outline because now we don't need it we actually have our swatches in there okay although we lost the fact that there was one down here so maybe we'll leave it maybe we'll get rid of our gap oh no yeah let's get rid of the gap and i'm like i don't want to toy around in here too much um okay yeah that looks good because now we can actually tell that there's a palette item down there and we've got some wrapping happening and then this is all squished let's just close dev tools for now all right sweet go back to our usage so we've set the background color we need to set the text color right now so we'll say color var text one now all of this is a really really you know light pink and our background is super dark ruby red let's inspect and well i'm actually interested to try out changing our hue as well so here's our text color pairing let's see our score let's add 20 that is superb i mean that's that's really really high contrast and it doesn't even look bad um you can even see that this isn't all the way white i don't know if you can tell on the recording here but i can certainly tell that that is not all the way white in fact let's make our next sort of modification of usage and we're going to say like small text which is like we have a couple like little sub headers there they're going to use color var text two let's see how those are scoring yep okay we can see that our subtext here and that's at 14 all 15 so again a really strong contrast score and i don't think we've lost anything from our design in fact this still looks really really awesome let's pull this over here just to check that out um okay so we have a header and we have subtext let's make this card i think the card is down here yeah demo card so we're going to set its background to var surface two because this surface is going to sit on top of our dark background so it's going to look like it's a little bit in front excellent let's give it even a border one pixel solid var surface three and it needs some padding one rem sure nice okay so there's a card that looks like a card straight about a github that's so funny look at that bright highlight it looks really cool um okay and how's the text contrast here so now what we're doing is we're contrasting our text one and our text two against surface two so hopefully we still have ourselves in a nice pairing of contrast and we have 19 in there and 14 there which means we could really change some of these and and create some subtlety if we wanted to but honestly i think this is working really good and i want to go change the hue this red pink has been great i always love it but i want to see something else just a little change of pace plus it's fun for us to watch this all change and then we can check the scores here let's check the scores in green 15 and almost 21 so we did see a slight variation there between them um but it's not even close to what you would get inside of hsl let's check this out in a blue range that looks really cool um 20 so that matched the same as green 16 so only slightly more 20 and 15.2 very cool what else do we got in here this is really fun oh wait hold on that indigo is awesome oh look at how it's like hot pink on the side there's something going on here and i really like it okay so 320 i'm gonna change our hue to 320 it's just so fresh awesome look at that oh and you know what we need to do is switch to the light theme and test out how everything is okay everything looks good look at our really dark purple this is cool and this is so dark purple you most people will not be able to know that that's not black and it looks awesome okay it's well it's almost black and that's why we're almost at 21 in terms of like color contrast and this one's at 19 so we could go if we wanted to let's let's try it out let's go to our usage or here no is our demo bars let's change these so right now we're in the light theme so we'll come down here and we'll set our text to nine and then our our secondary text to eight and get some subtlety out of it in fact i didn't even see a change did it change our scores did change so now we're at 19 and 15 let's do it again you could even uh tell that if you wanted to handle different contrast preferences for users all you're gonna have to do is bump then the swatches that you use in order to change the deltas okay look at here we've got 15 and 11 oh we could keep going not that you should be pushing it i think i liked it how it was originally better but okay this is still looking cool 11 and 6 should we go one more so wait what's the difference between 6 and 1 let's check it out 6 is at 50 and 1 is at 99 look at that we're at 50 difference pretty much and that's why we're still sitting at a pretty good passing score we're almost at 7 so on here let's change the hue while we're at this like more desaturated state well not desaturated just less contrasting oh that is awesome i like how the colors almost look like they pulse down this as we're changing it that's cool nice i love it okay well let's go back to the dark theme check that out oh and we had changed a bunch of our contrasts i'm going to set them back to the original because i like the really stark differences yeah i think that's nice like where this is almost white it's just popping right off the page it looks really sharp um that's kind of the extent of the gooey challenge today i wanted to build a color system that worked in light and dark they gave us a couple of text colors and a few surfaces to play with we get a nice accessible palette with lots of good contrast the flexibility of changing hues so it's themeable it's dynamic we've worked inside of a new color space where we're now in the hdr range so we're not just producing colors that are in the sdr range we're in hdr we're making our dbd website instead of a vhs website and well i think we have one more thing to do we gotta heal let's change this to um okay lch gooey challenge palettes save check out the debug mode and i'm going to go to the debugging corner all right here i am in the debugging corner and look at how fresh this looks i love how safari has the color integrated through the whole thing and look at that dark dark purple just looks so awesome you can certainly tell that that's not black and it looks maybe it just looks especially good against this dark background here's the light theme looking awesome over here we have it in firefox and we have it in chrome everybody's happy with ok lch everybody's happy with these these dynamic color palettes and that's the end of this gooey challenge let me know if you have any questions in the comments and i'll see y'all on the next one of these take care