 Hi everybody So I just tweeted a few minutes ago the slides to this if you want to follow along because the colors on your screen are probably going To be much better than on these because this is all about color So I'm here to talk to you about color specifically the fundamentals of color manipulation tense tones and shades Paul Rand one of the most influential graphic designers for me and probably for a lot of people set up design as relationships Grids and layout typography and of course color good use of color is nothing but establishing a series of relationships So building upon Beth's talk I'm gonna expand on a few foundations that I consider important for this topic for color mixing RGB The most wildly used form of color representation for screens as she said also known as the added of color model Uses red green and blue light to produce over 16 million colors on screen 16.7 as Beth said, I Didn't know that an RGB color wheel is composed of a triad of primary colors the obvious red green and blue In a secondary set that's made by combining these these primaries Cn magenta and yellow and another set in between and so on and so forth until you have a flow of color When we talk about hue we're referring to what most people think of as pure color If we flatten the RGB color wheel We can see the strip organized by hues from reds to magenta and and so forth And the degrees that that goes through like like that showed as well Saturation the other important key factor is the degree of purity of the color When the color is mixed in this case with white like you see the color becomes less saturated less vibrant and Finally value, which I think is the most relevant topic here because it literally Shows how color can create relationships is the lightness and darkness and all the steps in between a color I'm using white and black here, but it can be any color And so when we look at something like this similar to what you would find in an image editing software When selecting colors, we can see these elements come together You can select the hue on the right side from zero to three hundred and fifty nine degrees You can choose a saturation and a value or a lightness This is very similar like Beth said to HSL or HSV HSV stands for hue saturation value or hue saturation and lightness With these fundamental concepts cleared we now have a common language to talk about color manipulation So we're going to use those concepts as I move along This is where these relationships come into play you you see here the topics of the stock 10 stones and shades all come together Let's break it down. So tense a tense You tend to color when you add white to it to a hue or in RGB terms when you add light to a hue The more you add the lighter it gets the colors also Desaturate as they lose that original hue vibrancy So a red is in RGB the values go from zero to 255 So a red would be 255 zero zero if you bring the other two levels up at the same time The red will become lighter A tone is when you add a neutral gray to a color a neutral gray is basically 50 percent between white and black or RGB 128 128 128 You'll notice that the colors get muddy or desaturated more visibly here as we go down the the scale and Last but not least my favorite shade You shade a color when you add black to it or better yet you remove light in RGB So again a red would be 255 zero zero it will go darker if you go down with a red channel So a 128 zero zero be kind of a dark blood red So how do we bring this? How do we bring this all together? We're starting to understand the dynamics we can have here with value and saturation We can use these techniques to create some harmony About a year and a half ago by the 4.2 release cycle. I work on a few changes to WP admin that you see here and you can visit that URL Bringing in tension to the traditionally not the neutral sea of grays you have there If you go to that URL you'll see the announcement blog post about that a year and a half ago and my thoughts behind it and a little bit of explanation of The process that went into that so going through that process I started digging deeper into the WP admin CSS and found a hundred and seventy four individual color declarations in the CSF CSS to WP admin Thanks to Garth Mortensen who helped me compile this list that you see here in a kind of usable way I started organizing them by hue and value, but at some point as you can see like a deep frag of a hard drive back in the Day, I kind of lost patience and I just I just let them be This is still very much a work in progress It's it's kind of the big elephant in the room that that has been hard to take on and we call it the 50 shades of WordPress So I'm doing what I can slowly which I'm hoping tomorrow at contributors day You will come and join the design group and help with this kind of stuff But but I can share a little bit of the process here So we started with the WordPress blue, which is on the top right corner In this display and then we tinted and shaded it basically to create this gradient of colors Somewhere down in the bottom right there. We isolated This dark gray that the highlighted one here, which it looks almost purple there But this that became the the similar value to the the sidebar of WP admin But it has a certain intention because it's it it brings inspiration from the WordPress blue With that we tinted going down and we shaded going up to create a harmonic selection of colors What you see here on the block on the left for example the left column is the colors that are currently in WP admin So a total of all the girls you see here. Wow, they look really blue there They're not as blue The left columns are the current hues The the right columns are the proposals for for change and basically what's happening here is We're figuring out. Okay. This hex value has capitalization in one Declaration the others doesn't or we use black or ha or hex zero zero zero, which is the same thing So stuff like that. There's a hundred seventy four colors because there's all these variants that are basically the same thing But we are trying to match the value of these these different colors to Fewer number of actual shades So we went from 19 colors just on the screen to only nine if you squint your eyes You can see the line between the two disappear And that's how we know it's the right value and if you see the slides on your phone This is gonna make so much more sense You can see a lot of the colors that are already proposed in the design handbook Which is this URL and it's probably the best URL to find about this The 50 shades of gray project is just at the beginning. I'm going to need help with that So if you'd like to join tomorrow the core Design team table at the contributors day, that would be awesome. Thank you so much