Color Selection Basics For UI / UX Design

1. Class Intro: Color is one of the most essential parts of Eric design because the color determines the mood of your viewers. It determines the direction they are going to take, and also it determines the brand values and the brand strength. So therefore, your viewers are going to connect those colors with that particular brand. There are many different ways to work with colors in UI UX design. But in this class we're just going to focus on the most important things. Because otherwise this class could take up to 12 or 13 hours or something like that. Hey designer and my name is Alex. And in this class we're going to talk about color in UI UX design. The founder of web donut, we recreated or 500 design products. I'm also a teacher and so far I have created or 30 different courses ranging from UI, UX design, all the way to social media and design. In this Skillshare class, we're going to cover why the color is important, which colors exist and how do you arrange the colors and how do you choose your amine, secondary and tertiary columns. We're going to talk about different color combination, which color combinations exist and how do you use them in your designs? And then after that, I'm going to show you some amazing color selection tools which you can find online, which are going to help you massively with choosing colors for your UI UX design projects. Finally, I'm going to show you how to create awesome style guides for developers using Adobe XD and how to present those style guides to your clients and developers for later use. Your class project for this class is to create your ideal color combination using the tool you like. I would suggest that there'll be excited because there's the tool I'm using, but you can use any tool you want. And more details are in the class project video. Next to typography, spacing and rhythm color is one of the most important things in design to consider. And in this class we're going to cover some major things you should focus on when you're working as a UI UX designer. So look forward to seeing you in class and let's create some awesome color combinations. 2. Why color is important: Apart from typography, rhythm, grids, and many of these other elements, color is one of the most important elements in each design. Without color, users will not know where to go. They will not know what to do. And there would not be able to distinguish elements from each other because all elements would just look the same in black and white. So in this video, let's discuss why the color is important and what should you be thinking about when you're choosing colors for your UI UX design projects. It sets the tone of your project. So I are speaking in the more business oriented way to your viewers, then you're going to use different colors. Then if you're speaking in a playful kind of friendly manner. So you always have to think about that. Make sure to speak with your clients, make sure to deeply understand them, understand their industry, understand the niche, and therefore, when you're choosing colors for that particular client, make sure to set the tone. If the tone is business, and then use the business don't, but make sure to follow that tone throughout your design. So it's nice and coherence. So your users always know what is the tone of your design wherever they are in your design, it determines the viewers mode. What I mean by that is if the colors are too dark, then viewers are going to be in a certain mood. If the colors are too light, then they're going to be in a different mood. If the colors are too strong, perhaps they're going to be strong on their eyes. So they're going to be in different moods. So make sure to pay attention to all of it and make sure to understand what is the sort of mood that you want to create for your viewers? Once again, is it the playful? Is it the business? Is it the learning? Is it the focusing mood? From all of these different metrics you have to learn about their mood. So therefore, when you're choosing colors, you have to have that mood in mind. So for example, if I want them to be calm and relaxed, I'm going to use some colors from nature, for example, white and green and brown and something like that. If we want to keep them pumped, if I want to have them energy rising and keep it high, then perhaps I want to use some strong colors like red, like dark blue, like green, and something like that. So make sure to pay attention to the mood of your viewers because it's extremely important in any design. It emphasizes actions. So for example, if you want them to click on a button, you would choose the color of that button to stand out because you want them to look at that button and then to take action, so to click it. Or if you want them to submit a form, if you want them to leave your email, you will use color to emphasize those areas where you want them to click or to take action. And of course, depending of the action you want it to take, depending of the industry that your client is in, you're going to choose some different colors and different shades of those colors, simply guiding your viewers eyes to that particular action you want them to take. It helps with readability in this is incredibly important because eyesight is really impaired for almost two decades because we all have these devices with screens and majority of people out there has some issues with their eyesight. So make sure when you're planning, especially for paragraph, is especially for text. Make sure to use the colors which are not going to be impaired on your viewers eyes. What I mean by that is they are not too strong, but also at the same time that they're not too weak because if their eyesight is weekday well now they're not going to be able to read it if the colors are too weak and the other way around. So you have to find that happy middle ground. Therefore, your readability is going to be much better and your bounce rate is going to be much lower because they're going to stick on the page for much longer and they're going to read the text and the information that you put on your design. And finally, it guides the user's eyes. What I mean by that is if you want them to look from left to right, you can strategically position your colors in that direction so that you can guide them through your design. You can arrange that your experience, how you want them to be. And then when they look from left to right, they can search for, for example, brighter colors or darker colors or something like that. You are the one in charge of their user experience. So therefore, convert their user experience to better one by using colors and navigating them through your design by using color. There are many different theories and techniques into choosing the colors which are important for your design. So these are just few that I found over the years work better for me and for my clients. So make sure to browse the Internet for some additional tips and tricks and mixture to understand when you are designing to keep all of these things in mind. And just to create the best possible user experience for your users by using color. In the next lesson, we're going to talk about which colors exist. So I'll see you there. 3. Which colors exist: There are many different colors out there, but when you're choosing colors for a UI UX design, you have to think basically about three colors, which is main color, secondary colors, and tertiary colors. Main color is the color, which is the overall color of your design. Secondary color is used for, for example, buttons or four texts links, hyperlinks and something like that. And tertiary color is basically the accent color. Now this is not true for all projects. Sometimes you're just going to choose two colors, for example, and we're going to talk about that a bit later in this class. But the important thing to note as a UI UX designer is you're not going to use the CMYK color in majority of cases. What that means is cyan, magenta, yellow, and key. The reason for that is those colors are majority used for graphic design and for a print work. Because we are doing screen work, we're not going to use those colors because they don't translate well to screen the colors you are going to use. In majority of cases for your UI UX design projects are hex codes and RGB color. Hex codes is something which is short for hexadecimal. Basically it means in 16th, don't be bothered too much about it. It's just the count of pixels inside of the color, but just remember, hex colors do have all of those different codes. You are going to use those hex code in majority of cases. And in some cases you're also going to use RGB color. Rgb stands for red, green, and blue. And there are also some other colors like HSL, which is for hue saturation and lightness. But depending off the developer is depending of the project, depending on if client already has their color combinations and a color already created for them, you are going to use their colors and the colors in that particular color code, which they mentioned in their theory. So basically in this video, I'm just going to show you how all of that works and how can you find those colors. So here we are on the Apple websites and majority of you know about Apple. Basically they create these technology devices in gadgets, and they also have their operating system for their mobile devices and desktop devices. All of that doesn't matter. What matters, is you can right-click in your browser and you can install this plugin called col beak, especially if you are a group Google Chrome user, like I am. When you click there, it's going to show you all of these different colors which are used throughout this particular page. Now these are not all the brand colors. It's not going to pull colors from every single page on that particular website. But if you take a look right here, you can see all of these colors. So you can see this pink purple color, for example, from this watch and the texts around it, you can see this blue color. Perhaps it's this one right here. And if I scroll down, perhaps we can find this column. Here it is. And if we scroll more, you can see that this dark color for the text is, for example, this one and this one. So you can quite easily understand which colors the brand used in this particular page. Once again, I mentioning this particular page because if we switched to Mac page, for example, here they're using completely different colors. So let's go back to the homepage and let's go to here. Once again, call it big is completely free. I will link it in a PDF and you can access it. You can simply install it in your browser. And why this matters is you can simply sample colors like I showed you. So simply right-click Color, big front page styles. It's going to take these colors from this particular page and then show you all these colors right here. But you can see is RGB values for each particular color. You can remove this color if you want to end, you don't want to see it here. Then if we click on this corner right here, you can see we have HEX colors. So if I switch to hex, you can see how this works. So if a switch between RGB and hex, you can clearly see the difference. Now, hex colors are these colors and this is the color code. I'm going to show that a bit later inside of Adobe XD. Now, every single tool out there has this hex codes. So if you're using Photoshop, XD, sketch, Figma, it doesn't matter. All of them have them, and all of them usually have RGB and some of them also have HSL. If we switched to HSL, which is hue saturation and lightness, you can see how this looks like. So basically, you can copy this, especially with hex codes. So select this right-click copy or control C, control V, and paste it into a favorite tool of choice. And then you can have this color and work from this color. This is especially important if you're working with clients who already have their websites completed. If they have their apps completed or something like that, and didn't know which colors they use, then you can simply pull the website like I should just showed you, right-click colored beak from page styles and then you can simply understand which colors have they used in their design. This is important because if they want to change their color palette, for example, further down the line, or if you need to have specific color, then you can use this approach, copy that particular color and then use it in your design. The other way to do this is to make a screenshot of their previous design. Drag it into your favorite tool of choice, in my case, Adobe XD, and then simply sample that color from your design. This is not going to be debt good approach because you're going to lose some pixels when you make these screenshots. And therefore, those colors are going to be just a little bit different than if you use this approach because this is pulling from page styles. So if we take it back one more time, right here, if I right-click on the page and go inspect, you can see that if we go through the code, if we go right here, you can see one, d1, d1, f. So let's go to here, E1, D1, D1, F. So you can see straight away, it's pulling from page styles, so it's pulling colors directly from code. So there is no room for error there because it's pulling directly from quote. Now you might be thinking, yes, but what about these images? So let's take this image for example. Right-click hit Inspect. Here we are and here we have the discolored. So if we click on it, you can see it right here. You might be wondering what if my client doesn't have any existing websites where you're going to form the color palette based on what we talked about previously, based on what we are going to talk about in a future lessons in this class. And primarily from the niche in industry they are in. For example, if they're in a banking sector, if they are in the IT sector, chances are depending on who the target audience is, that the website or the mobile app is going to talk to. Chances are they're going to choose specific colors in those cases and make sure to explore the competition, makes sure to see what they are doing, and make sure to form your colors based on the niche your client is in, based on the competition, and based on the viewer mode you want to put them in. So do want them to buy something, do want them to enjoy the content and stay for longer. Do want to be serious, do want to be playful. From all of these things, you are going to determine the color you're going to choose in your design. Finally, as I said, make sure to use color big because it's really quite simple. Simply right-click on any page, is going to show you all of these colors. And basically you can select this car, hit copy and pasted into your design. In the next video in this class, we're going to talk about color combinations, why they are important in which color combinations exist, and how to select, uh, which, which one is right for you. So I'll see you there. 4. Color combinations: There are many different ways that you can combine color for your UI UX design projects. But in this class and in this lesson, I'm going to talk about just four of which are the form of four main ones and the four which are mostly used in the design, plus one additional one, which is kind of a bonus on this lesson. Those for our monochromatic, analogous, complimentary and triadic. So let's explore all of these and let's see what they are. Monochromatic color scheme is what the name suggests. You're just going to take one color and choose different sheets from that particular color. So for example, you are choosing blue color, which is really dark, and then you're going to choose different shades from that blue color to correspond better with debt main dark blue color. So therefore, you're going to use those lighter tones, for example, for your buttons or the other way around, you can use the lighter tones for the text or the darker tones for the buttons for the links and stuff like that. Analogous colors are colors which are next to each other on the color wheel, you're going to choose three colors which are really close to each other. So when you take color wheel and then you can choose different shades of those colors which are just next to each other. What this is going to allow you to do is your design is going to be much more coherent because it's going to look like it belongs to each other. Your elements are going to be of similar colors, of similar emphasis with those colors because you're not going to choose different shades of your colors, just the colors which are next to each other on the color wheel. Complimentary colors is what the name suggests. You're going to take two colors which are on the complete opposite scale of the color wheel. And then you're going to combine them. You can choose your main color from that color wheel. And then from your main color, you can position your color wheel in that way to find your complimentary color on the complete opposite side of the color wheel. You can use different shades of those colors, so mean and complimentary color. But I will always suggest that you choose your main color and this is the easiest thing to do if your client already has something like a logo, your business card, or the color they like. And then you can simply put that color in your color. We'll choose the complimentary color, and therefore, you can choose different shades of those colors. And you can know which color is the complimentary color for that color. And finally, we have triadic colors. Now, triadic colors are basically just three color evenly spaced in your color wheel. So you can just imagine it as a triangle, and you can rotate their triangle to choose the main color and complimentary colors which are on the opposite side forming a triangle, you can choose your main color, and therefore you can select the other two colors which are on the even sides of that triangle. And the bonus approach is 60, 30, 10. Now this approach requires three different colors which you can choose however you want. But make sure choose your main color, which is going to comprise of 60% of your design. 60 percent is the amount that you're going to use your main color, 30 percent is your secondary or complimentary color, and then those 10% are your accent color. This is approach which is commonly used in UI, UX design and InDesign in general. So basically you can use any one of these methods which are just mentioned to select those three colors that you want. And you can use triadic if you want to, just to see on the rectangle how those three colors are going to look like. But make sure to form those colors in such a way that they are not overwhelming each other. If your main color is 60 percent, then just make sure to use that color for 60 percent of your design and then 30 percent and then 10 percent comprising of 100% of your colors. Don't use any other colors. Just make sure if you're using this approach in this method to use just those three colors. So these are just some of the main color combinations. As I mentioned, there are many, many, many other different color combinations, but these four is what I found work for me best over the years. And I've found majority of designers in the industry use. In the next video, I'm going to show you some tools which are going to help you select these colors. So I'll see you there. 5. Color selection tools: In this video, I'm going to show you some color selection tools which I've been using over the past few years. And I found that majority of these, especially Adobe one, is what majority of designers out there use. Because once you get to know the tool, once you are familiar with two, you're going to be stuck with it and you're going to use it all over again because if it ain't broke, don't fix it. So as I said in this video, I'm going to give you just a few examples. If you don't like any of these, you can simply browse the Internet to find the one which works for you. So here is the first one which is called Peloton. And you can see from the design on the website it's really quite old. Now how all of this looks is you can click right here to select the monochromatic. So a single color, as we just spoke about, adjacent colors, or three colors, you can see triadic colors. So triad of three colors, tetrads, so for colors. And finally, freestyle four colors and you can select two colors, three colors however you want. So, as I mentioned in the previous video, depending on what you want to create right here, you're going to select the monochromatic, for example, or adjacent colors, or which are complimentary colors or something like that. So let's go for triad in this case. So you can see when I start rotating this, you can see the color. So let's say that this is my main color. And you can see that they're evenly spaced in this triangle and it's showing me all of the sheets of my main color. And you can hold the Shift key to move the shades individually. So if I hold it, and if I select this shape, for example, if I select this one, you can see that we're getting completely different colors right here. So if I rotate it to here, you can see that we now have this evenly match palette. Now, you can go to Presets and you can choose different presets for this triadic color, which is really helpful if you don't have enough time. And from the colors you have chosen, it's showing you these presets. So if we go back to colors, if we rotate it to here, for example, go back to presets. You can see that now they are completely different. So you can choose these colors, you can do whatever you want with them. And if we hide myself from here, you can see tables export. If I click right there, you can see, you can export them as HTML, CSS, Less sass, ACML, and as texts, you can export color swatches and you can export these color combinations for the ones which we created, which I think is really important and really helpful because this tool is free. And by the way, I'm going to link all of these tools which are mentioning in this video inside of the PDF. So make sure to open it up, make sure to click on those links if you want to access these websites and all of the resources and tips which are mentioning throughout this class. So basically that's the peloton for you. You can randomize, you can reset, go back to the original colors. So right here, and as I said, you can choose whichever one, whichever style you want. Next up, we have Color Hunt. So you can see once again, now we have some different selections right here because these are pre-selected. So you can hit the random, it's going to show just random colors. You can go with popular month, year, old time, or you can choose by these ones. So if I hit pastel colors, if those are the colors that you want for your particular project, you have retro vintage light, dark, especially dark is important and popular in today's day and age where we have dark mode for UI UX design. So if you are designing for dark mode, make sure to check that out. Then you can see skin tones, especially important for beauty brands, for example. Once again, going back to that mood of your viewers, we're going back to that niche. We're going back to that client. So when you collect all of those dots, when you connect them, you are going to understand which type of color and color combinations do you really need for your particular project? So if we scroll all the way down, you can see that we don't have those. So if we go back to here, we don't have monochromatic adjacent colors triad, but we do have these. So these are the moods, these are the projects. These are the, for example, I don't know, let's say industries that your client is in. So let's go with dark for example. And you can see all of these. You can like them if you want. You can see it's posted 13 hours ago. So Let's choose this one. And if I hover, you can see I got the hex code right there. For each of these colors. You can like this palette. You can download it as an image. And you have all of these colors right here as hex codes and as RGB, which is what I mentioned previously, majority of UI UX designers are using hex codes and in some cases, RGB colors because they are easy for your developers to integrate. In quote, that's why they are using them. And also HSL colors sometimes because they can use percentages. So make sure to speak with your developers if you're just getting started with these colors, MY should speak with them. Is the hex code right for them, or is the RGB or HSL, depending from those values in those data information you're going to get from your developers. You are going to choose your colors for this particular project. So once again, you have more adult dark palette right here. And if you think that this color doesn't work, for example, you can choose green ones so you can play around with these cars. Next up we have colors.com, so you can start to generate it. Once again, I'm going to link all of these websites in a PDF. And what we have right here is this sum. We have all of these different colors you can explore, you can view, you can see, you can adjust it. You can see for colorblindness how it looks like. So you can choose all of these. And if we close it. You can create a collage and you can create a palette from photo. So if your client is sending you that logo or the color that they like, you can upload that photo right here. It's going to generate the color palette from that particular color. Now, you can see you're getting the names right here, which is great if you want to use these names later inside of your design as tokens, for example, when you're setting your colors to your developers. And then they're going to easily understand which color do you mentioned because they can put it inside of the code. So for example, this timber wolf, alabaster and cultured, they can put all these words inside of the code, connecting them in the main database. And therefore, the main database is going to pull the names of these colors is going to represent them as a website or a mobile app. So how do you actually work with this? Well, we have all of these options right here so you can remove the color, you can view sheets. So let's say I want to use this one. Now have that one. You can save color to favorite, you can drag it. So position right here to change the look of your color palette. You can copy the hex code and you can lock it. So you can choose any one of these different colors. You can arrange them. So if I lock it, and let's say that I want to position this right here is going to stay this color and it's not going to change to how do you export from here. You have this solid say that I like this color palette, but let me actually show you so viewsheds and see this one, but I'm not really sure. I can click right there. Then right here. Choose defects or any one of these. Let me go to the picker and let me select, for example, this dark shade right here. I like it and I can close it. And therefore, I can explore my colors further from this particular color or just leave it as it is. And finally, if I want to export it, you can use Control IEP. You can copy, you are out to send it to developers. You can export it as PDF, which is great as image. You can get the CSS colors, which is amazing for your developers. Obviously, AAC, SVG, which is also great, and you can get the coat if your developers want in the code as well. Finally, you can embed the code for these particular colors if you wanted to save them that way to your clients aren't developers. Next up we have Adobe Color, which is one of the oldest one in the business. But in my opinion, perhaps it's one of the best because it's integrated with Adobe XD, with Adobe products, you can open them up in a death Creative Cloud application if you're a Creative Cloud user, and therefore you can simply access these colors and open them up in the software of your choice. So you can create, you can explore, you have trends, and finally you have libraries. So inside of the libraries, you can create your library and then you can open the library in Adobe XD, for example. You can simply copy those colors, paste them inside of your XD. It's really that simple. If your Adobe user, there is also a Photoshop integration, Illustrator integration. So no matter which tool you're using from Adobe's family, you are going to have that integration. So we have extract team, extract gradient accessibility tools, which is also great. So if I click right there, you can see the contrast ratio, you can see the score. You can see some, you can check salt for fail 17 Points and below. So we have to adjust this color. Pass for 18 points and above, past four icons and actionable graphics if you are using these colors. So basically what we need to change is the color of the text. In this particular case that adobe gives us m. Here on the left you have all of those which I mentioned. So currently it's on custom, but if I switch to analogous, click on it, you can see that we can only choose this one color. If we go with monochromatic, you can see how that looks like triadic. So basically three colors. And you can see that triangle that we mentioned. So this is our main color, these are our secondary and tertiary colors. You can have complimentary. So on the opposite sides, on the color wheel split complimentary. So basically this, and you can then choose however close or far you want this to be. And you can split them, you can move them around. You can move these different shades to get the best possible color palette. And double-click split complimentary. So basically the same thing but double the color. You have the square, compound and shades. So depending on what you want, which I mentioned throughout this course, you can always call with Custom and you can adjust it however you want. So for example, if we choose complimentary and if I go with custom and I want to adjust these, Let's use this one or simply randomly. Let's go with this. And you can also adjust the tones right here of this particular color. So if I select this color, I can adjust the tones for that particular color like this. I can adjust all of these things. I can swiftly copy this hex code if I want to. And finally, you can save it as my color team, for example, I can name it I and all my website project. Let's see. And you can see the codes you're going to get right there. So these are tags. You can check for accessibility once again, just to see if that's good enough. Team is color-blind safe, which is great. So you can save it if you want to. It's going to appear in your XD libraries or Photoshop libraries. Finally, you can extract the team. So you can extract the color from the image and save it as a color palette. You can extract a gradient or same thing. Once again, accessibility tools, which we mentioned previously and we have color wheel, which is great. So finally, if you are using this, make sure to save it, it's going to appear in your tool of choice. You also have these color games. You have switched team so you can choose it. You have Explorer, so you can explore different color combination. What's trending, what's not. So if they switch into trends, you can see what that's going to give me. So for example, it's going to give me a bunch of images which are trending. And you can see the colors which are taken from these particular images. So if you like these colors, you can download or JPEG or add to library is once again going to appear in your XD or Photoshop Illustrator or whatever you are using. And finally, color peak, which we mentioned previously. Once again, it's great. I'm going to leave the links to everything I mentioned in the PDF. But I would really recommend you to get the color pink because it's going to make your life a lot easier. This is the Spotify, so you have these colors from Spotify. And of course you can go to the website of your choice if you want to pick the colors from that particular website. And it's going to show you right here inside of the color beak. There we go. These are the colors, these are the tools are really hope you'll find them useful. Once again, I'm going to give you all of these links in the PDF. Open up the PDF, click on the link, you want to access it and make sure to start exploring these colors. Make sure to explore these tools to see which one works for you the best. And once you find that mission, to explore it deeper, make sure to, as you saw in the Adobe Color mission, to explore the trends, make sure to upload images, make sure to explore it, and just to see and understand how to choose the colors for your projects the best way for you. In next video, I'm going to show you how to create an export style guides for the developers from Adobe XD. So I'll see you there. 6. Style guides for developers: Style guide is really important part of your UI UX designs because in it you're going to present all of the colors, icons, images, and all the other elements you used in your UI UX designs. You're going to show them to your clients and more importantly to your developers. Because from that style guide, they can pull important information such as color to use in your quote. So I'm going to show you one project which I did previously for one of my master glasses. And I'm going to explore what style guide is and to show you some tips and tricks. So here we are in Adobe XD, and this is the new bank website project. And as I said, this is from my Adobe XD masterclass. I'm going to link it in the PDF. You can check it out if you're interested. And here we started from the website architecture, moved to paper wireframes, move to wireframes in Adobe XD, more to website design, dashboard design. And then finally did the responsive design and dashboard responsive design. We also did project presentation and finally, style guide. So if we switch from layers to here, which is document acids, you can see all of the colors and color codes which are used. So basically these are colored tokens. When you hover, you can see that plain white is FFF. If you hover right here, you can see so RGB values of capacity 100. So if we zoom in really closely, you can see that we have project style guide right here. So what I would recommend you to do is when you're creating these projects style guides, make sure to always include the hex codes if those are the ones which your developers require, or RGB codes. If once again, those are the ones which are a developer requires. Also what you can see right here is we have plain white, which is this color. And I also included the hex code so developers can easily select this hex code if they want to. And moving further, you can see all of these other colors. What you can do is you can give them this XD file. They can then simply take this. So I go right here, I can copy this color. So right-click and copy. I can go right here, copy this color, for example, pasted in my code editor. And therefore I can have it in my code or I can select it from here and copy it. Or even more better, you can simply Control or Command E on your keyboard to export this as a PDF. When you hit Export, it's going to export as a PDF. And then when the open them up later, they can simply select this hex code from the PDF, copy it, and paste it inside. Also for typography, you can see for iconography. So all of the icons were used in that particular project. And all the illustrations and additional elements that you used you can put right here, but you can also do is right here, where is your color? You can always put, for example, background shows blurs or basicity, a covers and all of these other elements right here because indoors contribute as color as well, because all of those backgrounds, shadows and blurs also have color in them. So one other thing you can do with this style guide is share it. So if I just select this art board, go to Share. You can see it's just one selected. So if I unzoom, you can see nothing else is selected because I just selected this particular airport. So what it can do is share it. I can create the link, but instead of Design Review, I'm going to use development so I can create a link. And while it's creating, what I want to show you here is developers can get this link. They can pull all of these colors from this particular link. And you can also choose this share for development for any other art board that you have in your design. For example, we have website design right here, and we have many of these art boards, so you can select them all. You can share them for development. And therefore, your developers are going to have that colored. They can choose it. So if I click right here for our style guide, it's going to open them up in my browser, and it's going to show in my browser how all of this looks like. So if we show you right here while it's opening, so we have project style guide. So depending on how you named your artboard, it's going to show in that way. So once again, we have all of these different colors. So if I select one of them, for example, mixture this one, and if I switch to code right here, you can see all of the colors and all of the shades of my colors, which it's pulled from here. So if I select this one, you can see it's called Danger read in straight away we have CSS properties. Some, we have top-left width and height, we have background, we have background here. So this hex code, and we have obesity of 100. So basically what they can do from here is they can select to copy from here. They can click this color. Here. Color copied sort. Let me hide myself just so you can see it. So if I select this color, click on it, you can see color copied, so it's copied tool. And they can paste it later inside of the code. We can also switch to here. So you can see root for all of these colors. So once again, plain white, light gray, dark gray, main green, all of the colors I named foreign families. So we have font families, which is also great for developers, all located right here inside of our style guide. And finally. For this character style nine. So if we scroll all the way down, which is this one. So if I select just that and switch back to code. So let me select it once again. You can see all of the states which I created for this particular design. So we have Visa, Black and White must have grant MasterCard black and white. So just changing all of these logos in. Basically if I double-click inside and go with appearance, yeah, if we choose Control and click, you can see a linear gradient. So all of the colors from a linear gradient, you can see the direction of the gradient, obesity and drop shadow. This is the one which I mentioned previously. So drop shadow has discolored and it has these values. So basically, your developers can pull these values straight from here. They have the CSS code right here once again. And finally, if they switch to hear, they can select this. And then they can see inside of the root CSS all of the things from here. So basically, they only have to find this card right here and they can copy the CSS code from there. So if I select this one for example, and you can see default state almost black. So if I hold my Control and click inside, you can see light gray. If I select and click inside. So you can see this color, which is the color of his skin. And if we zoom in just a little bit closer here. So let's go with 100, for example. If we zoom in and click on this green color, for example, you can see the color so they can click, they can copy to clipboard and basically based in whatever they want. Finally, they can click right here on the comments and they can pull this spin, for example here. And you can say something like, Do you like these icons, or should they be black and whites? If they say yes, for example, then what you can do is you can click on this icon. You can go back to code, locate one of these. So for example, let's say this one. And if you only have default state for it, and for example, you can create different states for these icons. For example, we have default, we have hover. So you can see it changes the color for the default state and for the hover. So depending on what you've done with your colors, it's going to react in that particular way. So iconography, colors, the same thing, same story. So when the select they're going to get CSS, they can simply click to copy to clipboard and they can base this into their code. So basically that's how easy it is to work with Adobe XD with colors, which style guides. And I would always recommend that you export this as a PDF because your developers and might be on the go. Sometimes they might discuss this with your client. So make sure to send them the link of the style guide itself, not to confuse them too much and make sure to send them separate links. Often design of wireframes, of paper, wireframes, whatever you are doing, because that way they can easily inspect all of these colors. Because if you put all of them into one link, which you can do, you're just going to simply confuse them. And I found that this approach works better with my developers. But make sure to always speak with your developers first before you start working. Make sure to mention hex or RGB colors mixture to see if they're good with some of those colors. And finally, which something which I didn't show you. If I select this color, for example, I can click right here. Let me hide myself. So you can see we have solid color, linear gradient, radial gradient, and angular gradient in XD, we have obesity for the color, we have different colored tones right here. We have the obesity saw for the Alpha channel, for the color itself. And finally we have the hex, RGB, and HSB. So depending on what your clients and developers want, you can choose it from here. So basically that's it. That's why these projects style guides are really important because in one single place, you have all of these elements that you used in your design. And when you're working on your projects, make sure to always create the style guides in parallel with what you are doing because it's going to be much easier later to export it for your developers to take a look. So basically that's it. I think Hume saw how important style guides are for developers. There are not that important for you, but they might be important for the other designers which might work on this particular design after you. Because in majority of cases, you might not be interested to continue working on this particular project. Maybe some other designers went to step in to your shoes and continue working on this project. So having something like a style guide, it's always going to be much more easy for debts designer to continue where you left off in the same style. And of course it's going to be much more easier for developers to work with style guide, because in one singular place, they have all the information they need to start coding this project. 7. Your class project: Your class project for this class is to create either the style guide or the color combination of your choice. Make sure to use the brand that you really like. You can use the color peak, which I showed you. You can select those colors and then using your favorite tool of choice, whether that's Photoshop, fig, my XD sketch, whatever it is, make sure to create it and upload it as an image to our class projects. But you can also do is what I show you right here inside of the project style guide. So you can create something which is complex like this, or you can simply zoom in right here and just use the colors. Make sure to use the hex codes because I'm really intrigued and interested to see the hex code which you used and also make sure to name your colors. And just put this little text right here. I did. Just so I can see your thinking process and to see how your name, your colors, you can use one of those tools, which you saw in one of the previous lessons. And those tools are giving you the color names. So you can use those names or you can use your own names, do whatever you want. Just make sure to create the color combination. You don't need this many colors. You can use three colors. For example, debt's going to be plenty. Just make sure to combine them, make sure to use hex codes and the names below and upload that as an image to your class projects. I'm really looking forward to see what you guys can create. And I really look forward to interacting with you guys in the class project section. 8. Conclusion: There you go. You have reached the end of this class. It's just a short class, as I mentioned in the intro and in the beginning of this class, color is a really complex subject and they're teaching it in schools four semesters, even four years. So it's really complex if you wanted to be, but it doesn't have to be that complex mixture to follow some of these steps which I mentioned, make sure to explore on your own. Let this class be just your starting point in the exploration of the color world. Make sure to pick your favorite tool and explore it further from there, and make sure to check the PDF. Because as I keep mentioning in this class, all of the links which I mentioned and all of the resources which I mentioned are located in that PDF. Make sure to click the links to quickly access it and then start exploring and start your college journey. Once again, thank you for watching this class. I really hope you found it insightful and helpful. And once again, if you want deeper learning knowledge about color, make sure to use either online courses which are really long and go in depth about all of the subjects which we, which we mentioned in this class. Or to read books about colors. Because as I keep mentioning, color is one of the most complex topics in design because it covers all of these different varieties. So therefore, it does a really take, a really long time to be good with colors, color selection, and color theory. So once again, thank you so much for watching and I really look forward to seeing you in some of my other classes. Take care.