Color Terminology

[00:00:00]
>> We're not gonna necessarily use this today. But I think it's really important to understand because when we work with our designers, we need to have a common language. I think often we expect our designers to have some idea of HTML, and CSS, and maybe even JavaScript. But I think as engineers, we also need to have some kind of common terminology with them as well.

[00:00:18]
So hue was just any old color on the color wheel. Saturation is the intensity or the actual purity of a color. Luminance is the amount of brightness or light in a color. A shade, you actually create a shade by incorporating black into a base hue, and this will actually darken your color.

[00:00:42]
A tint is the opposite, so you would actually add white to your base hue, and then that'll lighten the color. And the last one is tone. So you would create a tone by combining black, or white, or gray with a base hue. You can use tones when you're trying to create like hover states for example, this is how you would do that.

[00:01:00]
>> Are you going to discuss color naming convention?
>> I'm not, but that's a great point. So talking about naming colors, naming is hard. So typically, you're gonna have primary, secondary, and tertiary colors, which we had already discussed in our color theory section. And so what you'll typically see, is a lot of design systems will call it blue-100 or blue-400, and these increments of 100 are very standard, the whole point of numbering these things is to give a certain amount of leeway.

[00:01:34]
So let's say I have blue 100 through blue 600, and I need another shade of blue for some reason, this happens a lot with neutrals, okay, cuz we use a lot of different neutral shades. And let's say I need to add a new value in, well, if I have blue 10, blue 20, there's not as much of a leeway in between to give additional shades if you need it, there's only like nine other values that you could have in between two different shades of blue.

[00:01:57]
The 100 is typically pretty standard, I'm not exactly sure why, but you'll see a lot of hundred denominations. So if I needed a blue between 200 to 300, you would see blue 250 for example. So you would typically call your colors, blue, red, yellow, dash 100, 200, 300.

[00:02:15]
And then I want you to talk about themes, in color palettes is where you would talk about primary, secondary, and tertiary. And you could save those values, like my primary could be blue 200, so that's typically how you would name colors, it was a good question. Great, okay.

[00:02:33]
So type skills, if you added textiles, you should now see them over here on your right hand sidebar under Design, you can also see your colors. And if you actually, let's say highlight this and you go to the Code tab, it actually generates your CSS for you, how cool is that?

[00:02:49]
A lot of design tools now like Sketch, Figma, Framer, they're all using generative code that you can use to have a conversation with your developers. I wouldn't necessarily export this code and throw it into production nor take a second glance at it, but it is something that you can definitely use as a foundation.