Color in Code

[00:00:00]
>> Sarah Drasner: For RGBA, x is a number from 0 to 255, y is a number from 0 to 1. So anytime we use a or alpha or opacity, we're always going from 0 to 1, and we have stops in between, like 0.5 opacity would be half the opacity. So if we're working with RGB or RGBA, we would do 0 to 255, 0 to 255, 0 to 255.

[00:00:26]
So 255, 255, 255 is white, 0, 0, 0 being black and then if you have all of the numbers the same, it'll be some form of grey. And we can adjust each one of those channels, how much you want red, green, and blue. I don't love RGB, to tell you the truth.

[00:00:48]
And I'll show you why in a second cuz I think there's a superior color format than RGB. So we start with RGB, it's okay, it's not my favorite. Okay, Hex, Hex is probably what everybody is used to and uses all the time. That's cuz it's super copy pastable, right?

[00:01:04]
You don't have things in parentheses, and all sorts of stuff, you're just copying it, and pasting it, and there you go, you have hex. It's not very human-legible though, right? It doesn't need to be, because it's just about the computer understanding it. But if you need to communicate color, it's not the best color choice, right?

[00:01:23]
If I gave you a hex value and said, make this a brighter red, you'd be like, okay, let me open some sort of tool to do that. Or like if you're really super nerdy like me you could probably do that, but you don't need to get to those levels of nerdines.

[00:01:39]
Nobody does, [LAUGH] it's not a useful skill. [LAUGH] So basically most common but least human readable. And really it's similar to the red, green, blue that we talked about before. And now you're not even curious why it's red, green, and blue, right? Now you know we're working with additive color mixing red, green, and blue make all the colors.

[00:02:02]
Yeah, makes sense? So we've got the red, green, and blue on each of those. And basically, when you're changing the base colors, if you do want to get super into the nerdiness, I included some slides that you can dig into later. We're not gonna go super over this right now in the interest of time.

[00:02:23]
Here's my favorite, [LAUGH] HSLA. HSLA is human readable, and it's an awesome color mode. X is a number from 0 to 360, y is a percentage from 0 to 100%, and x is a number from 0 to 1. So basically for HSLA, what we've got is hue, saturation, and lightness.

[00:02:47]
And hue is that color wheel that we saw that we were playing with, which also means that if you have to generate color, it'll never fail. So if I had to create some crazy colors all over the spectrum, and I used RGB, eventually I'm gonna hit, I have to basically make sure that it doesn't ever hit above or below 255.

[00:03:09]
But if I'm working with H, 1% is the same amount as 361%. It just keeps going, it just keeps going around in a circle. So if you wanna make generative color, you don't have to set any boundary. You can just do it up and it's going to always fall in line.

[00:03:25]
And if I told you, hey here's a color, make it a little bit less saturated end of turquoise, you could do it actually. Even if I gave you a random thing. You could be like okay I'm gonna take it down on the saturation I know that's a percentage.

[00:03:40]
So I'm gonna just take that down from 60% to 40%. And I'm just gonna move around the wheel until I get to turquoise, and you can totally do that. Cool, I love it. All right, so you can do these kind of goofy projects that I do where I play with lists and colors and stuff.

[00:04:00]
Yeah?
>> Speaker 2: I have a question. So it seems like most pre-processors like CSS and JS solutions will compile or at least turn HSL into an RGBA value, for one reason or another which always stomped me.
>> Sarah Drasner: Yeah, a lot will, that's true. I think what's nice about using SCSS and SASS is that you can play with those color values and play with these formulas like I'm doing here.

[00:04:34]
In a way that you're not kind of, you're kind of understanding that. And also within CodePen even you can compile it down and see what it's outputting. There's just like in this drop down here, you can kinda click and see each one. Unfortunately, yeah, I think that it's become a more of base comfortable color value.

[00:04:57]
Because it was supported before HSL was, so I think in order to play it safe they kind of convert to RGB even though it's well supported now. There's a new color format that's coming out in a few years that's like, way more intense and sophisticated. It's kind of like the CSS grid of color formats.

[00:05:17]
I saw a talk on it and I understood like 10% of what was going on. So look forward to new color formats thatare even more spectacular. If you wanna go look at some of that material Chris Lily has a great talk in CSS conference in Singapore. He's the guy who invented SVG and he's working on that color spec as well.

[00:05:39]
But yeah, good question. It's mostly because the support started with RGB, and then went into HSL.
>> Sarah Drasner: Yeah, so you can kind of create these kind of generative colors. I could also do this in JavaScript, it's just a for loop, right? I'm just changing things up and especially if you're using things like D3 or something.

[00:06:02]
Then it's really easy cuz you're basically saying grab the index, multiply it by 2 or whatever. And then it's like, [SOUND] and that's the sound it makes when it comes on the screen. [LAUGH] Actually now, that kind of looks like [SOUND]. Named colors,named colors are pretty good for demonstrations, but not anything else.

[00:06:26]
You don't wanna use named colors in your applications. It's nice if you have to show somebody something and you just write purple, and it is purple, and then they know it's purple, but they're really inconsistent. Grey is darker than dark grey for instance, Alice blue is basically white.

[00:06:45]
There's this game that code poet who is, Chris Heilmann on Twitter. He made this game where you have to guess the named color. And like, even friends of mine who wrote some of these specs are like, I can't beat this game. So, it's just not super consistent. It is a fun game to play because you can kind of be, what?

[00:07:05]
Why, [LAUGH]