I grabbed Adam intending to chat about all sorts of CSS stuff and his work at Google and on VisBug. But then we chatted pretty much the entire time about color and what’s coming there to the web platform.
Time Jumps
Sponsor: WordPress.com
WordPress.com is the fastest way to spin up a WordPress site. You’ll be able to build any sort of site around it to power your business or hobby. How do you make the most of it? Subscribe to their brand spankin’ new YouTube channel to learn more about using your site and what fellow customers are doing with theirs.
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: This is CodePen Radio 355. I have Adam Argyle here from CSS. Famously, CSS. No, you're from Google. How ya doin', man?
Adam Argyle: I'm swell. So happy to be here. And CSS, I could talk about this all day!
Chris: I know. I know.
Adam: It's a hot topic.
Chris: It's just so easy to talk to you about CSS because you're on the ball with it, and I always learn a bunch. Partially because it's your job, but also clearly your passion as well. I don't think you could do your job without really kind of caring about CSS as a whole. Man, you're the torch bearer for CSS these days. You did it, man. [Laughter]
Adam: I did it. Wow. I had no idea it would happen. I was like -- yeah, when I started, I was like, "Somebody should do it." They were like, "You do it." I'm like, "[Laughter] No way. I have no experience doing this." They were like, "So..." I was like, "Okay."
Chris: [Laughter]
Adam: [Laughter]
Chris: I never thought of it that way. [Laughter] Wonderful. Well, yeah. Yeah. I don't know what else to say about you. You were part of those early days and still, to this day, run that dev tools plugin, that browser extension. What do you call it?
Adam: I sure do.
Chris: VisBug.
Adam: Yeah, VisBug.
Chris: Mm-hmm.
Adam: I got a compliment yesterday. Someone said, "My UX writers, my PMs, and my designers are all in love with this tool. You've united us in our meetings."
Chris: Aw...
Adam: I was like, "That's the sweetest thing I've heard in months," because that was totally the goal. I wanted to empower those people that participate.
Chris: Tremendous, right? It's like, yeah, a visual. It's a thing for messing with the page. Learning about the page that you're looking at and messing with it too, right? Mm-hmm. It definitely enables messing with it.
Adam: Yeah. I was in a meeting the other day, and they were like, "What would it be like if that was over there?" I was like, "I don't know. Let's do it right now on this call."
Chris: Yeah.
Adam: I just launched it and started moving stuff around. They're like, "This must be the VisBug tool that you do."
Chris: Hmm.
Adam: I'm like, "Yep." [Laughter]
Chris: Sure it. Ain't no fig jams up in here. We vis jam." That's what you should call it.
Adam: Yep. Hacking on the live product. Boom!
Chris: Mm-hmm.
Adam: It's like if you were driving your car, and were just like, "Yeah, I'm going to change the color right now. It's easy. Watch."
Chris: Yeah. We'll link that up in the show notes for people to check out. Let's just shoot the breeze about CSS because both of us have a little bit of an investment in that space, I'd say.
Adam: Right.
Chris: Personally and professionally, I'd say. One thing that I've been trying to wrap my head around that you have a big head start on me with is color stuff. Would you mind talking about color stuff for a minute?
Adam: Yeah, I'd love to talk about color. Yeah.
Chris: Yeah, so I've been roping lots of people into this because all I want -- what I really want is to solidify my own brain into which things should I care about and why. I know that my brain isn't ready to understand a 3D model of color - or something.
Adam: Mine either.
Chris: Yeah.
Adam: I hate those. [Laughter]
Chris: Maybe not ready for that, but I do care about CSS syntax, and I care about the fact that some of these new color models--
I want to get the words right because there are models, there are gamuts, there are the functions that call these things, there are conversions. There are all these special words. If I get it wrong, just virtually slap my wrist, if you please.
Let's just start with Display-P3, because that's a thing that exists. Yeah?
Adam: Yep.
Chris: I think that one is a model - maybe.
Adam: The color space, I think, and the syntax.
Chris: Color space...
Adam: Yeah.
Chris: Yeah, the syntax is funky. Let's get to all of those things. If you wanted to know one thing about it and lock that in your brain, it's that it's able to express colors that otherwise couldn't. To me, that's the, oop, ding-ding-ding. That's the reason I should care at all that it exists because otherwise - I don't know - maybe I wouldn't. But all the things we have today -- hex colors, FOGDOG. What's the famous one? BADASS, you know? All the good hex colors. Then there's RGB. There's HSL. All those are locked to this RGB color space - something. You learn this hugely bummer fact about that is that our monitors that are sitting in front of you - probably -- I mean it probably depends on your hardware a little bit -- there's a very good chance that that monitor can display colors that are un-expressible in CSS. To me, that's weirdly sad. Doesn't that suck, kind of?
Adam: It does kind of suck. Yeah.
Chris: Yeah. The first time I CP3, it's in the context of, "Holy crap. Look at this pink," or "Look at this green or yellow." It exists in this space that, if you write code in this format, you can make a yellow more yellow. What?! What?! That's crazy. That's crazy.
Adam: Yeah, literally. I'm going to text you a link because I use this one. I'm like, "Which gradient do you want?" It's just like, "Well, I was going for a bright gradient, but you just showed me a Display-P3 gradient next to an RGB one. Now RGB looks like it got washed in the washing machine about ten times."
Chris: [Laughter] Yeah, right.
Adam: I'm like, "Ew. What's the gray/brown color between blue and red?" You're like, "Why did you go to brown between those?"
Chris: Yeah.
Adam: It's like, "Stay vibrant, fool."
Chris: Right! That's another one. Okay, so you get the more colors and it's something to the tune of 50% more color possibility range. I think that goes up, right? I think the problem is -- it's one of those, let's not solve the problem for today. Let's solve the problem for a long time in the future. I think some of these models can express colors that even the monitors of today can't. You can describe a green, a pink, a yellow - or whatever - that's the greenest green possible for math to describe. It gets yanked back in, and it gets as close as it can. Next year, if there's some monitor that can get a little closer to the most extreme green in the world, you don't have to reinvent CSS again. Is that right?
Adam: It sounds like you have a very good grip on the scope of what's happening.
Chris: I've just been working on it.
Adam: Yeah.
Chris: I'm working on it. But then because I learned a lot of this from you. Okay, so let's just leave Display-P3 alone for a second. There are other new ones like lab and LCH. They get lumped together. Every article I read weirdly lumps them together, but they are actually different. But I think maybe share a same color space or something.
Adam: Space. Yeah, it's like they share color space, or they share a gamut, which is how many colors each can represent. But they both have a different color space. Yeah, you could say they both have ten million colors. Who cares? It's a ton of colors. They both have the same amount, literally. But the way that you access them and the way that the colors shape, this is where the 3D model kind of maybe comes into play. They have two different shapes.
Chris: Right.
Adam: They're shaped off of purpose. Yeah, they're based on one.
Chris: Yeah, like a shape! The shape actually kind of matters because the shape is how internal browser math can happen. That's the thing that I think I learned -- one of the many things I learned from you because that math matters in gradient town. You just were talking about gradients.
Adam: Yeah.
Chris: If you ask the computer, "Please draw me a gradient between blue and pink," it has to guess at every single color in between. Not guess, but it has a model to figure out what colors you want in between those two colors. If the literal map for that computer drives through crappy gray town, then you get crappy gray town in the middle.
Adam: Computers just do a straight line. Yeah.
Chris: Yeah, they do a straight line. And so, if you fix the map in four rich colors, it never drives through crappy gray town between any two rich colors, you just don't have that problem, and that's just cool. Isn't it?
Adam: It is cool. Yeah. For example, you think of they cylinder or a color wheel, right?
Chris: Yeah.
Adam: That makes sense because you usually have white in the center. Then it goes out to the most vibrant colors on the outside.
Chris: Yeah.
Adam: And so, if you're trying to go from two different sides of a circle and one is a bright blue and one is a bright red, the computer is going to do a straight line from those across the circle. What's in the middle? A bunch of colors that are not bright. Yeah.
Chris: Yeah. Washed out or whatever. Yeah. Yeah. And so, in my mind, I was just like, that color wheel only existed because some nerd decided that that was a nice way to build a color picker in Photoshop - or something. They were thinking about the UX of choosing colors and then made that thing. But it turns out that's not the case. That it's actually an expression of the color space. Right? That kind of blows my mind a little bit.
Adam: Yeah, the result of the gradient is the traveling. Yeah, you'd look on a map. You know how it's flying from one country to the next and it does a little dotted thing?
Chris: Mm-hmm.
Adam: It's the same thing that a gradient is doing. It's making its way from one to the next. It's like a linear ramp, and it's going to go gobble up every little color along the way and then draw you a nice, smooth color.
Chris: Yeah.
Adam: It's going to use the map that it lives in, which is the gamut. The gamut is how many colors are there. Then the color space is the shape that you're working inside of. It's just going to walk itself across the terrain in the shape that you've asked for.
Chris: Walk itself across the train. That's wonderful. Okay. Let's dig into that even more. Then you have the same pink and you have the same blue. You write a gradient in LAB, and you say, "Go from one to the other." Then you write a gradient in LCH. It starts at the same pink. Starts at the same blue. Are you telling me that the literal map is different between them? So, when you draw that gradient, in the middle of that gradient you'll get different results.
Adam: That is exactly how it works, yes.
Chris: Oh, that's crazy.
Adam: When they created LAB, they created LAB to bunch as many of the vibrant colors together as they could.
Chris: Oh... Super intentional.
Adam: And so, it's made in a way that they're optimizing it. Yeah, they're trying to optimize specifically for gradients. Supposedly, LAB is the one that's built more for gradients.
Chris: Really?! Okay. Okay.
Adam: Through my experience, I tend to prefer the ones in LCH, so maybe it's going through some better path. But I don't always like it better.
Chris: Oh... Don't believe it. Fascinating. Okay. You might pick one literally just for that reason.
[Guitar music starts]
Chris: This episode of CodePen Radio is brought to you in part by WordPress.com. Of course, a place that you can spin up a WordPress site in about two seconds. I've done it and run several sites on it because it's just so dang easy to do. But of course, ultrapowerful.
I should also point out that they just lunched a brand new YouTube channel. You could find it at youtube.com/wordpressdotcom (only you spell out the dotcom). Love that. Super clever.
I'm a subscriber of it because I'm a user of the product, but also they're really planning to invest in it heavily and have really interesting content on it, educational and customer show-case kind of stuff, the kind of stuff I like to watch because I have sites on it.
If you've invested in this platform, it's nice to see what other people are doing with the platform because you'll see yourself in these videos. You'll see, "Maybe I could be doing that, too." Maybe it'll help you make your site better, faster, more useful to users, make more money, do business better - whatever.
Again, that's youtube.com/wordpressdotcom. Go subscribe. Check out what they're up to. It's brand new.
[Guitar music ends]
Chris: How about this for an analogy because I got this from somebody else. I have no original thoughts, so all this is credit to the universe.
Adam: [Laughter]
Chris: LAB is more like RGB spiritually. Assuming people listening to this already know what RGB is, not the color space, the literal function in CSS where if you want to do red, you do 25500. That's all the red. Is LAB more like that? I know it's not saying R and G and B, but somehow the map is similar-ish - or something.
Adam: I could see how someone was thinking about that. Yeah, so RGB, in your mind when you're thinking about mixing colors, yeah, you think about these vibrant, saturated colors (red, green, and blue) and you're smooshing them together.
With LAB, you have A and B, so the L in LAB stands for lightness, and A and B stand for these two groups of colors. I can't remember exactly what they are, but it's like red and blue are A and green and something--
Chris: Oh, super weird. Really?!
Adam: Yeah.
Chris: Okay.
Adam: And the way that they work is they're on different sides. To go positive in A, you get -- I'm just making crap up right now -- you're just going to get red. Then if you go negative in A, you're going to get blue. If you go positive in B, you'll get one color.
Chris: Oh...
Adam: That's why I think you could think about them like RGB. It feels much like you're taking globs of paint and squishing them together and trying to make some new color.
Chris: Right. Yeah. Right. But it gets easier when you think of LCH as spiritually similar to HSL because those actually -- the three letters of LCH just straight up mean something, right? What was it? L is lightness, probably. What is C? Chroma or something.
Adam: Chroma, yeah.
Chris: Yeah.
Adam: How is chroma different than saturation? That's not as fun to talk about, but they're really similar.
Chris: Then hue, which is easy, right? At least theoretically easy. [Laughter] I don't know. Is it still 360 degrees? I hope so.
Adam: It is, yes.
Chris: That's good. [Laughter]
Adam: Which that's convenient, right?
Chris: Yeah, that's convenient. Yeah.
Adam: [Laughter]
Chris: If you were going to do math on colors with JavaScript or something, LCH is probably going to be your buddy more than LAB is going to be?
Adam: It's just easier.
Chris: Yeah.
Adam: Yeah. In CSS, it's easier. You're like, "I want a lighter color." We're like, "Great. Decrease L."
Chris: Yeah.
Adam: Yeah, it's a piece of cake, whereas in LAB you'd be like -- oh, no. L is lightness in LAB, so I guess they're kind of comparable there. You're still just dropping--
Chris: I guess, yeah, you get lightness. But you couldn't adjust hue as easily - or something.
Adam: Couldn't adjust the chroma or the hue, yeah. If you wanted to hover and increase the saturation or something, that's not as easy.
Chris: Okay. Okay. Chances are, if we're going to Vegas style this thing, LCH is going to be the winner.
Adam: LCH is going to be the winner for, yeah, your components, your buttons, but supposedly LAB is going to be the winner for gradients, but we'll see.
Chris: Design systems. We'll see. We'll see.
Adam: I don't know.
Chris: Yeah, I think I've seen not only you but one other example of somebody saying that LCH is preferable to gradients as far as just looking at results. You know? Interesting. Okay. LAB and LCH, we covered.
There's some kind of thing called OK LAB and OK LCH. Totally don't get it, but I think it's a similar spirit on a different color model - maybe.
Adam: Yes.
Chris: The OK model instead of some other model.
Adam: It's the way that they're bunching the colors up in the shape. Well, actually, it gets a little bit more complicated than that. I'm going to open up an observable HQ I made for you. Well, I didn't make it for you, but--
Chris: Oh, my gosh.
Adam: It's not coming up. I'll find it in a second.
Chris: You did too. [Laughter]
Adam: Well, I already had it. It's not like I made it for you, but okay. I'll find it later.
OK LAB and OK LCH are offsetting. They're interventions.
Chris: What?!
Adam: Okay. Yeah. LCH and LAB, they were created in the '70s, '60s, something like that. They were modeled after--
Chris: Oh, my God?! Seriously?!
Adam: Yeah, they're seriously old.
Chris: We're just catching up to what was done in the '60s?
Adam: Yes.
Chris: Yeah, okay. Great.
Adam: Yeah. [Laughter]
Chris: Cool.
Adam: And so, those models have held true for that long. Folks back then bunched up colors, and they said, "Hey. Now if you move through the lightness, this matches the way that the human eye works," blah-blah-blah.
But then we get to today. Let's say we make a gradient. This is the famous scenario where each color space has an Achilles' heel.
Chris: Ooh...
Adam: There's no perfect color space yet.
Chris: Uh-huh.
Adam: And so, with LCH, when you go from blue to white, or if you just go from blue to white in almost any of these, they're all going to show a little issue. I really want to find my demo. Anyway, it shows you how--
Chris: What's the issue? Does it show a little yellow or something really awkward?
Adam: Yeah, it goes to purple. Yeah.
Chris: No kidding?! Okay.
Adam: RGB faintly goes to purple, so if no one told you, you'd probably never notice.
Chris: It's like adding 0.2 and 0.1 in JavaScript....
Adam: Yeah. [Laughter]
Chris: You're like, "What is that?!"
Adam: You're like, "No, that's not what I asked for," and so you try a different color space.
Chris: Yeah. [Laughter]
Adam: You say, "Okay, blue to white in Display-P3." Then you're like that's still off. That one went to cyan.
Chris: Still bad? Oh...
Adam: Then you're like, "Okay, well, try it in this space and that space." They all fail in a weird way.
Chris: But not in OK? OK fixes...?
Adam: Not in OK LAB and OK LCH. They basically -- you can find Chris Lilley has a whole talk on this. He squishes the territorial space of each of these. He goes [splat] and then puts them on the screen for you. He goes, "Here's where LCH is failing," and he shows you all the blues. He says, "See how it can represent blue like this? But when you move through blue like that, you actually go through the purple stuff a little bit," and it's because of this stretching thing that's happening when you flatten it out and you try to travel. It stretches. And so, OK LAB and OK LCH have manually (with human intervention) adjusted the color shape, squashed it so that it wasn't so weird in the blues.
Chris: Right.
Adam: That way when you do your gradient from blue to white in OK LCH, it's a perfectly smooth blue gradient.
Chris: Why didn't we just go with that then? You know?
Adam: That just got added. Yeah.
Chris: Oh, it's brand new.
Adam: Literally, someone just popped up with OK LAB and OK LCH.
Chris: Oh, I see.
Adam: I think they're really new, like in the past couple of years. Chris Lilley was like, "[Gasp] This is an amazing color space. We need to get this into CSS."
Chris: I see.
Adam: Everyone was like, "Okay, Chris Lilley. We have no idea what all these color spaces mean, so we trust you." [Laughter]
Chris: Right.
Adam: Then it made it in. It's his fix. Yeah.
Chris: Some of this like, if all these color (let's call them) functions now because you definitely use LAB and LCH as just those three-letter acronyms and then some parentheses, right?
Adam: ...everywhere.
Chris: Then you give them three non-comma separated numbers. Then optionally a slash at the end for the alpha, right? That's all wonderful and great because now all the colors work that way. Even RGB and HSL have acquiesced to this, and you can set those in the three no commas vibe, too, which I really like, so all the colors work the same way. Right?
Adam: Yeah.
Chris: Oh, yeah, we did it, except for fricken' Display-P3. Why is that one the weird outlier?
Adam: That one has got three channels?
Chris: It does, but you can only use it by calling the color function, color parentheses, Display-P3, the keyword, and then the three values after it. It's like, "Why do different, buddy?"
Adam: I see.
Chris: You know?
Adam: Yeah. I think it showed up late to the party. Color Level 4 was the one that started uniting all our existing ones. You have your HSV, HSL, RGB. Those all, in Color Level 4, were merged into one unified strategy.
Chris: Mm-hmm. I see.
Adam: Then Display-P3 came in later, and that was after they came with the color function, so the color function not only lets you pass in Display-P3 as the color space. You can create your own color spaces, Chris. You can load your own color space into the browser and ask for a color called Chris, and it could know what you mean.
Chris: Oh, my god. Color is -- holy cow. P3 was late, but color is new. Holy cow.
Adam: Yeah.
Chris: I'm glad you're here for me.
Adam: [Laughter]
Chris: This is blowing my mind a little bit. Could I write color(hsl?
Adam: Yeah.
Chris: You can?
Adam: OK LCH, OK LAB, any of them fit in there. Yeah. Color could be, if you wanted it to be, the only way you talk about color.
Chris: The one true? Oh, okay.
Adam: Yeah.
Chris: I like that because color also, as far as I know, is the thing that also is going to, I think, enable the from keyword.
Adam: Oh, yeah. Relative color syntax. Oh, I'm so excited. It's beautiful.
Chris: Yeah. From is pretty cool because I like how it allows you to take an existing color, break it apart if you want to.
Adam: Benihana it, yeah.
Chris: Manipulate it if you want to. But for me, if it did one thing, I like how it then allows you to apply alpha to a color. If you had a hex code sitting there because somebody in 1973 decided that was delta blue - or something - that in the future you could be like, "Yeah, but I want 72% alpha blue because I'm going to layer. It's going to a shadow or something."
Adam: I'm making a hover effect and I want the border to scale up and be semitransparent. Yeah.
Chris: Right. You can leave the hex code alone. Just leave it alone. But you can say, "From that hex code," and then suck the parts - whatever. Make it some other color space, and then apply the alpha at the end of it. Very nice! Clap-clap-clap-clap-clap.
Adam: It is super cool. Yeah, I think that's going to be everyone's gateway into relative color syntax. They're going to be like, "I just want to make this 20% opacity of this hex."
Chris: Yeah.
Adam: But later, they're going to be like, "Oh, I can take one of the channels," so I could say, "Color from hex as HSL. Give me the H, the S, and the L. Then I want to change the S."
Chris: Oh, yes.
Adam: I either want to squash it and make it zero or I want to perform a calc on it.
Chris: So cool.
Adam: Yeah. The whole world is your oyster at that point. You've got the three channels in your hand and a calc function. Ooh! What 'cha gonna do?
Chris: Yeah. Right.
Adam: [Laughter]
Chris: I love that. You can calc it or not or just return it as-is.
Adam: Or not.
Chris: Yeah.
Adam: Yeah, or squash it with a zero or 100%. Be like, "Maximize saturation."
Chris: Yeah.
Adam: I don't even know what it is at, but yeah.
Chris: Oh, yeah. How do you do that? Like if you had the value of 57 or something. How do you make it into 100?
Adam: You just don't use it. If you break apart a color--
Chris: Oh, you don't use it. Yeah, you just return a number instead.
Adam: You get HSL in your hand. Yeah, instead of putting H or S or L in the space, you just put some absolute value.
Chris: Yeah.
Adam: Say 100% and now the lightness is 100% - or whatever. You just squash it.
Chris: Can you use min and max? Could you say if it's lower than 50, make it zero? If it's 51, make it 100%?
Adam: I don't see why not.
Chris: Oh, nice. Brainstorming. All right. Well, thank you for that. We just took a journey down to color town.
Chris: Yeah. I sent you that link, though, by the way. You should take a look at it. It's kind of annoying.
[Laughter]
Chris: Oh, the purple town one. Yeah. Yeah. Yeah.
Adam: Yeah.
Chris: Is it the only one? Oh, yeah. Wow. HSV is super bad.
Adam: HSV is super bad. Sometimes you want HSV, though, which is weird. If you get--
Chris: I don't know. Let's stop. I have no idea what HSV is. Tell me.
Adam: Oh, hue, saturation, value. Crap. I don't remember either.
Chris: That's another one like LAB and--? It's a function?
Adam: It is a function, yeah, and that just landed in Firefox and I think Chrome is about to support it - or something like that.
Chris: Really?
Adam: Yeah. It's on a compat path right now to have all the browsers supporting HSV.
Chris: Why? It's worse?
Adam: It's in the color....
Chris: But is this its just one Achilles' heel, but it's actually really good at other stuff?
Adam: Honestly, this is just a scenario where it looks bad. There are other times where it looks good. If you want a color to be vibrant steps in a gradient, you know, from bright this to bright that to bright something else, HSV can actually turn out to be really good because it is sort of overly saturated in these examples from blue to white. But in other cases, you're just like, "I really like that."
Chris: Hmm.
Adam: Because we're preferencing. Yeah.
Chris: Is the problem in reverse? Let's say you want a really chill color to another really chill color that it can accidentally be too saturated in the middle? Like the exact reverse problem?
Adam: I assume so, yeah. Yeah, if you're going through some -- right. Since you're walking through the territory. You're like, "I'm going to walk to that other town between these two colors." Sure enough, in that color space--
Chris: Yeah. There's got to be some example where it's bad. Yeah.
Adam: Yeah, and that's kind of what I think -- like I want the same thing as you do, I think, here. Which is, which one of these do I stick in my toolbelt when?
Chris: Right.
Adam: Can you just tell me? I just want to know when those are. I have tried three times now to write down assertions around, like, "Ah-ha!"
Chris: Ah-ha! Yeah.
Adam: If you're doing X, use this color space. I presented them to Surma last month. I was like, "Hey, Surma. You've been studying color spaces. What do you think about these five assertions, so that people can feel good about moving forward with these?"
Chris: Yeah! I'm very interested in that. Of course, he said what? These are all bad? [Laughter]
Adam: Yeah, they're not good. [Laughter] He's like, "You're going to be -- they're just so minute."
For example, this blue to white one. That's how some of the rules would be. It's like, "Okay, if you're going from blue to white, you should use OK LCH." You're like, "Well, that is just not good advice for my brain."
Chris: No, it's terrible.
Adam: We don't go from blue to white enough.
Chris: No.
Adam: That's not useful. It's case-by-case. Yeah.
Chris: It would never stick. It would never work if you tried -- if you made it your life's mission to tell the industry that, it wouldn't stick.
Adam: No, it wouldn't stick. Yep, so there's no solid advice. There's generic advice.
Chris: I'm going to go with LCH, though. Everybody, LCH, that's the best one. [Laughter]
Adam: I think LCH is the one that folks will find. If they're an HSL savvy individual, I think they'll find themselves really at home with LCH. It's a great next version to be using because, yeah, you get perceptual lightness, which is where HSL has failed us.
Chris: Oh, we didn't even talk about that! Yes! We didn't talk about that idea that, yeah, HSL seems like this very human compatible format. We also didn't talk about the other -- what's the other one that's supposed to be so human compatible? HSB or something like that.
Adam: Um... I mean any time that they deal with lightness and hue, I feel like they're pretty easy to--
Chris: HWB. That's the one.
Adam: HWB, yeah.
Chris: It's whiteness and blackness, and the whole vibe of it is supposed to be like, "This is good for humans. You're going to love this. Just add white, just add black, or just add both to add vibrancy or reduce it - or whatever." Kind of good, but to say that that's more logical than HSL, no.
And it's still in the SRGB space, as far as I know. It's like, "Oh, my god. How useless is that one?" Forget that one.
Adam: Right. I know. Pretty much all the ones we've had (all the way up until now) are in the RGB space, which is 255 million colors. You're like, okay, then why are new Nintendo Switches coming out when they're like, "That screen that you had couldn't show the colors that this new Switch can have"?
Chris: Yeah.
Adam: It does matter eventually. Yeah.
Chris: All right. We'll just end it because my daughter walked in to come see me at the office. Pretty great.
Adam: Aww! Hi, Ruby!
Chris: [Laughter] The perceptual thing is a big deal, meaning that if you have this particular kind of orange that your gut instinct is, "That's a medium strength orange." Then you change the hue in HSL. Who knows what you're going to get. It could be super brighter. It could be whatever. But that won't be the case.
Now, if you twist that hue knob in LCH, it's going to have the same perceptual lightness, which is so great. So great, right?
Adam: It sounds so great, Chris.
Chris: But is it a lie? Don't tell me it's a lie.
Adam: It's not a lie. It's that the reality isn't better. [Laughter]
Chris: Aw.... Boo!
Adam: I've made these color systems now where I'm like, "I've adjusted the lightness perceptually based on humans and now I have warning and success and all these different badges that are all perceptually the same color. Dude, they're boring."
Chris: I'm sorry.
Adam: They just look squashed. They just don't look as excited anymore as colors. [Laughter]
Chris: [Laughter] Ah... All right.
Adam: It's tough. It's tough.
Chris: I like to end it on a bummer. Let's just end and we're all crying. No, that's all right.
Adam: [Laughter]
Chris: Most of this stuff is much better and it's much welcomed in CSS land. And it doesn't feel particularly controversial either, right?
Adam: No.
Chris: We're just adding a color space. You don't have to use it.
Adam: You don't.
Chris: Pretty cool. Well, thanks so much, Adam. It's always a pleasure to talk to you. We'll get you back.
Adam: Yeah, likewise. See you later, man.
Chris: Take care. Cheers.
[Radio channel adjustment]