Building Awesome Color Schemes for Web & UI Design Projects

1. Introduction to Color Scheme Course: Hello and welcome to my course about building awesome color schemes for your UI design projects for your website and your dashboards. In this course, I'm going to cover step-by-step from the beginning a little bit about color 2-D, what are neutral colors? What are vibrating colors? What are the attention-grabbing colors? So we are going to cover all that. Then we are going to go to the next step, which is, "Where should I start my color scheme?" This is the question a lot of UI designers have in their mind, or even if you're a developer or you don't know about designing much, you might be worried that how can I build up my color scheme? I am going to answer this question. We are going to just use one color to create awesome color scheme in this course and even adding more colors to that. So we are going to go from one color and keep adding more colors. So step by step, the process of adding colors for your UI design projects. Then I am going to share tons of resources, online resources and resources I have created for this course, which are like 30 different color schemes. You can jump-start your UI designs using those. You can use them in dashboard design, UI design, I have examples along with them. So I'm going to share with you a lot of examples, lots of resources. One more thing which is very important and a lot of designers miss it, which is color accessibility. Color accessibility is actually designing for color impaired people and also using the color contrast ratios, how much the background or the foreground is visible. This is a topic which a lot of designers actually miss. So we are going to cover that in this course. What are you waiting for? We should start now and create some awesome looking color schemes. 2. Why Colors Are Important for UX and Usability: Let's talk about what is the importance of colors in user interface design, in mobile apps and web design or overall in all different product design. Whenever you look at any mobile app or any digital product you are going to buy, the first thing is that you are going to look at their visual appearance. This is the first thing you are going to notice. That is going to make some perception and you can say the value of that product in your mind. This is going to be your first impression about that product. Colors are very important, according to a research by CCI color users only take 90 seconds to get some idea of any product online to assess it, to create some first impressions about that product, and 62 percent to 90 percent of that, decision on the first impression they are going to make are based on the color scheme alone. Brands like Facebook and other big brands, they are using colors across all of their devices, their apps to highlight their brand. Similarly, colors are going to impact you, the users emotionally and psychologically they are going to impact them. This is going to be your first impressions. To create first impressions, colors are essential. Similarly, from user experience point of view, colors are going to enhance the usability of any app. For example, if the main call-to-action button is very prominent, it is going to invite user to press it. This is actually going to increase the usability of your app. Similarly, you can use the colors in enhancing the navigation. For example, you have seen in dashboards on the left side, for example, you use Gmail inbox, on the left side you can clearly see which is the folder or which inbox or drafts or whatever you are working in right now it is selected. Colors are there to display that you have selected this, there are error messages, there are information messages, there are success messages. They are all displayed by using colors. If you remove the colors from any interface, it is not going to make any sense. Colors are there to help you make sense of any interface design, any user interface. They are going to enhance the usability and user experience of any app. Similarly, now let's go to the other side, which is psychological influence of purchasing some product. Similarly, when you purchase something online, your decisions are mostly based on color scheme. Whenever you are making some initial assessment of any purchase, the look and the feel of that product is going to help you make decision that I should buy this product or I should take this course. That is why your product images, they matter a lot. The colors used in them, the backgrounds used in them. If you look at Nike and other products that are big brands, they use colors very intuitively, very carefully in their images, in their model shorts, with the short there, models with some football or something like that. They use all the backgrounds, all the uniform, all the colors, all the lights. They use them very carefully because they are going to enhance the influence in the user's mind or the customers mind that I should buy this product. This is a premium product or something like that. That is all about your influence by using colors and how they are important in user experience design, in buying decisions from your customers. Also enhancing the usability of any app. You can say it's an information architecture, you are displaying basically the information. Colors are being used to tell stories, to display information that makes sense, which is creating a layout that is readable. Readability is also a factor in color, because if the color contrast is not enough, which we are going to talk about color accessibility, users cannot read what you have written on your website or your mobile app or whatever article you have written. I hope you are going to enjoy all this study about color scheme and how we are going to apply them to different apps and different websites. Stay tuned and I will see you soon in the next video. 3. RGB vs CMYK Color Modes: So the first thing we are going to learn is what are different color modes because when you are designing for screen, you need to understand color profiles and what are different color modes like RGB or CMYK and how you are going to use them and which tools actually support them. Whenever you are designing you start with the right tool and settings. This is very important. So first I'm going to start with RGB, red, green, blue mode, which is actually the digital screens mode and it is used in all the different digital screens, and if you look at the screenshot on the left, there is RGB mode, which is you can see right now that this red has red color to 14 and green is mixed in it and it is 72 and blue is 75. So this makes up this red color on the right. At the top you can see the color that I have selected. So this is actually discolored. We are going to talk about CMYK, which is mostly used for printing. CMYK stands for cyan, magenta, yellow, and black. So k's actually black. It is not anything starting with k, it is ending the last letter off black and it is mostly used for print design. So if you are planning to design your business card or your logo, or your anything that is going to be printed for your company and imprinting material, you should start with a CMYK mode, and you are going to select colors based on CMYK value. So cyan will be 89 right now, magenta is 66. There is no yellow or no black color mixed into this blue color. So one tip I'm going to give you. There are colors like, you can see I have selected this blue color, particular blue color, and here we have from the four colors, C, M, Y, and k. So there are actually four color mixed together. We have only selected two colors from them. Cyan and magenta and we are mixing only cyan and magenta color to create this blue color andt is going to help you a lot in printing. It is going to save a lot of cost, printing costs, and also it is going to save you some color. So whenever you are designing for printing, you are designing a logo, you are designing a business card, try to use two color values, this is just a prototype. So this is all about CMYK and RGB. Mostly we are going to design for digital screens so we don't need to worry about CMYK, but I think that you should know whenever you are somehow designing a card or you can say a business card, you don't fail. One more concept which is very important to understand is color profiles. In RGB mode, your monitor or your digital devices, they can display 16.7 million colors, but there are more shades of colors than this. So which 16.7 million your monitor should display? That is going to be decided by color profiles, or they are also called color spaces. So color space or color profile is actually going to tell your digital device that these shades of colors are going to be blue or these are going to be red, or these are going to be yellow, green. So this is how it is going to show the range of colors that can be displayed within a color profile. For digital design, we use sRGB, which is used for mostly on web design, and it is used widely on all web browsers. So it is going to use to display images, to display your icons, your designs on websites, and also on the digital devices, like your mobile phones. So mostly we are going to design 99.99 percent we are going to use sRGB mode and if you want to study more about it, there are few more examples of most common color profiles, most popular over Adobe RGB 1998 and there are also color profiles for CMYK. So if you are printing in Japan or any other country, they have their own standard profile for a color. So CMYK, Japan Standard version two and there are like maybe 50 different color profiles for digital devices. So you need to select sRGB, which is going to be most common, and we will be using only that. Now in the last, I'm going to talk about few of the tools that are specific to the CMYK or RGB design. So if you are designing for websites are mobile apps. So I would like to show you that the apps on the right, they are actually used in the industry a lot like figma, sketch, Adobe XD Studio and Invision Studio. So if you are designing mobile apps or you mostly design website, you would tend to use the tools on the right. Photoshop is a mix you can design using both CMYK mode n RGB mode but I would not recommend it for branding or lower design. On the left side you're seeing Adobe Illustrator, which is a great really lovely tool for CMYK work, or branding work or print design work. Also there are capabilities of illustrator that you can start an RGB mode design, or you can design a websites in Illustrator too, but I would not recommend it for that purpose. Similarly, tools which I worked really recommend are Adobe XD, sketch and figma right now. There might be different tools or maybe different priorities in the future but Photoshop, Adobe XD, figma, and sketch, these are the four tools I recommend that you should start learning or using right now in 2019. So that is all. Whenever you try to select your tool, try to select it based on the RGB mode tools or tools that are used specifically and made specifically for web design and UI design and mobile app design. So that is all for this RGB and CMYK, var and comparison. If you have any questions, do ask me. Let's move on to the next lesson. 4. Color Wheel 101: Let me introduce you with color wheel. You might have seen it a lot of times, but here we are going to discuss how and what are the different colors that are going to made up this color wheel, and how actually it is made up of. Let's see some of the primary and secondary colors and how they are mixed together to create this beautiful color wheel. First talk about primary colors. Our primary colors are three, yellow, blue, and red. I remember when I was a child, we used to mix these colors to create different colors in our Montessori or nursery level or kindergarten classes. These are the three main primary colors and all different colors are going to be made by mixing those. These are primary colors then we are going to mix them to create our secondary colors. Now you can see these are secondary colors, orange, this violet or purple color, and secondary color is green, they are made by mixing the two primary colors. Primary color, yellow and red are going to create orange, Red and blue is going to create violet or purple color and primary color, blue and yellow are going to create a secondary color. We are going to mix these secondary colors with the next primary color to create different more colors. These are going to be our tertiary colors. Here we have the tertiary colors and this is how the whole circle of this color wheel is actually completed. We have primary colors then secondary colors, then we are going to mix primary and secondary colors to create tertiary colors. Now, let's talk about the shades, tones and tints of any color and what is actually hue. This is a very very important concept. If you get this you can create any kind of color scheme even based on a single color. First off, hue. Hue is actually pure color, we call hue, which is actually the color and the name of the color, pure color like orange, it is the hue and we are going to use the pure color or [inaudible]. Now, tint. Tint is actually, when we mix hue with white. If we keep on adding white color into any hue like for example, I have yellow or orange color and I try to mix white in it It is going to get brighter and lighter. This is going to create a tint. I remember when I was a child i used to mix and create different shades or tints of colors by mixing white, bestial color into maybe green or blue color, to create different tints of the same blue color. Similarly, tone. Tone is actually the same hue plus gray. We are going to add gray color to create different tones. A lot of time In design world, we normally call these tints and even shades. We call hues mostly tones or shades of the same color and we use the term interchangeably, but the actual thing is that toning down a color is actually adding gray to it. If you have any color, any pure colors like purple or violet and you are adding gray in it, it is actually going to create a tone. It is basically a washed out, dull colors. If you want to create a dull shade of anything, you are actually creating tone and you are adding gray color to it. You need to remember just these three things. Tones are gray, tints are white and shades are black. It is going to create our rhyme in your head. Shades. Shades are actually adding black. When you add black to a pure hue, you'll make it a lot darker and it is going to create shades of that color. Using this model, hue, tint, tone, and shades we can create a whole color scheme just based on a single color. If we have just one color like orange or maybe blue, hue it is going to be we need for example, we need five colors or six colors. We can easily do that. We can create like two or three tones, one or two tints, by adding white and one or two shades of the same color to create a whole color scheme. Now, I have seen a lot of times that designers when they read a design brief or they talk to a client, the client has some specific color scheme issues like maybe my client says that I need a warm color or I need an inviting look In my website. I want the user to feel relaxed and I want it to be very inviting and exciting. Then I am going to shift towards the warm colors. What my client is actually telling me that you need to use warm colors in your design. That is what he is asking for. You need to take care of this problem and you need to make sure that you know the difference between warm colors and cool colors. You can see the colors that have more red, orange, and yellowish shade in them they are basically warm colors, and the colors that are green and blues, they have more shade of blues and greens in them, they are actually cool colors. Whenever you are selecting or basing your color scheme, you need to keep this thing in mind that cool colors are actually calm and they are more, you can say, they have more harmony and they have more intensity, they are more strong colors and stable colors, and colors on the warmer side of the color wheel are more exciting. They are more, you can say fun. They are more vibrant. This is the basic difference. 5. What are Neutral Colors?: Now, I have seen a lot of time that in design classes or anywhere where I have seen a YouTube video or anything like that, they don't talk about neutral colors. Whenever you are designing for example an interface, mobile app UI design, even your rooms interior, you are going to use a lot of neutral colors. For example, I am designing for a mobile app and I want the background of that app to be a pale yellow or a pale grayish blue. Actually what I'm doing is I'm actually using a neutral color. What is the benefit of that neutral color? You might have seen that in your houses on the walls, you mostly see they are painted with neutral colors. Why is that? The reason is that neutral colors are actually going to act as the base of you can say, extending of other colors, for example, I have pale grayish blue color on my walls. Now I want an accent color and these neutral colors are going to give a lot of power to my accent color, or you can say my sharp, vibrant color on top of that. So neutral colors are basically dull and light shades, and actually what they do is they are going to act as a base for more vibrant colors on them. I am going to use most of them as my backgrounds or maybe my borders in my design, or maybe background for an image of a model, maybe like that. You have seen a lot of times these colors, but you might not recognize them because they are used in a very lighter shade sometimes. This is how actually the neutral colors are used. Let me show you one other tool you can use to get these colors, and that is Picular. Here we have a tool I have showed. I'm going to use a lot of time during this course, which is picular.co and what I did is, actually I searched for the term, interior design. You will see a lot of sharp and vibrant colors along with neutral colors. Here we have this brownish colors. These are both neutral colors. This is a bit sharp red color, it is an accent color or bright color. Then we have again dull color, C4C4C4. Then we have again, pale greenish brown color. Then we have again over here, these are all different shades or tones of these neutral colors. This is again neutral and this is again a very nice color, 79767B, a nice grayish brown neutral color. You can also use different tints or shades of this color to make it darker or lighter. This is how you can see we have different colors of these neutral colors. I really want to show you the concept of neutral colors because I have seen a lot of designers that just skip this. I hope you have enjoyed this lesson. If you have any questions, do ask me, let's move on to the next lesson. 6. Examples of Warm, Cool and Neutral Colors in UI Design: Let me show you some of the examples of the usage of warm and cool tones in different designs of different apps and websites. Here's the first example, Hermes fitness app and you can see unlike other apps, it has a very warm color usage. You can see here we have yellows, a little bit of cream-ish brown colors, let me go down, you can see over here reddish brown. Again, if we go down here we have very dark brown. This is all art theme. It is related to your art. So this is a great theme. You can see over here it has warm tone to the whole design. There are few things cooler over here like this timer over here. That is actually what designers do. They actually try to mix warm and with the blues to get a little bit of calming down their design. So this is how actually they balance it. So this also happens when you design something for your interiors. So if you are designing your bedroom or something like that, you might paint your walls cream or red or something like that. Then for your beds and your cushions, you might use blue dotted grayish in gray you can say cover for your cushions. This is how actually we try to use. But overall, the whole app or the whole design have more tendency towards one color scheme. For example, if it's warm, then it will be more warm and less cool. Here is a great example. Then let me show you another one. Here we have another one. It has more cool and calm look like you can see cyan colors over here. This is very light purple over here. You can see the whole look is very calming and the whole theme is a bit cooled theme. This is another example. Let me show you a few more examples here we have another example very nicely designed, but the whole theme is based on warm tones. You can see very dark red, very creamy background over here. So this is a great example. You can see even the images over here, they have very dark, reddish or orange-ish tones. That is basically this design is more focused on warm tones other than cool tones. So here we have it. Let me show you another one. This is another one, and here we have again, single color usage, mostly green, very dark green. So it is again a bit on the calming side and very serious, a bit serious and calming side, so no. So they have also used this reddish cream color or brownish cream color. So it is more on a more tilting towards, you can say red and greens. So maybe they are actually, I think, opposite. So complimentary colors, they are both opposite to each other, but this is more tilted and more looking towards warm tones. So this is another one. Actually he tried to mix two different things, like I said before, warm and calm. So they are mixing warm colors as the background, and the foreground color is a calming color which is dark green. Similarly, if you look at this one, this is for hotels. The thing I want to show you over here is its seriousness. It is more tilted towards calm. Calm themes, calm colors. You can see over here mostly the blues and if we go down. So mostly the blue. Blue is also for, you can say, professional color. It shows that this company is serious or this company's have professional organization. This is how this has been used. So here we have another example which is food delivery system. So as you can see, for the excitement they have used this orange color because orange is a bit exciting and warm color. If we look at it over here, you can see there are also very sharp green colors, which are maybe, I think for organic or maybe vegetarian, something like that. But the overall look or theme of this is warm. The design will always tilt towards one side, whether it will be a warm design or it might be a cool design or it might be a neutral design. But mostly it is tilting towards one side. So this is a bit warm design. Here we have another example of cool design and it is investment app. You will see that most of the apps or designs related to finance or business or things like that. They will be using blues a lot and this purple shades a lot. So you can see here is another example. This is mostly towards the calming tone. Then we have another example. This is a learning page and this is also, I think for finance company. Here you can see again the blue color is prominent. Then we have this green. Green is basically for safety, that this is safe to invest or something like that. So that is why the green color has been used over here. So here's another example. Again, this website web design is actually warm design. I really love how this designer has used a lot of simplicity in this design, and a very good use of the warm tone with this dull blue. I think it is a bit dark, dull blue-color, grayish blue. So really love it. Very simple design and very nicely done. Here is my design. You can see, you might have seen this GP tools. It is more tilted towards colder side or cool theme because it is related to doctors and doctors are mostly appeared with these colors like this cyan bluish color, which they actually wear most of the time like surgeons. So the dark blue I have used is for the business or serious professionalism, that this is a professional app, something like that. So that is all. I hope you have enjoyed this lesson that how mostly most of the apps they are going to tilt to one side, whether it will be a cool theme or maybe it's a dark theme. Maybe you try to balance them out by using a little bit of the other side. For example, if you are designing warm theme, you might add a little bit of cool color to balance it out. So if you have any questions do ask me, let's move on to the next lesson. 7. Color Relationship Theory: Now, we are going to look at what are different color harmony schemes and how different colors actually work together, and how many different kind of color combination and color schemes we can actually build. So there are few rules which you can follow to create a harmonious color schemes. Before we jump into that, I'm going to show you that this is actually adobe Color CC tool. It is an online tool. It is free, you can use that to build your color schemes. Before starting your color scheme, you need one color, which is going to be your base color. So base color you can get it from the logo or the branding of the company you are designing for. Or maybe if you are designing the logo yourself, you can select the color based on the theme. For example, if you are strong or fun or whatever color. Right now I have selected my base color to be this one, 3E4F87, 266 hue, 54 saturation, 53 brightness. Right now it is somewhere over here. The first color harmony or first color scheme you can create, you have already created that and which is monochromatic. Monochromatic mean that we are going to use just one color. We are going to add few tints, shades, and tones of the same color, we're going to use them and create a color scheme. So that color scheme, which is based on a single hue, and different saturation and brightness, it is going to be monochromatic. Right now what you are seeing is actually monochromatic. So if you want to just any color over here, you can click on it and you can use these sliders. You can see that the hue is staying the same, which is the top bar over here, bottom two are actually the saturation and the brightness. If you want to move something like this, you can do that. You can build color schemes like this. This is actually our monochromatic and it can effectively work on any UI design. So you don't need to use too many colors or three or four very vibrant color to show your different actions possible on your screens. There's one more thing, you can also select your color scheme from your image, you can import the graphic or image over here. Let's use this one. It is going to pick different colors from here you can see these are the colors that have been used in this color scheme and on this image. Now, we are going to go back to our color wheel and you can see this is how actually they have used the, it is actually spaced out the colors at the same space, you can see a bit of red orange, and orange, and blue. So these are the colors that have been used, pinkish red. Let's move on to another color scheme which is analogous. Analogues means that the colors that are closer on the color wheel, you can combine one or two or three colors that are closer inside your color scheme and build a color scheme based on that. So they are going to work harmoniously. If I try to move the base color over here, you can see, for example, if I try to pick a base color in the greens or maybe a bit of yellow. So greens and orange, so my color scheme is basically analogous and I have selected my base color, which is this one, the middle green. We have the balance of both yellowish colors, yellowish green, orange color, and also the green pure hues. Now, if you want to adjust it, don't try to use something like this. You can adjust it, you can move it like this, so it is actually moving towards more gray tone. You can see this is actually making this dull. So here we have white, then here we have gray. You can also use this one to make it bright or dark like this. Maybe I want some dark color in it, and I want some few light shades in it, a few dull tones in it. Whenever you are building a color scheme, there is a tip I'm going to give you right now and you should listen carefully. That we don't use all the colors of the same sharpness or brightness. If this color is very bright, I want something dull or dark for my background. Because I want this to pop on that background. Similarly, I'm not going to use all the colors brightly, they're going to, I might have some dull colors or something like that. This is going to be my color scheme. Here is another tool, which I really love. It is an online tool, I'm going to show the URL over here, color supply, I think. You can see here I have selected an analogous color scheme comprising of these. So if I try to move it over here, you can see this is how I'm actually moving around in the colors, different colors. Let's try this orange, yellow, and green. When I select this analogous, you can see it is going to give me few darker, mix of darker, and some dull shades and tones and tints. I'm going to pick one which I think is going to work well, for example, like this. This is looking really great. You can see it shows the examples of usage of this color scheme, you can see it is basically for icon design, but you can use that in your web design or UI design. You can see if I try to use this color scheme, this is the look and feel that's going to come from the combining these colors. Like you can see this, background is a bit dull, but the yellow color on top of it is very bright and sharp. This is the analogous color scheme. Now, let's move to another one which is triad. Triad is actually a perfect triangle on your color wheel. At the top we have red and you can see after three colors or three jumps, it is actually a next color. So after every three colors, so the space will be similar in all of them. If I try to use this one, let's try to use this one. This is more vibrant and have a lot of contrast in all these colors because they are separate from a lot of angle. If the colors are closer to each other, they have less contrast. As much they as they go away from each other, for example, if they are totally opposite, they have more contrast. If they have like separated by two jumps over here, they have less contrast. So suit your demand, whatever you want in your color scheme. Do you want lot of contrast? Or do you want subtle contrast in your color schemes? So triad is actually, you can see a triangle, perfectly spaced triangle on the curvy. Now, let's move on to split-complimentary. Before that, let's say I use this complementary. So complementary color scheme, which I think you should mostly use, is actually totally two opposite colors on a color wheel. They will have a lot of contrast, for example, this blue and orange, or this darker blue and orange. If I try to select, let's see, I'm going to use this one. So you can see this is actually how they will look. I would really love to tone down one color, so let's use this one. This looks really great. You can see this is how they will look if we try to build icons on this color scheme based on this complementary color scheme. Complementary mean they are totally opposite on a color wheel. It could be red or green. You can see in the universal UI design. Red is for deleting or canceling, and green is for success. They are totally opposite colors. Similarly, blue and orange, there I have seen a lot of color schemes using them. Then we have this green and magenta color. Then we have this orangish yellow color and this siano teal color, teal type something color. This color scheme, I really love orange and blue differentiates. These are two actually combinations one and two, and I really love this one. These are two of my favorites colors. This dark bluish, purple color, and the orange color. This is all about complimentary. Let's move on to the next one, which is split-complementary. Everything is the same complimentary. So you can see this is red color now, it's exact opposites should be green. But actually we shifted right and left to that complimentary color. It is going to be not having a lot of contrast, but still have a lot of contrast. It will have three colors, so more variety in it. Let's select this one or this one. So you can see, I'm trying this color scheme, and let's try this one. So this one looks good. You can see I have selected this split-complementary color scheme. These are the icons that can be used or this is how you can use different colors in this color scheme, and it is not going to have a lot of contrast, but still like the complementary colors, but still a lot of contrast. Also, you can see one more thing that the colors at the bottom, they are almost closer to each other. So they are going to act more mostly like an analogous color scheme. They have some compatibility. This color we can use for contrast. Now, in the last, I'm going to show you this square color scheme or double complementary sometimes people say that there are two complimentary colors like there's red and green and blue and orange. So actually this is split- complementary. Let's move it over here like this. So you can see right now here at the bottom, it is looking really cool because we have four colors now to play with. Let's select this one, and you can see this is how it is going to produce some icons and patrons, and this is how they are going to be used. If you are going to, for example, build a dashboard where we have notifications, where we have error messages, where we have a lot of this stuff, then we are going to stick with this kind of color scheme where we need almost four colors for different things and different actions. Also, you can date them up it and if you want, you can use something like this or something like this and use that in your color scheme too. Most of the time Icon designers or maybe illustrators, they need a lot of colors, different vibrant colors, different dull colors to complete the illustration. But in UI design or web design, we can easily design any interface, anything with just one or maximum two colors. So keep that in mind. This is all about different color harmonies. I'm going to show you the examples in the next lesson, how and where you can use and where these different color schemes have been used. Let's move on to the next lesson and see some examples. 8. Examples Of Color Harmony: Now let me show you how I have created few color schemes in the past, and this is one of the examples, let me show you. You can see this is a website and it is about a multimedia digital signage and different digital devices and character generator digital signs actually. I actually, redesigned this total color scheme and everything and keeping most of the layout the same. You can see here you are seeing this bluish shared then the stock, black, red. Then you are seeing some great the background. Then if you go over here, you can see this is dark blue, this is a bit light blue, and if you hover over it, you are seeing some yellowish color. This is actually the whole color scheme, it has red, blue, and yellow. Let me show you, I have copied different values from here and I'm going to show you how actually I designed this color scheme and what actually it belongs to, it's which color scheme harmony method belongs to. Let me show you. We are back at Adobe color CC and this is actually our base color, this is the base color I started with. This is 214U actually, and you can see this is almost closer to try add color scheme. It is a perfect triangle. This is red, yellow on the side and blue on the side. This is actually triad color scheme and you can see in the middle this one, then we have another tone or you can say shade of this one, reducing the saturation a bit and increasing actually the brightness of it. It is basically a taint. It is a basic light color with some less, you can say sharpness or saturation. Then we have this red color, this is a bit darker red color, maybe for strength because this is an organization and it is very old organization. Then we have this yellow for excitement, few of the links I used maybe I wanted it to be clicked and I wanted to have some good effect when someone hovers over them. This is the color I selected. This is again, actually very close U to 214, a little bit different, like 10 or 14 or 16 a bit change. Actually, this is how I have created this whole scheme and I have applied. There are more colors into it but they are mostly the shares and tense off this blue color. The only color that are contrasting are actually this red and yellow. Let me show you. Now this is a color wheel and this is actually the triad color scheme which I am using red, blue and yellow. Red, blue, yellow but I'm choosing different shades, tints of the the same color scheme. Don't try to use the same pure colors like this one. This is one example. Let me show you more examples. Let's see one more example of monochromatic color scheme. This is actually using just single color, which is actually yellow color and if you look at this, you can see here we have just a hint of red color. Red is actually this organization branding color and this designer, he actually picked the yellow color, which is I think three or four stops away from this red color and if we go down, you can see it is using just yellow, a little bit shared darker shade of yellow that's good. This is still monochromatic. Again, a dull shade or tone of this yellowish color. Similarly, over here, some light ends of yellow and a yellowish orange color and that's it. Basically it is red, which is already there branding color and yellow. Yellow is actually used or whole on this website and one more thing I want to mention or air, if you look at this portion, yellow, white and black, they have a lot of contrast. You can see this black is to pitch black and yellow and white on them are really exciting, a very vibrating colors. This is actually, you can say, this designer took these colors based on this. You can see if you look at overhead lasting relationships, global success are lasting relationships I have some excitement to it, maybe they want their customers to have some excitement and interest, something like that, maybe creative solutions. This is a very nice color scheme, just using yellow. You can do that also. Let's see some more examples. Here is a very great app designed by some designer and I don't remember. Anyhow, what I want to show you here is this is again a triadic color scheme using blue, red and yellow. Red is actually used here for canceling the call for these actions but mostly it is heavily, the mostly used color is this blue color, darkish, bluish purple color and then we have one tone down very dull shade grayish blue color over here. Then we have this orange, which is related to this red color over here. Here you can see at the right over here, if I drag it like this, you can see here we have it in this map icon over here. Then we have yellow used over here. You can see over here in this area, fair estimate, $12 and yellow. So yellow color is very bright and blue is a dull blue. This is another example of using dull and dull colors, and mixing the bright and sharp colors with dull colors. They are going to pop on the dull background. Another color scheme, it is again triadic color scheme. Now let me show you an example of analogues color scheme here we have this website natuur and milieu, whatever it is, anyhow it's from Netherlands. You can see or hear. Now they have all the colors that are in bluish green and Sian or teal shade and you can see green, deal, blue and that is all. So actually the theme is nature so they have stayed in the nature, which is water blue and green trees. All they'll color scheme. Everything is similar to this. You can see at the top they are using some very light dense and very dark colors of the same shade, same color, same hue to create this, I think this cookie banner over here. Let me show you how actually it works and how one more example of this one. This is another design gleam with the name of gleam. It is also using color scheme which is monochromatic mostly, and just one color which is going to be a complimentary color. It is actually mixing of two-color scheme. Why I'm showing you this? Because in most of the designs that have seen and designers to actually they tried to mix two colors schemes. They tried to use monochromatic, which is actually you can see the actual secret behind it that you try to pick one color and try to create different shades stints and different, you can see different darker shades, different tones of the same color, and add fun or two colors into that for the contrast. You can see over here, most of the colors order k, this is the same color used all over here and if I click and drag it, you can see, let's go to the bottom. Here we have very dark red color. You can see blue and red, and they look squared. Then we have this green color which is used very minor overhead, but it is actually for contrast. If they try to use the same color over here, it is not going to grab attention. That button color is the same. It is consistent like the primary action. Let's drag just this one. You can see the buttons are the same color, but they have used some workers like you can see the orange color over here for verified reviews. Just to show that this item is different, we want your attention over here. This is a very nice example of using a monochromatic and complementary color scheme, having some, add some more color to the monochromatic color scheme just to grab attention. Now I'm going to share with you one more popular analogues color scheme, which is blues and greens. I have seen it a lot of time in different interfaces and I'm going to show you some of the websites. Right now, so you can see this is another website. I think. This is a business growth platform anyhow gleam. You can see here they have bluish green. Anyhow, this is teal blue color scheme. I really love it. Very nice. You can see the green button is actually looking good on this dark bluish color over here and if I go down, you can see most of their colors. They are mostly green. Let's go down. Again, you can see bluish purple color and green and if we go down again, the same color contrast is a very nice gradient. I'm going to show you where actually it has been used more, let's see another example. This is gleam car wash. You can see again in their pictures actually they're using just one color, this very sharp, yellowish green color, maybe four there. They want to show that green product or something like that. But you can see, if you look closing the image, next one, you can see the eyes using blues or here in the background in their whole at mostly blues and greens, blues and greens. This is another contrast. A lot of times I have seen it blues and greens. But right now they are. Most website is actually monochromatic. This is the example I showed you before, gleam homepage. It is from Marius. No jokers and I really love it. Very simple, very effective. You can see this is darker, reddish pink color used over here. It is actually, you can say very have a lot of contrast on this area over here. Then we have this, a pale orange color, but on white it is going to look, I'm going to have a lot of attention. That is all. Most of the time monochromatic than they are in this Designer Edit vulnerable more colors to have some contrast. This app I have already showed you, this is from designed by Muhammad magic icon. You can see overhead the yellow, this blue, and this red triadic color scheme. I really love it. Very nicely done homework by jihad. It has, I think, 11,444 views. I think this looks very clean. Anyhow, this is how actually the examples of different Friday complementary color schemes. Then we have analog, monochromatic, all these different color schemes, complementary color schemes. I have seen that they mostly are blue and oranges. I have seen it a lot of times right now. I don't have an example. Maybe if I have, I will show it to you. Till then, see you soon in the next lesson. 9. 1st Project Pick First Color: Now this is the time for your first assignment. Here it is. Your first assignment is that you are going to select just a single color for any color scheme. I am going to give you the assignment in the next slide. What is your assignment here? Again, first color, selecting your first color and how you are going to do it. I'm going to give you some tips. Here's the assignment, Pickup is a food delivery company and you are going to select your first color that will work for this company. You are also going to tell me the reason why you have selected this color so this is again, a question of color psychology. I'm going to show you that tool that will help you pick up your first color and that is picular.co. Picular.co you can see over here this is the tool and you are going to select any color, for example, food, pickup, something like that. It is going to show you multiple colors. I am going to be waiting for your color selection and I'm also going to ask you why you selected this color as your primary color in your color scheme. This is going to be your primary color. The major color is that going to work in your color scheme. Enjoyed this assignment. I will be waiting for your assignment, which is the first one,picking your first color. Let's get started and start creating our awesome color schemes. 10. Secrets of creating Shades Tints Tones: In this lesson, I am going to share with you my secrets of creating shade, tints and tone of a same color and how you can use the same technique I use to create your color schemes effectively. The first one we are going to cover is shades. The trick to creating good looking shades is that you are going to keep the hue same and add black. But, you are going to do actually two things. Whenever you are creating a shade, you are going to reduce the brightness and increase the saturation. So hear me out again. Reduce the brightness and increase saturation. So this is going to create a really nice shade. If you really want very dull color, you can keep the saturation same and just reduce the brightness. Now, you can see at the bottom I have created four different shades of this left hue which is 218 degree or 218 and you can see on the right, I have 70 percent saturation and 70 percent brightness. So actually what I am doing is I'm reducing brightness and increasing saturation. Similarly increasing saturation in the next 75 percent and 40 percent brightness, I'm reducing it, increasing the brightness on the black color. It is not actually black, it is dark shade of the same blue. Saturation is 80 percent and brightness is 25 percent. So this is a very neat trick to create your shades. Now, let's see where you are going to find these shades. You are going to find them in this section of your color picker. So at the bottom we have more black added to the same color. On the right, we have more saturation. On the left we have less saturation. So keep that in mind. In the middle we have some middle saturation, it is at 60 percent. So from left to right, I'm right now at 60 percent. This is how you are going to find your shades in this section of your color picker. Whichever tool you use, it is going to be similar to this one. Now creating tones. Here you can see I have created different tones of the same hue, which is 218 and blue and you can see on the right, I have created three different tones of the same, this blue hue. The technique I have used is that I am increasing saturation slowly and I am decreasing the brightness a lot. So we need a dull color within something like 58 percent brightness, 42 percent brightness and I am actually increasing the saturation. Actually, I am manipulating these colors and brightness and saturation to create a washed out tone of gray for this blue hue. This is how I am creating my tones. Let me show you the area you are going to find on your color picker for the tones. This is the section where you are going to find most of your tones in the gray zone. This is how actually I create my tones. I move around in this section to find the color I like the best. Let's talk about tints a bit in more detail and what is the formula I use to create different tints. So same hue and we are going to add white or increase the brightness or increase the lightness. So here I have four colors at the bottom and you can see from left to right, I'm actually doing two things. Again, two things. Again, two things. You need to keep that in mind. What I'm doing is I'm reducing saturation and increasing brightness. This is the same thing you are going to do when you are creating tints. So saturation, 60 percent, 30 percent, 12 percent and you can see the brightness is at 100 percent and it is increasing, 90 percent, 100 percent, 100 percent. So this is how you are going to create some effective tints for your design and for your color scheme. Now, whenever you are using some color picker, you are going to find tints in this area of your color zones. So try to scan, move around in this section to find the tint you like or you want to create. You can go to the left top corner to find the colors that are very close to white. Sometimes we need a color that is very close to white and a little bit of gray for our backgrounds. So whenever I am designing a mobile lab or websites, I normally tend to use some bluish grayish white color. Actually what I do is I am in the left top corner and I try to find a color which have some blue, a lot of white, and some bit of gray. So to create a very nice color that can act as a background and don't distract my eyes or my users eyes. That is all for this lesson. If you have any questions, do ask me. I hope you've enjoyed this lesson. See you soon in the next lesson. 11. Color Psychology 101: Now let's talk about color psychology. Now, I have seen a lot of designers that they don't know which color is actually accorded for which purpose. So each color or each color theme you have, it is going to have some psychological affects on your users or your viewers of that design. So we are going to talk about what those different colors are and what they actually mean and why you should select these. So let's get started. The first one, my favorite blues. Now, why you see that there are a lot of usage of blue in UI design industry, you have seen a lot of mobile apps, you have seen a lot of other websites or learning pages that are using blue because it is the most safest color. It is liked by men and women alike and it is justifiable, so it actually develops trust. It is dependable, it is strong, it shows that this is a professional website or this is a professional app. This is actually the psychological affects of blue. Now green. Green you already know that all our trees and all our greenery that is around us is green, so it is related to growth and health and prosperity, peacefulness because green is actually a peaceful color. It is related to trees, growth, leaves, so that is all. If your team is actually related to medical or medicine or something like that or maybe some organic product or maybe some health-related product, you can use green as your major brand color or your major color in your app. Now, you already know that yellow is actually a warm color, so it is more related to warmth, clarity because yellow is the color of your sunlight. The sun is very yellow, we cannot even look at it. So yellow is, in human psychology, it is related to clarity, optimism, warmth because yellow is our most warm sun color and it is related to sun. These are a few things that are related to yellow. Keep in mind that as you move to warm colors like orange and yellow, they are mostly exciting colors. They have more vibrating colors in them, so keep that in mind too. Again, you can see for the red, again it's exciting because it is on the warm side. Reds, oranges and yellows, they are more exciting colors that is why they are used in food industry. You have seen McDonald's, they only use yellows and reds. That is their decision, designed to see and to get these colors to get some excitement going on in the food levels or whatever they have in mind. It is also related to youthfulness because it shows full of energy or something like that. It is a bold color and brave or bold something like that. These are few characteristics of psychology traits that are related to red colors. Now, purple or violet color, they are more related to creativity, wisdom and imagination. If you see most of my websites and whenever I design mostly, my colors, which I try then to choose are some shade of purplish, blue and yellows or yellow oranges. So orange is for creativity, excitement and this purplish blue is actually for dependable and wisdom and creativity. Actually, I try to build my team around that. If you are using some colors like that, you need to understand what they actually mean so you can use them properly. Next is orange color. Orange is actually a friendly color and it is cheerful and it shows confidence. You might have seen that most of the websites they use orange and blue as their main colors because this is the reason. It is an inviting color, so you can see friendly, for example, I want my design to be friendly, I want some inviting color, I'm going to use some orange or call-to-action button or my major landing page button. For example, call me or download this copy, this PDF or something like that. It is a friendly color, cheerful and because it is exciting, so that is why it is cheerful. Third is, it is related to confidence, which is also related to a blue color. Blue is also dependable, so that is all about orange color. Now, let's talk about black color. Black is mostly related to luxurious products and if you look at different luxury brands like Apple and all other different, they have mostly grays and blacks in the logos. You can see that Apple logo is getting black and they also have a lot of grays. That is actually showing strength, seriousness, luxury product. Also, a lot of fashion brands, they have used a lot of black on their websites and in their product marketing and something like that. Mostly it is going to be related to luxury and brand image. That this brand is a luxury brand or it is a top-notch brand or something like that. So these are different psdsychology traits that are related to black, like boldness, it has pulled, then mystery, formality, trends, luxuriousness and seriousness. If you are designing for a product that they want some very luxury look or they want some, very top of the line look, then you are going to use a lot of dark black colors on their website or mobile apps. The last, we're going to talk about white color. White is mostly related with peace and purity and it is also related to cleanliness, innocence, comfort and hope. If you are designing for an NGO or something like that, you can use this color a lot. Also in design, if you are using white as your background, it is going to give you a lot of space. If you want to use a lot of whitespace, you are going to add a lot of white over here. Actually, it is going to act as a background and it will give you a clean look. You can see it is already related to cleanliness, so if you want some clean look, you are going to use a lot of whitespace around your object. White color is mostly used for your backgrounds, if you want a dark background and want to use of white button on it, you can do that too. I hope you have enjoyed this lesson, if you have any questions, do ask me. Let's move on to the next lesson. 12. Gender Color Psychology: Psychology has another perspective which is which color is like per, which gender? If you are designing a website for men, kids or women, you need to take care of the colors you are using, you need to know that which colors are liked by men and which colors are disliked by women, things like that. First we are going to talk about what are different psychological colors that are mortal, liked by different genders. Let's start with men, and men mostly like this blue, green, black, and red color, they are mostly going to like strong colors, you can see blues, greens, black, black is very bold, red is very bold, these colors are liked by men. The most liked colors by women are the blue color, then second one is purple, green, and red. Keep in mind that the color are actually are actually from research, the colors you are seeing and have the more height it is actually most liked by the woman, like you can say 40 percent women they like blue, then 30 percent like this, purple to things like that, you need to keep in mind that this is not just a graphical presentation, it actually means that these colors are more liked and these causes are less liked by Women. One thing you have seen in common that blue color, it's liked both by men and women, that is why it is used in UI design or mobile apps or web design as a standard color, that is the reason behind it. Men actually liked more vibrant and bright colors that have more vibration in them, keeping in mind that if you are designing some product that needs attention of men are going to use bright vibrant colors, blue, orange, green, and red, green, red, and blue, they are both like by men and women. Unlike men, women mostly liked soft colors, softer means that soft pastel colors that are actually, you can say, not very sharp or very bright, they have very medium tone, very pastel type. Look, you can see these colors I have shown below, they have very soft touch and soft colors, they are not very vibrant, they're not very bright or very sharp or very, have too much such saturation. This is how you are going to design if you are designing, particularly for a woman app or woman NAB or woman product, unlike women, men mostly like dark shirt, they are more tilted toward dark shirts like dark blues, dark grays and dark orange colored, dark green and dark strong red color, or it is also closer to maroon color. Keep that in mind that men are mostly tilted toward vibrant and dark colors rather than soft shades of different pink or other colors. Similarly, if you are designing for women, they are going to tilt more towards tint of the colors like they have more white in them, they don't like very dark clothes or dull colors, if you are designing for men or women, you need to keep all these things in mind. That is all about the scale psychology of men and women with gender likes which color and if you are designing for specifically are for woman product, then you are going to use colors that are most liked by women.If you are designing for men, you are going to use colors that are, that are more attractive towards to the gender, which is men. That is all, if you have any questions, do ask me. Let's move on to the next lesson. 13. Color Scheme Effecting Personality of your Design: In this video, I'm going to talk about how colors are going to change the theme or change the look and feel of any brand, any website you are designing, any logo you are designing or building. I'm going to dig into my process of when I try to select colors, how different variations are going to affect and create different themes or you can say different personalities of a company or firm, or logo or website or mobile app. Whatever you are selecting your colors, you need to be very careful. They can change the perception, they can change the mood, they can change the personality of your whole app, your website, and your brand. I'm going to show you my illustrator and how I am building right now, my own small firm for learning pages. Let's dig in. Here as you can see, I'm actually building, I already have built this brand and you can see I wanted to be a strong personality firm. LandRight means landing page design and development for your small business. This is basically what this company does. For small businesses, I think they need some good professional people who have good knowledge and understanding of things. If you look at these four different combinations on the left, which are my top left, which is my favorite LandRight, amber, golden yellowish color with this dark blue and I really love it. I have used it in my earning exercise a lot, but here you can see it looks strong and professional, but it has a lot of vibration due to this yellow and it looks and feels mostly like a creative company or something like that. Anyhow, if I'm mostly focused on design, I think I'm going to opt for this yellow and blue combination. Now moving to this right one, this is more focused towards greens and blues, so it is basically related to growth and that can be a good option. But from strength point of view, I don't think that you can say it has too much strength for mostly for the branding part. I have already selected these type faces, so they also go with the same theme and the same personality. If you have taken my typography course, you can see that I have selected this trough this is my, you can say premium for I have purchased it. Now moving to the bottom two options which I really love. On the left one, it is basically red pale color, very pale red color, which is contrasting color for this blueish purple. These two are basically opposite colors and here you can see what I'm trying to do is, it is basically a modern combination of colors. I have seen it a lot of time that these pale, neutral colors have been used with the very bright or very dark shades to create some unique effect. Moving to the last option which I really love, I just created these right now, I thought that I should share these with you. You can see this is the one I really love, it is mostly with growth and personality. It has very professional look professional blue, dark purple color with some seanish green color over here for growth. You can see this is the color. If I want to make it more brighter, maybe something closer to overhear. Let's make its brightness 95 saturation to 70 percent. I think we should reduce the saturation a bit, I would go with this one, it is, it has a lot of contrast, a lot of personality, very dark, very professional color and I think we just need these two colors to design the whole theme. I would try something like this, you can see over here, I have selected my typist this heading and then another paragraph text. Then I have this button with the logo, I need to combine all these to create or build the whole theme of my design. This is how I try to vary different colors. If I show you my process before this, you can see this is actually where I started and this has tons of different combinations of these typography, basically typography. I also started with this one this is a funnel like shape. If you have some idea of S-E-O, search engine optimization, or learning pages, you might know that this is the funnel. It is actually in this direction. It should be top to bottom, but it is like this. This was the first logo I tried and then I shifted to this one, this is more simple shapes. I really love simple shapes because I think that if your logo is more simpler, it is more easier to remember and it would work better in smaller sizes. If I have something like this, it is going to work many nice and smaller sizes on. Second thing is that it is in a square shape. It has a lot of potential, for me, I selected this last one to be on these last two options, I am really looking forward to these, maybe I add few more colors. This is how the whole color scheme is going to affect the personality of your design, your whole website or whole mobile app. This is how the whole color scheme is going to define the personality of your brand, your website, your mobile app. I hope you have enjoyed this lesson if you have any questions do ask me. Let's move on to the next lesson. 14. Purpose of Each Color in UI Design: There are two secrets in any color scheme design. One I'm going to tell you in this lesson, the second one, I'm going to tell you. Another rule which I follow and you should also follow, which will make you a lot of good designer and it will help you create awesome color schemes. The first thing is that what is the purpose of each color in your color scheme? If you try to focus on that, each color has a purpose. You need to assign that purpose to that color, and you need to stick with that. In this color scheme, you can see this is our design I already showed you before. Here you can see the background colors are either dark or light. The two colors that have been used as a background is this one, this purplish blue color. Then we have this very light color which is, actually, let's select this one. It is actually f9, f9, f9. These are the two colors that have been used as a background. If you dig into this design, have you seen any other colors that have been used as a background? You need to fix your colors. One color is assigned to the background. These two colors, they are actually working as the background of this whole application. Then coming to the next colors that are going to be our action colors or you can see the colors that are going to grab the user's attention. These are actually the yellow color you can see, let's zoom in. You can see here we have this yellow color in this section. I think one more section, anyhow, this is actually, they have used this yellow color and this red color over here as their action colors. Then we have to the next step, we have our status colors. Maybe enabled, disabled, active, inactive, or maybe showing some icon or location or something like that. These are some extra colors. They are using this orange, this designer is using actually orange or this gray, this dark gray. If you look at closely on this over here, you can see when the call is enabled, it has a very dark blue, the same background-color enabled color. This is actually their main color, primary color, where they actually started and when it is disabled, it has this color. This is a darker, you can say, less saturated color of the same, this blue and this has been used over here. Similarly, if you look at this text, I'm going to zoom in a bit. It isn't going to look jaggie. You need to notice one thing the darker color is for the text which is enabled or something like that. The rest of the text you can see it is very dull, grayish color. You can see the difference. This is a very subtle difference, but you need to notice that if you want to be a good designer. Here is a recap, you need to figure out what colors are going to be your action colors or your, the action colors on your app, whether it would be a button or a phone icon or a rejection or delete icon, delete button or anything like that. Action colors going to be specific. Background colors, you need to consider your background colors that I want a very dull color, darker color for one background and very light color for another one. You need some status colors. Mostly they are needed in dashboard design. When you are designing a dashboard, there are different statuses, error messages. We have different notifications, we have different updates, so we need these status colors. This is actually the purpose of different color. You need to assign that purpose and you need to stick to that. One more thing, if you have noticed action colors are very bright. They have attention-grabbing personality than the background colors, they are dull, pale, or you can say smooth, clean look so we can easily stare at them for longer times. Status colors are mixed with animation or sometime movement to grab the user's attention. Like you can see when you slide your slider fall enabled and disabled. That is actually an animation. So it has feedback. This is actually how UI designers use colors in their apps, in their websites, and in their logos, anything you can use the same principles. Assign a color and stick to that and assign it a function and that is all. See you soon in the next lesson. 15. Sharpe on Dull Color - Contrast Secret of Colors: Now I'm going to tell you another secret about color schemes and how you can build awesome color schemes. The rule is that we are going to mix dull colors with saturated or sharp colors. The dull colors, they are going to act as a background or a supportive rule for the sharp color on top of it. You can see here in this example in this slide, you are viewing a very sharp blue color, but the background is a dull, bluish gray color. It's a very dull tone of the same blue. I have make some gray and make it a bit more brighter, and you can see they are looking great. You can see here we have the saturation of the top button sweet and sharp. It is 89 percent and brightness is 88 percent. The background you can see the saturation is very low, 10 percent and same color the hue is the same and the brightness is 89 percent. This is the rule you need to keep in mind. Here is another example of dull colors that are going to mix well with saturated colors. Now here we have two different colors, and you can see we have this brown color and we have this very sharp yellowish orange color. Here we have, again, the saturation of the top is 88 percent and brightness is a 100 percent, so is emitting a lot of light, so it is very luminant color and the background is a bit dull, brightness is just 25 percent, and saturation is six percent. This is another example of the same color scheme so I have mixed two colors, but one of them is very bright and very saturated and the other one is less saturated and less bright, so they are going to go together very good. Now another trick, which I have seen a lot is that I have seen with the expert designers that they tend to mix pale colors with saturated colors. In their color schemes, they have pale colors. Pale colors mean that the background is actually going to have very less saturation and might have some high brightness. Here you can see I have the combination of two colors. This is very pale greenish color. I really loved this combination actually, anyhow. Left you can see here we have the color which has saturation of 14 percent and brightness is 89 percent, so brightness is good, but the top blue over here it has medium saturation around 55 percent and brightness is 50 percent. Actually, this is a lot more saturated, but not a big jump from the background, so background is a bit bright and pale. I would call it bright and pale in the sense that it has less situation, but it is bright. You can see the button on the top have a saturation difference of like 40 percent more jump in saturation than the pale background. This is another contrast you can try. Now, let's move to the second step, which is bright colors, versus dull colors. They are going to go well together too. This is a single color. I have used the same hue and the brightness of the background is 13 percent, so it is very dull, it is very black. It is very close to black color. On the left you can see the same color and the brightness is a 100 percent. This is another trick you can use. These are the principles if you learn these and you can manipulate these, you have good command on these two skills, you can create any color scheme and that will pop your design that will look cool. Now you can see I'm using just one color, again, over here and the brightness of my button is 30 percent, it is very dark and very saturated color and the background is very pale and very bright. This is again another example of the same color scheme. You can also judge my color scheme if you look at different text areas over here, where I have some medium tones mixed in this whole design. I hope you will try to notice how different colors have been combined because this is actually the scale. If you start noticing different color schemes around you, you are going to grab the secret that how we can mix them together. Here is another example of bright background and dark colors on top of it. You can see I have wrote bright ground plus dark colors. Here you can see, I'm using a gradient of dark-bluish to this pinkish red color and you can see the brightness of both these colors is less than 50 percent. I think you need to experiment with it, but I think, personally that brightness must be less than 50 percent or just 50 percent. If you try to increase like 60,70,80, then you need to increase your saturation too, because the button is going to look dull. Try to maintain your brightness as 50 percent, 55 percent, no more than that. Now, let me show you an example of using those both principles of dull background plus saturated color on top of it, then we have bright, pale background and we have some dark color on top of it. You can see here, I have a sample. This is going to be your exercise actually. This is a design, Crypto Bank and you can see I'm using just one hue, one single color to create this whole color scheme. Let me show you how I have created this. Trick over here is bright background and on top of it we have very sharp color. Here we have this color. This is our primary blue color and it has the saturation of 80 percent and brightness is 60 percent. I don't want you to go above 60 percent, I guess. This is looking great on top of a bright white background, so we have a lot of contrast. Similarly, in the button over here, if we look at this bottom area over here, which I really want to show you guys that you need to understand this. Here we have another color as a background and the saturation of this color is seven percent and brightness is 100 percent. It is a basically pale, bright color, very less saturation, and very high brightness. This is one thing. On top of it we have very dark color, brightness is 60 percent and saturation is 80 percent. This is the trick I wanted to show you. If you master this trick, you are going to, thank me later that this trick really help you a lot. These are the two principles I really wanted to show you that how you can create one, using with one color, you can create awesome looking color schemes by using this principle. I hope you have enjoyed this lesson. If you have any questions to ask me. Let's move on to the next lesson. 16. How I Build My Color Schemes Steps: Today I'm going to share with you my perspective of building a color scheme. There might be different methods of building a color scheme, but this is how I build my color schemes. So I'm going to share this method with you, and in the next lessons we are going to cover step-by-step. I'm going to share and show you my Adobe XD different screens, and how actually I keep on adding different colors. This is my method. Number one is that you start with just one color. You can pick that color from any brand color, or you can pick that color on the theme of your design, for example, if you have a sofa app or a media app, you might go with dark blue or red colors anyhow. So select your first color, and we are going to create a monochromatic scheme. You can see different shades and tints, different trace. These are all from the same color, changing saturation and brightness. This is always my first step. This is how actually I start creating my color scheme. So I started with this hue over here on the left, then I have shade, tint, a few more shades, three tones, tint, and one more hue, which is the same hue, but it has a lot of saturation. Actually, you can say attention-grabbing blue color. So it has more saturation, this blue. I really love it. This is actually, you can say the tree of my color scheme. This is actually how I start experimenting and building my color scheme. So you need to experiment with it, try to create few tones, shades, and tints. Now the third step is I try to add one contrasting color. So we have already built different shades and tints of that blue, now we are going to add an opposite color, which is a contrasting color, and the opposite color on the color wheel is actually orange for the blue. You can see I have added a contrast color over here. If you look closely, you can see one more thing, that on each color over here, there are different colors that are going to work. For example, on a dark color, it is going to work a light white color, then on a tint color, we need a dark color. So we are actually experiment on these colors and see which has more contrast and which can be easily read. Try to use colors that have good contrast on different backgrounds. Now, my last step. Whenever I stop building my color scheme, for example, if you are designing a mobile app or our dashboard, you need few more colors, like you can see on the right side, we have status colors. So I actually add different status colors for information, for error, for success messages, may be for some update. You can see one of them is blue. This is actually, for example, if I have some update, or some software update, or maybe some value update, I don't want it to be some error or something like that. I want it to be very calm, blue color. I have used a tint over here to show my status. Our tint, you can use the tint for the status message. You can use a yellow message, for example, I want to show the user that this value, you need to update it. It is for five minutes ago value, so you need to update it, so I'm going to grab this yellow color and show that message. Similarly for error, I am going to use some red, and also for the green, I'm going to use for the success. The trick is that you need to create these colors and these yellow, blue, and red, and greens that are actually going to work and look good on these colors. They must combine well. Sometimes you start choosing color randomly, so this is not a trick, you don't need to do that randomly. I'm going to show you how actually it's done in the next lessons step-by-step, so you don't need to worry about it. Let's move on to the next lesson. If you have any questions about building this color scheme method of mine, you can always ask me. Let's move on to the next lesson. 17. How to pick up your First Color: Whenever you start building any color scheme, the first thing is where to start. I have seen a lot of designers that are new designers or that don't have much experience in design. The first mistake they do is that they don't know where to start their designs. You can see they are a bit confused in where we should start, which color we should pick. I am going to simplify this for you and I'm going to show you two starts which you can do. The first start is that whenever you are starting any design, look for its brand. If it belongs to already a built-up brand, maybe they have a red color in their logo or maybe they have some yellow color in their logo like McDonald's. You can from there, pick up their brand color and start from there. The second option is that you start with your own-self. For example, if I want to build any design I might start with a blue color because it is safe, and second is that it is liked by men and women both of them. So blue is a bit safe color. That is why you see a lot of blue colors even you can see in this interface of this "Adobe X" the share button is blue. This is a very safe color. Start with blue and go from there. Now I'm going to show you few examples how actually I created a color scheme, and we are going to create a monochromatic color scheme right now by using this blue color. First I'm going to show you the example. Here is 'smart sofa app' from a brand name ROM, R-O-M. It is a European company, and they have offices in UK, Germany, and all across the Europe. When I started this app, I didn't add any concept or any idea of their color scheme. You can see I am using some orangeish-yellow and very dark blue color which is close to black and this red. Also, this green one. My major color is this dark blue, this red and this orange or yellowish, it's more of a yellow color. Also, you would see some dull Browns over here, very dull grayish browns over here, then we have very dark brown in this. Watch video, read text. This is a switcher. So tap switcher. If I tap over here, it switch between two screens, then you might see a bit of green over here which is basically our a status colors. Anyhow, if you look closely, let me zoom in. If you look closely, these are again dark brown texts over here. If you look over here, this color is actually dark bluish purple. Then we have this mini-sofa, meine sofas, it is actually grayish, bluish, dull brown colors. It is less brown, more dull grayish blue color. This is how actually I created this, so you can see this is dab bar[phonetic] and when someone clicks on it, there is a highlight for this icon. It is a dark blue color. I'm going to show you how actually I managed to get this color scheme with this app and I have created many screens for this one you can see over here. Similarly, you can see there are few options over here for different more functionalities like this sliding bar. We have dark blue over here for the fill. This greenish color for some status, this dark red, very sharp red color, maroonish-red color. We're going to go to their website;actually I picked these colors from their brand. Okay, so here is the actual brand. It is called ROM. If you closely look at all the sofas and the whole team of their photo shoots and sofa skins and their colors, you will see similarities in what I have used in my app. I picked one color from here, this strong color, which is their red color. Then I picked other colors from these images; you can see their sofas have very dark bluish color. This I have used in my color scheme. You can see these browns, dull brown's brownish gray colors I have picked from this image. This is again dark grayish, and we see some hints of yellow and orange over here in the image. I think that these are going to go well together because they are looking great in this interior design. They will also look great in the app. This dark blue is actually go great with this red, it is basically a triad color scheme, red, blue, and yellow. You can see over here the hints of yellow's in this image. They're looking great with this dull dark grayish color. This is how actually I started. I started with this color and I picked few more colors for the theme, and I used them for different purposes. 18. Creating Your First Color Scheme With Single Color: Now the second question is, where should I start if I don't have a brand? You can start with any color. You might choose some color for your brand. For example, if I have Himalayan salt. For example, I want to start a company, or maybe I'm designing for a green company that is labeling that this is a 100 percent natural or something like that, I might go into greens and yellows more. If I am designing an online app or something that is going to be going to work online for some designers or some other finance group, I might use blue. So try to select the color on the theme of your app. For example, if I have very serious app, I might go into dark royal blue colors. So that is, you need to consider. So for this example, I'm going to select this color and I'm going to replicate it. Any color scheme, I would say that you create at least two tones, two shades, and two tints. So we are going to create a very dark color over here first. So let's go to the fill and go to HSB mode. Here we have brightness, let's first create some tints already high brightness. Let's use some less saturation. So this one looks great. Let's create few more. Let's move it to a bit more whitish side. So I'm going to reduce the saturation. So actually you can also go over here. You can see the hue is going to stay the same. So you can drag over here and go to your likeness. Maybe I want some dull whitish color, something over here. So this looks great. So I have two tints over here. So you can see, let's drag them over here. Now I'm going to have some shades, at least two. So I'm going to go a little bit of dark over here and a bit saturated in this area. So let's go with this color. It was 201. So I'm going to keep it 201. So it's not 200, 200 it was 200. I think it was 201, I guess. So 201. Let's move all of them to 201 then we have 201. Let's delete this one. It is also going to be 201. Let's make it a 100 percent this. So we have right now four colors, let's add few more. You can say a little bit less heavy dark image over here. So I'm going to go for this over here. So let me tell you the psychology behind this. So I am actually creating two dark shades, two tints, at least and you can see this can be for my normal text, paragraph text. This can be for my headings or very bold texts which I really want the users to grab attention. For these, I have light colors so they can work together on these dark screens. Similarly, we are going to have few more. Let's add one more over here, two more actually. So then we need something in between, something like this, maybe for borders or something like that. Let's add one more. So it is a bit darker. That's 20. So you can see we have actually three levels. This is actually middle level or tones. Then we have very dark and very light colors. So we started with this base color, and we created at least six colors from this. So this is your actual color scheme and they must be at least these colors to get a great color scheme. So you can see here is an example of applying these color schemes. You can see how actually I have managed to do this. This is a very dark color. This is actually a sharp blue. Let me zoom out. So it is a very sharp blue. I think it is almost the same, which is this color. Then you can see on this background I'm using very dark color. So this is actually going back to the basic lesson where I told you that very light shades on very dark. So they are going to get a lot of contrast. Similarly wide on this is looking good. I can easily read it. Here we have some dark brown, sorry, they are not brown. They are actually, you can see this is very dull color and it is almost atoned. So grayish tone, let me show you the icons at the bottom. So here we have dull bluish tone of this same blue color. For the highlight I am using our primary blue. So this is actually our accent color, or you can say the popping color, this one. If you want to make a sharper ones, so we are going to drag it over here and if you want a sharper color, you are going to increase the saturation over here. So we have more sharper version of the same color. So if you want to use something like that, you can use this sharper color like I have used it over here, 961 bonus points over here. If we go over here, so you can see there are many varieties or many things you can do with the same color scheme. So you can see here I have like 1, 2, 3, 4, color schemes, two dark and two light themes. I am using the same colors. So you can see I'm using the same colors. Here I have very dark background and I have reversed the color scheme from this, my light background. So you can see here we have latest orders. It is very pale grayish color, so it doesn't pop out. I don't want to get too much attention to this one. Similarly, I want attention in this area, so I have very light and dark shades. Similarly for this button, it is our primary button or main action button on the screen. So it is having a lot of great attention. Similarly, this one has primary blue. So you can see these blues are actually attention-grabbing colors on this black or dark background. It is actually not black, is very dark blue. So I'm going to give you this file. If you want to look at it, you can look at it but I have already showed you how to actually get started and you are going to thank me for this because it is going to make your life very easier because you can just create any color scheme with just one color. You don't need two or three or four colors. I hope you have enjoyed this lesson. If you have any questions, do ask me. Let's move on to the next lesson. 19. 2nd Project Create Monochromatic color scheme: Now is the time for your another assignment and which is creating monochromatic color scheme. You have seen me creating a monochromatic color scheme using just single blue color. Here is the assignment. Swish is a prototyping app for designers. Create a monochromatic color scheme that will work for this company. You are also going to create a login screen and apply that color scheme to that login screen and you are going to submit both of them. Along with your color scheme and that screen. I'm going to show you how I want it to look like. Here as you can see, here's an example of what I actually want from you guys. This is a login screen, forgot your password or whatever, you can just design a mobile app screen right now this is just my resources file. You are going to create a color scheme on the left like this one, it will be monochromatic. It might not have green and submit it like this to me. That is your first assignment I'm seeing forward to seeing your assignment. Let's get started. 20. Adding Second Color For Contrast: Now, we are going to take the second step in any color scheme. The first step was that we just created a monochromatic scheme. Now, we are going to add one more color to our color scheme. To do that, we're going to select our base color, and I'm going to grab its hexadecimal value, command C, and we're going to use some of the online tools to grab our second color. There are many tools out there. I am going to share with you three or four. Now, I am going to use this Coolors or Coolors.co. Actually, click on this "Generator", and let's see where we are going to head. First thing I'm going to do, is I am going to edit this and copy this over here as my value, and I'm going to lock it. Click on this "Lock". I called it lock this color. We're going to press our "Space-bar" to get few more colors. Here as you can see, we have few more colors, and you can select any colors you would like from here and lock it. But right now, I am looking for a more vibrant color rather than these very dull colors. What I'm going to do, is I'm going to keep pressing my "Space-bar", till the time I get the color I want. Some orange color are very sharp; orange color that can be mixed with this blue color. Why is that? Because you can see, if we go to this color supply app, this blue color is actually opposite and complementary color to this orange, so I am looking for some shades of these. Either I can use dark blue and orange, or I can use some pale blue and sharp orange, so this is what I'm looking for. I have some color closer to this one. It is actually yellowish-orange color. If I press the "Settings" over here, I can increase its brightness or I can move it slider, for example, maybe a want something closer to this orange, and I can lock it then. Then I'm, again, going to press "Space-bar". Now, you can see I'm getting more colors. I really like this grayish color, so I actually locked it. I really like this green one, so I'm going to lock it too. This is how, you can see, I have created a very nice-looking color scheme. I have some dark shades. I have some green shades. I have some yellow shades. Yellowish-orange is going to work really well with blues. These are actually two blues, one green, one, a bit, grayish color, and this yellowish-orange. This is how I created this color scheme and I can export it. You can click over here and you can click on "PNG" or you can click on "SVG", and you can drag that into your graphic software. I'm going to save it something like that. Another way is that, I actually tried to use this, Adobe Color CC, and I'm going to grab colors from here. What I did is, I actually copied, selected this base current, so it is actually the base color. I copied the hexadecimal value over here. You can see, this is my hexadecimal value for the base color. I selected complimentary and different color schemes from here. If you want to try it, you can select something like that. Right now, you can see this is very basic. Basic means that these colors don't look very great with each other; there are some dull colors, there are some sharp colors. You can adjust these; keep the hue same, and try to adjust it. For example, if I want something like this, yellow color, and let's move this yellow a bit over here, and this orange. Let's move this blue like that. Also, I am going to use a bit darker or dull shade over here, but brownish, something like that. Brown. This pink is looking really, very strange. Anyhow, this is another way to get your second color. I don't, actually, like this color scheme app to create the whole color scheme because it is going to get you a lot of different strange colors over here. For example, if I want to go into this compound, what you can do, is you can get these base colors, and you can create more colors that you are thinking about by creating different tones, and shades, and tints of the same color, so don't try to use or copy the same colors which this color wheel actually generates. One more thing is, I normally do, is I actually go to this explore and I search for, for example, if I have a blue, orange, something like that, I'm going to select over here. You can see, I really like this color scheme. It is very closer to what I am looking for. I can download it, I can save it. Similarly, this one looks really great: blue and oranges. I'm liking these two or threes. The color schemes, I'm going to download all of them, and I'm going to see which colors are going to look great in my app. If you are looking for green and orange, you can see we have different color schemes. You can start your color scheme by selecting any other color scheme, and try to alter a little bit of hues, and tune it to your own needs. This is how I, actually, select my second color or add more colors to my color scheme. Now, I'm going to open this color scheme editors. You can see fill editor. I'm going to move it down. This is another trick which I actually use a lot that I keep the color in the same position and move over here. In this color wheel, actually I went to this orange color, and I think I'm liking it there looking great together, so I'm going to keep this orange color over here. Let me show you an example of how, actually, I used it because this is going to be our secondary color action. You can see on this screen, we have blue, but you can say for highlighting our tab bar and not for our main primary actions. There are, actually, two types of attention-grabbing buttons. One is primary which is our main action, which we want our users to take on this screen. Secondary action which is, actually, maybe some highlighted, or selected item, or something like that. You can see over here and here, I'm using orange color for the selected item. For my primary action, I am using my blue color. Similarly over here, this is again, the same, and this is again, the same. You can see, I'm not mixing both of these colors simultaneously with each other. Here as you can see, I actually used a dark bluish gray color over here to show this list item over here. This is how, actually, you try to add one more color or more colors to your color scheme. I think that two colors are more than enough for any kind of color scheme for building any app, any dashboard, or any website. Other colors you need are status colors, which we're going to talk about in the next lesson. Right now, I would stick with these two colors. One color I will choose, and I will create different tints and shades of that color. The second color will be for my accent color or primary action, and I am not going to create more shades of it. This is going to be your, you can say, mantra of your color schemes. Don't try to create shades and tints off both colors. Try to use one color and creates tints and shades of that one, so that is how I take my second step or select my second color and color schemes. I hope you have enjoyed this lesson. If you have any questions, do ask me. Let's meet in the next lesson. 21. Status Colors in UI Design: Now, in the last step, we are going to talk about the status messages. This is a digital wallet app, which is showing your Bitcoin or total currency value. These apps or dashboards where we see a lot of data or something like that, we need a lot of status messages. For example, here we have the screen. The screen color stating that we have got some profit or our values are going up. Similarly in this Bitcoin, it's value has been increased 22.8 percent, similarly for this. We have at least three status messages. One is success or maybe something is increasing, one is something is decreasing, and the third one is actually like this. For example, I want some update. For example, this value might be from previous, three minutes or five minutes ago. I want the user to press this update now to grab the latest value. This is actually going to be my information text. Three colors, we need more for this color scheme. We have already did this exercise. We have build this color scheme using just one blue color, and now these are all different variations. If you look closely over here, you can see this is how all these colors have been laid out. This dark most color is for the most important value. Then we have this pale bluish color. We want it to be easily readable or legible on this pale bluish background. This very bright, bluish pale background, we want it to be very easier to read. If you look closely on this screen, you can see this 1.5 or this dark red color, it is easily readable. If you go to this value over here, let's move to this HSB. It is 73 percent saturation, very high saturation, and 85 percent of the brightness. If you want more darker color, you can go more dark, but I think it is really visible right now. Similarly, over here, this green actually on this black color background, this screen and this screen is different. Why is that? Because on a light theme, we need a bit of darker color and on darker shades or pale backgrounds or dark colors, we need a color that has more luminance, more light emitting from it. We want it to be different from the background. You can see this background is blue, very dull. This color is actually, let me show you. It has 98 percent saturation and 90 percent brightness, so very bright, very highly saturated color. If you look over here, this color has the same hue, 148, but it actually has 98 percent saturation, but brightness is 70 percent. You need to use your designers head. You don't need to stick with the colors that this color is going to work well on each background. Try to use your head. This color over here, if you look at it, it is actually 20 percent saturation and 61 percent brightness. But if you look at this color, it is 7 percent saturated and 60 percent brightness. Actually, I am using a very grayish color over here because the background is already very dark. I need to have something different. This color scheme, even though it looks like it is the lite version of this color scheme, but they are different. Now, if you look at this color over here, it seems a bit very sharp and I think we need to make it a bit lighter. Let's put 100 over here. Looks good. Let's reduce the brightness and I'm going to go some place over here. I'm going to add it now. Also for this one. Make sure that these can be easily seen and they have good contrast with the background. We are going to talk about color accessibility later on. But right now I want to grab this simple rule, that we need different more contrast when you want to have some eligibility in your colors. Maybe something over here. It is very sharp or vibrating. I am going to reduce it over here, somewhere. Maybe somewhere. I want it to be a bit lighter, have more brightness. I'm going to touch the top over here. Let's try this color. They look very similar, but they are not similar. This looks great. Over here you can see this is a very dark shade of the same color. It has 73 percent saturation and 85 percent brightness. If you want to go more dark, you can press 80 percent over here, and also for this one, 80 percent over here. Why I'm using 80 percent brightness, because, the background is totally white. Background is full bright and it is 100 percent, so I am using light. 20 percent difference, if you remember the rule, I showed you that I am using 100 percent for this one. Sorry. So 80 percent brightness for this one and this is actually white, so it is 100 percent brightness. The difference of 80 and 100 is actually 20 percent. Make sure that you have good difference between these two. Let's see what we have over here. Here we have 70 percent and it is 100 percent, 70, 100, 70, 100. Similarly, if we look over here, let's take this background. It has 31 percent brightness, and this one has 100 percent brightness. This is good. This is actually the whole color scheme. Here the color scheme is a bit different because we have light background here, we have dark background. Look at this digital wallet text. It is a bit darker, dull shade of blue. Here we have a bit lighter, a brighter version of this. Because we have darker backgrounds. You need to keep that in mind. Similarly, here we have some grayish blues, and here we have grayish blues, but they are a bit more lighter in nature. They are not dull like this. Whenever you are building some color scheme, you need to have some status messages like this one. The trick to create these is very easy. Let me show you. Let's grab this color over here. Move it outside, make it a bit bigger. Here is our base color. Let's replicate it and I'm going to show you a trick to create red color, for example. We have this color. What I'm going to do is, I am going to go into this green. Now, we have the green hue now. We can move around and maybe we can have something like this. The hue is same, I just changed the saturation and brightness. So we have green color. Let's add one more color, which is going to be our yellow. I'm going to go to this yellow color, but you can see right now we don't need this yellow, we need a bit lighter, yellow, maybe something over here. Right now, it doesn't look very good because it is on a gray background. If you put it on a dark black background, it might look better, but you need to experiment with it. If you don't like this color, you can change it. Let's add red color over here. I'm going to go to this red, or may be this or this, whichever coordinate you want. I'm going to go with some of this pinkish red color. Let's make it a bit dark. I am trying to change the luminance of these colors, I'm trying to match them. This color, this color and this color, they look almost the same. Blue color is always darker. If I want to change it, I can change it like this. This one looks great too. I'm going to create one more for this yellow because I don't like it much. I want something be like this. This one is looking better to me. You can try out these colors and then you can start adding them or fixing on them. Right now, we have this yellow, which is 50 hue, 27 and 100. It is more towards a bit of orange color. Right now I have selected this one which is 63. If you want to go closer to this one, I'm going to go with this 50, 52, and I'm going to increase my brightness a bit more. This is the color we are going to need for our status messages. This is a very simple technique to create colors that we are going to select our base color and move just this slider into red, green, and yellow or orange. That is going to take care of all these problems we have when we are creating color schemes. One more thing you need to consider is that, which item is going to highlight and which item is settled? This is very important. Some things are not important, like other items on your screen. This text is very important. This message that it is increasing or decreasing. This is very important. This is just in information, digital wallet. Nobody is going to look at it first. Similarly, this one, we want it to be a subtle effect. We don't want it to be grabbing the attention. Don't try to use all the attention grabbing colors all over your screen. This is, you can say, disastrous. I have seen a lot of novice or beginner designers that they tend to use all the attention grabbing screen colors all over the place, and this is going to ruin the purpose of information design. Actually, we are designing for information to be displayed like that. Keep that in mind and I'm going to share all these files with you. They are actually Adobe XD file, maybe one, two scale. Maybe few sketch files, I'm going to include that in my course too. If you have any questions to ask me in this lesson, we added the status colors you can see over here, and that is going to end our color scheme. If you have any questions you can ask me. I will add few more tips and tricks to this lesson and this course. Till then, see you soon in the next lesson. 22. Dashboard Colors Schemes: In this lesson, I'm going to talk about dashboard design. Now, the colors used in dashboard design is you can see a bit different from your normal web design, or your normal logo design, or branding design. Whenever you are designing dashboard or some graphs or something like that, so whenever you want to display a lot of information in small space, you need a lot of colors. Why? Because we have different updates, we have different error messages, we have different information messages, we have different bell icons, where we have new and upcoming updates or some indication that something has been changed. Maybe I'm offline or online so there is another status that this user is online or offline. Actually there are like five or six different statuses. Now if you are using a messenger or something like that, you might have seen that the updates on the right side, that date and time that I messaged this person, at this time or whether he has viewed my message or not, if he has read my message or whether he's typing or not. These are, I think like five or six different status messages for any dashboard design. I'm going to show you how you can use a color scheme which can encounter all these problems, and also, you need to consider one more thing which is accessibility or proper contrast of your colors. We are going to dig in, so let's get started. This is a dashboard I designed in Adobe XD, and this is just a quick makeup. I actually copied someone else's design, so just to illustrate what actually I mean. You can see on the left side, we have very dark navigation where we have all the navigation items, different sections of our dashboard "inbox", "important". Then we have "channels" then there are few things inside the channels. They are four channels, UI design, usability, marketing, support, and you can also create a new channel. Then we have archived articles. If you look at this design, you can see that we have different hierarchy. On the left side we have different channels, like we have four channels. The first status you will see over here is, let's zoom in. The first one is this selected, so Selected state is that right now this channel has been selected, and on the right side, what you are viewing is alerted to this. You can see over here the title UI design, so the channel you have selected is UI design. Why I'm using this light bluish color because the background is very dark so we have a bit lighter shade of the same dark blue at the background to be used as a Selected Channel Update message. I want to show the user that this channel has been selected so there must be a clear way to show that so it is very important. Second update you can see over here is that I have four new messages in the marketing channel. For that, I have used a green color, so actually, this whole color scheme is based on blue and green. It is basically analogous color scheme where we have blue and green. They are very close to each other, so actually it is basically Cianish green, so it is a mix of green and blue actually. This is analogous color scheme, the color schemes that the colors that are closer to each other, they are going to work well together. I'm using the Cian greenish color and this blue color, and we have this dark shade of blue then we have very prominent blue over here, which is very sharp blue for icons, then this channel is actually a bit dull blue color, so you know the drill that this is actually the same technique, dull or dark contrast of dark and light, and pale, and sharp. This is how I have created this whole section. Now you can see every color has some purpose, so you can see over here, if we look at this section, you can see this new channel, sorry, this new channel it is a button, so actually it performs some actions. It's color is sharper than all these, so these are all white and this is whole blue along with this icon. Now let us come to the point where we have these two different colors, which is green and this red. I already told you that we need a lot of more colors and a dashboard design than in any web design or any other app design because we have to show a lot of statuses. Here we have, again green, it is a very sharp green color. I think it is closer to this one, but it is most specific to this section over here, which is that I am online or this user is online. Then we have this red, which is very common because we already have this patron built into our minds that this red is actually the update, so bell icon update. Let's come to this section over here. Here we need one darker shade of color over here on the text title, and then a little bit of dark gray color for the text. Now you can see I have dimmed out this time because it is not that much often importance right now. The most recent message is at the bottom, so you can say this timing, actually I have tried to reduce its opacity. Let me see if it is opacity. No, I'm not using opacity actually, so it is actually opacity. This is another trick I'm going to show you in another lesson right now. Just make sure that you get the colors and how I am applying them and how I'm using them. Darker shade, less darker for the text, darker for the title, less darker for the text. Again, you can see over here light background for this this type box, light, bluish background and very dull if I go to the border over here. Let's go to the border. You can see if you look at the colors over here, the fill color, which is in the middle, is actually, let me show you. Use saturation and brightest to 10 hue, 5 percent saturation and 99 percent brightness. But if you look at the border, it is almost the same hue but saturation is a bit high, and brightness is a bit low. It is just a bit of darker shade of the same "fill" I am using. You can see this effect is very subtle, but it is noticeable in when you are designing something like this UIs, or this Messenger, or chat box, or something like that. Similarly, the same effect I have applied on the send button and this text is a bit darker because we need a lot of good contrast with the background. Let's come to this point over here, which is our message over here. The most difficult part where I was unable to match different colors, I had to get this yellow color with a lot of struggle. It is basically a yellowish orange color and it is in the hue 51, 8, and 100. If you notice that this color text color is actually a brownish color, so it is not gray, it is a bit brownish color because brown, orange, and yellow, they are actually closer to each other because brown is actually the darker version of this orange and yellow is very light orange, whitish, pale color. This is how I made the combination between them. This is the icon over here. It is also dark brown. This text over here is also dark brown. On the left, I just put orange color and a border of orange color around it, so it acts like a separate thing over here. If someone wants to close it, they can tap on or click on this icon and remove it. Similarly, we have search here. This is at the top function over here. There are only two functions that can be done, whether you can type over here or search over here. This is how actually the whole color scheme is working. Sharp color on dark background, and dull whitish color, this is four channels you can see over here. Then we have this new channel very bright blue color for the action over here, and that is all. I tried to create another variation. You can see this is a bit lighter blue color and also these new color channel they are different. Also I tried different combination of green and blue over here, so here the send button is green rather than blue, so let's zoom out and let me show you both color schemes. Here we have them. Let's zoom in. You can see at a glance if you squeeze your eyes that which areas are very prominent. This Send button is very prominent when you look at it from far away. Also this error message or this information is looking very important over here. Then you can see the colors on both these updates, 0-4-0-4, they are looking very prominent. Once you zoom out your design, you will see what things are actually matter over here and which color scheme is looking great. I would vote for this left color scheme because you can see if you look at the new channel, it is very visible, very bright in this area over here on the left color scheme rather than the right one. Your assignment will be coming in the next section to create a dashboard or maybe I'm going to give you this one to color it for me, and this will be your assignment. I hope you have enjoyed this lesson that how actually we apply color scheme for dashboards and how different color schemes actually match with each other on these kind of dashboards. If you have any questions, do ask me. Let's move on to the next lesson. 23. Making Accessible Color Schemes: In this lesson, we are going to talk about Color Accessibility and this is very important topic from two perspectives. We're going to talk about color blindness, and we are going to talk about color contrast ratio. These are the two things that are going to matter when you're designing with colors and contrasting different colors with each other. The first thing is that we want the information to be easily seen, recognizable and easily read by the user. The contrast between the background and the foreground must be good, so any user, you can say a normal person, he or she can easily read that text. They can easily judge what is written or what this button does. Here, we have the color scheme which we previously designed in previous lessons, and this is a Monochromatic color scheme, different shades of blues, and I am actually mixing the darker shade with light shades and the light shades with darker shade. You can see all the different colors, the written text over here, the text over here which is written on these colors, or over these colors, it is basically from the same color scheme. The dark most color and the light most colors are used for the text, and I'm varying them on different backgrounds, and you can see we have different contrast ratios over here so right now we are talking about contrast ratio. A good contrast ratio is above three. Right now if you look at the left one, the first combination, which is a pale blue color, which is this one, and this blue, our main primary blue, it's actually failing, so, the contrast ratio is not good for text. On all others right side, you can see we have good contrast. We can use these combinations safely, but the first one is actually failing, so we need to fix that. Now, a little bit about what is actually the triple A and double A color contrast ratio standards. Triple A is basically for smaller text, so, it is very good contrast. If you have triple A contrast, like we have over here, 7.57 and 8.01. This is actually very good contrast level, and for smaller text, if you are designing a mobile app and you have very small message and 14 points, or maybe 12 points, very small text, you want it to have a good contrast ratio of triple A. If you are designing anything else like a very large button, and we have like 18 point text on it, then we can safely use double A standard too. This is the difference between these two. Also for logos and for the things that are not important. For example, if the button is disabled, if that functionality is not present on your screen or your dashboard, you need to consider that even if your contrast ratio fails for that, it doesn't matter, because you can always use three or two contrast ratio for that because that is disabled. User is not going to use that functionality. For anything else, any pres-sable button, any tappable item, any drop-down navigation or something like that, you need at least double A standard. These are different contrast ratios we are going to go in the next lesson about different tools I use and how actually I use different tools to create these contrast ratios and check for them. Then we are going to also talk about what is a different simple tool to check your color accessibility for color-blind people, which is the next topic. Here we have color blindness, which is, I think very common deuteranopia. The main problem with this is that they might not be able to distinguish between red and green. Whenever you are designing for color accessibility, you want accessible color scheme that anyone can see what is happening. Either you are going to accompany these colors with some symbols or icons, for example, error, if you have some error. You can show some exclamation mark with icon, some icon which is going to show the user that this is an error. Also, with the success, you can show the tick mark or check mark so the user can see that this is actually the success message. One more thing, if you look at these two colors, red and green, green is a bit dull or darker shade and red have more saturation, more contrast, more luminous, more light emitting from it. Try to differentiate between red and green in this way. One is going to be more dominant, more luminant, emitting more light, and one is going to be a bit dull. Because whenever they see this, they are going to see some pale, yellowish orange colors, both of them, and they are going not be able to distinguish what is happening. So either use icons with these or try to use different shades, maybe you can say saturation levels, one is going to be a bit dull, dark color, one is going to be a bright, red color, somethings like that. In the next lesson, I am going to show you how I use different tools, online tools to create accessible color scheme that is going to work for most of the users, and they will have no problem reading it all, judging what is happening. Let's move on to the next lesson and see how we can create accessible color schemes. 24. Tools For Color Scheme Accessibility: So the first tool we are going to discuss about color accessibility is contrast-ratio.com. I'm going to share all the links for these different websites or tools I use. What we do over here is we are going to paste our colors whenever we need to check the contrast ratio, we are going to check by pasting our colors over here. We are going to go to Photoshop, for example, I have this color. I'm going to copy its hexadecimal value and let's move to, again over here. Let's remove this and paste it over here. Right now with white color, it has a contrast ratio of 1.31, which is failing the standard so let's change that. We are going to use this color on top of it. I'm going to grab it's hexadecimal value, copy it. You can use that in Sketch or any software you are using right now, it is feasible for me to use Photoshop. We have the ratio of 7.57, and here is actually it is showing how it will look like, on this background. Similarly, we can swap colors to see both effects. You can see, this is looking great 7.57 is a triple A, which is going to work for small texts too. Similarly, I also love this tool which is, colorable.jxnblk.com and I don't know, anyhow. We are going to use this in the similar way, and here we are going to, I'm actually using the same color scheme, which we actually improved over here. Let me show you the next slide. You can see over here this color actually I improved, and what I did is I increased the brightness and also the saturation of this color, and actually I tried to use a darker shade of this one. I used darker shade of color. I think it was 25, something like this. Let's copy this and we are going to paste it over here, as our background, and we are going to use this color as our text color. Let's use this one. We have 4.7, so what I did is let me show you over here with these sliders. What I did is I actually wanted to make this text color a bit more darker. What I did is I increased a bit of saturation, and we are going to reduce the lightness to over here, 0.22 like this. It is actually decreasing the brightness so if you want, you can see whenever I am trying to decrease the brightness, it is actually having more contrast. If I want a lot of contrast like AAA, you can see I need to reduce the brightest, and this is actually going to be the value over here. You can also see that when I try to decrease the saturation, maybe I don't want very saturated color like this one. I want it to be over here somewhere like this. This is how you can play with it, you can fix the colors. If you want more contrast between them, you can play with saturation and lightness. You can see if I try to increase the lightness, it is AA. When I am going to go below three, it is going to fail, okay? This is another tool. Third tool, which I really love is I just happen to get it over here, contrast-grid.eightshapes.com. This tool is really great. Let me show you. What actually they are doing over here, is these are all the different colors for my color scheme. I have orange, I have dark blue, I have medium blue, I have dark grayish blue color for text. This is again for texts. These are few more light colors, light sheets and you can see on the left over here, rows and columns. What I'm doing over here is the first column and row is for F, which is white color. Then we have the next color which is going to be F0, F6, FC, so this is again a pale blueish color. You can see what it actually doing is actually, it is crossing both colors and testing all different text colors on top of different backgrounds. All these colors are tested on all these colors actually. Cross checking all these. You can see, for example, if you go over here in this block, this color is actually on this background over here, F0, F6, FC, so it is a good combination and it is showing 5.9 contrast issue. It means that if I try to mix 546067 with F0, F6, FC, they are going to go well, but not for smaller text. If I want to go for smaller text, you can see I need to consider this combination which is, 15303F with this F0, F6 FC. It means that we need to have some more contrast. This combination has AAA. This is failing, this is failing. DNP means fail. It's showing, does not pass. It means it does not pass the standard AA or AAA. Similarly, over here you can see this orange is almost failing on all the backgrounds. The only bigger it is going to pass is actually this one, this darker shade of blueish black. Also over here, which is blue color AAA, AAA, then again, this sharp blue AA. This is actually a whole grid combination of your accessible colors that these colors are actually going to work together. Here is the index, you just need to paste the color in each different row and with the comma, you can use the color name. If you want, for example, if I had this, you can see I have charcoal and all this. One more thing is you can also copy grid HTML, and CSS if you want to show it somewhere. Also you can increase the block size if you want to like this one. You can clearly see what text is actually working, and which one is not working. So AAA is anything above seven, AA is 4.5 plus, or sometimes AA18 which is for larger text, it is actually three plus. So if you see or hear, AA18 means that you can use this color scheme but with a large text. So it must be above 18 points, something like that. If you want to read about it, you can see here is actually, the WCAG20 standard for Minimum Contrast. They have a lot of text to read if you want to read it, go ahead. In the last, I'm going to talk about the tool I used for color blind or color impaired people that have difficulty judging what color it is. You can download this Color Oracle.org and download the app for their Windows, Mac, or Linux. Let me show you an example. So here I have this design. Now, I'm already running this app so you can go over here. I'm going to right-click, and I'm going to show this most common deuteranopia, this color impairment. I'm going to select this, and see how my colors are going to look like. Right now, you can see their view or their version of seeing all these colors. You can see if you look properly on this yellow and this red color, there are not so much difference, this orange or this red color. They need to have some separation. So this is a bit darker, this is a bit lighter. Try to make sure something like this happens. Similarly over here, they are only seeing most of the colors that are darker and lighter shades. They are unable to distinguish between these colors, so if I click over here, this is again the view. Let's try to change it to something else. Let's try some pink color over here. Let's use some white over here. Let's see how it looks like when I turn this on. The same, I think, the main point behind all this is that you need to have something distinguish between different color levels. One color is a bit darker, the other is a bit lighter. This is going to help them. Otherwise, they mostly see most of the colors they are going to mix together. For example, this mostly is red and orange and yellow, or green. This is going to be a lot of trouble for them. Let's select other disabilities like, protanopia, it's rare but it has some problems. You can see now this is almost similar to that, but this screen is looking very yellow to them. Let's select another one, which is tritanopia. This is different, and you can see they are actually seeing this orange color as pink color and red color is visible. All other colors are visible, but green have some problems. You can see it is showing as a blue color. So, this is all. Try to check your colors on a gray scale and you can see we have different levels. Try to see that your design must have different levels of gray scale. Gray scale means that something is more bright and light than the other one. One is dark, one is light, one is dark, one is light. This is actually going to work for these people. Second thing, let me show you another example. So here's another example of an app. You can see here we have different Bitcoins, like 22 percent increment or decrease. Let me show you what the problem is actually in this design. So if I go to this most common vision impairment, you can see this plus symbol and minus symbol is the only thing that is differentiating between these. So if you can look 1.5 downward arrow, this is going to help them that this actually is decreasing. In this case, they cannot tell with the glass that this is decreasing or increasing. If you look at this area, one is a bit dull, and one is a bit sharp color. Let me show you, this is a bit different. So when they look over here, you can see more bright yellow and this is dull. This is showing them clearly that this has some increment, some profit, and this has some loss over here. But over here, it is a bit different. If you look closely, you can see, let me show you. There is a difference of, you can say darkness and lightness in both these colors, red and green. Try to use that to differentiate. Also, try to accompany with different icons. We can use this down arrow and up arrow to show these people or these users that, this actually means this. Because, everything else is going down to information exposure. We are actually communicating with our designs. We are actually showing the user that this color means this. We are communicating by using colors, by alignment, by different icons. This is actually what a designer does. They communicate and show information in a visual manner, a better manner, and present it to the user so that he can or she can understand it. These are few problems which I wanted to show you regarding this impairment and the tools I am using. To check different contrast ratios and all that stuff. Try to create all these color schemes like this, and you will be in good hands. Make sure your colors have good contrast ratio and they don't fill the main contrast which I have seen a lot of designers that they don't know about this issue, and mostly they are creating a lot of dribble shorts or [inaudible] portfolio. They are creating mobile apps that actually have failed contrast ratios. So if you have any questions to ask me, I will see you in the next lesson. 25. Stark Plugin For Color Accessibility: Today I'm going to share with you a very nice plugin which you can use to check your color accessibility, color contrast ratios, and colorblindness. A lot of designers, I have seen that they don't know or they don't care much about color accessibility or the don't even bother to test their color backgrounds and foreground ratios that this color on this background, whether it should be a good contrasts, whether it will be visible or legible on different screen sizes or different screens. I'm going to show you a very nice plugin which is available for Adobe XD and Sketch apps. You can use them and let's see what that is. Here we have this, this is Stark and this is a great plug-in. You can use that for Adobe XD and for Sketch and it actually tests for different contrast ratios standards like AA, AAA. AAA is for small text and this one is for large text, 4.5. This is actually the sweet spot, AA your text must be at least past this standard. For very small text, you need to pass this one AAA. Also, it has colorblind simulations, so you can test color for colorblind people or users. There are a few more features coming up like color suggestions and seamless export. Let's see and test in Adobe XD, then I'm going to switch to my Sketch on my Mac and we are going to see that from there. Now, right now I am in Adobe XD and you can see if you go to this menu, I'm on right now on Windows, you can go to Plug-ins. You can click on Discover plugins, and you can search for Stark over here and it is already installed. If it's not installed, just click over here and it will be installed. Once it has been installed, you can see here I have two buttons, let me zoom in. This color is pretty visible for me on this background but if I select it, both of them and I go to Plug-ins and Stark and Check Contrast, you can see it is failing over here. The contrast ratio is almost 3:1, 3.34 which is very low for me. Now, let's test the second one. I'm going to select both of these and I'm again going to go to Plug-ins and Stark, Check Contrast, and now you can see it is passing almost normal text 4.5 ratio, which is good, for large texts it is passing both of them. I think this is pretty good color combinations, so if I am going to go with my buttons, I'm going to use these two colors rather than these two. Try to make sure that you are using colors that have good contrast ratios and that passes all the color standards. Let's test the other tool which it has. Let's select these and I'm going to test the colorblind simulation. Here we have colorblind simulation, let's keep it like this and I am going to use this one. I think this is the most popular, 4-5 percent people have this deuteronopia. What happened actually, so they can see this blue color. You can see this color is a bit different, but this color also is different, it's almost purple. Let's see other, tritanopia, this has turn to green. This is how you use it on Adobe XD. Now I'm going to switch to my Sketch tool and I'm going to show you the screen and how this plug-in works in Sketch. Now you can see I'm right now on my iMac, and this is my Sketch, and I have already downloaded and installed that plug-in Stark. So we are just going to go to Plug-ins and Stark and Show Stark. This is actually the screen we get. Let's see, we are going to use this iPhone 8. Let me just make it a bit bigger like this. Right now it is in this mode of colorblindness. It is simulating this one, deuteranopia and also you can test other one. You can also export this view so there are few more functionalities available on this one. If you want to test the color contrast ratios, you can see here we have color contrast. Let's select this one and check contrast, click over here, select two layers containing [inaudible]. We need two layers. What is happening? I'm going to select this one and this one, let's check the contrast. This is actually these two layers and you can see it is showing me that contrast ratio is 7.06, so it is passing all different contrast ratios. Right now as you can see these colors are not the same, which I showed you on my Adobe XD, these are a bit different colors. If I test the same for these two, let's take these two and check contrast. It is going to fail most of them. It is just good for large text, which is, I think actually more than 18 or 19 pixels, or 18 points, I guess. This is 3.34, I think it is very low, at least it should pass this one. This is how you use Stark plug-in on your Sketch, so that is all about using Stark plug-in in Sketch software. I hope you have learned something valuable in this video, see you soon, in the next video. 26. 3rd Project Color Scheme with Purpose: Here is another assignment and it is about creating a color scheme based on a color theme. Color theme is basically what the company does and how the company has used some keywords that are going to help you define what that company actually [inaudible] with their color scheme. Here is your assignment. SecureDot is an online security firm, build a professional and strong color scheme that reflects what they do. First thing is that they are security company, they are online. The keywords here are security, professional, and strong. Try to use picular.co or any other color scheme. What I want you to do is, you are going to submit this color scheme along with this screen. What are you waiting for? Start creating this assignment now. 27. Magic of Subtle Color Differences: In this lesson, we're going to talk about a very simple secret of UI design, which is subtle differences. Now I'm going to show you how you can manage your subtle differences, very light differences in your colors and shapes to create a great UI. Here as you can see I have this very simple message. I just created it in just 10 minutes. I was creating it just right now. Here as you can see, there are a few problems with this screen. One is that if you look at this area over here, this border, it is looking very ugly. What we are going to do is, you can see there is a very pale background, this filled color at the back, which is also this very bright and pale color from this almost same hue. What we are going to do is, we need this color, we're going to start with this color as the border. What I'm going to do is, I'm going to start with the same color it has for the background, for the border like this and then what we are going to do is we are going to reduce our brightness to 90 percent. If you want this effect, you can see very settled border and if you zoom out you can see you are not going to get it into your eyes. This is not going to hurt your eyes actually. Select this, let's make it more 80 percent. Now I think it is looking better at 80 percent, so I'm going to keep this. If you want, you can increase the saturation. Let's try 25 percent and let's make it 90 percent, something like this. This is looking good. I'm going to go with this color. Let's reduce the saturation a bit, 20 percent. Okay, so I'm going to add this color to my color scheme too, okay? This is the magic of subtle differences. I just created a nice look with differentiating, with a little bit of difference between the colors. Similarly, if you look at these texts, they are the same color, the same black. What I'm going to do is, I'm going to select this color. Sorry, this textual here. There are two tricks to it. One, you can use this opacity and go about 60 percent overhead, or like 70 percent, so 70 percent is looking good. This is a very simple trick. A lot of developers can use it, that they can reduce the opacity of the same color to 70 percent. Similarly, these two minutes ago, we don't want it to be that bright, so we are also going to reduce it to 50 percent, something like this, or maybe 60 percent. This is how actually the subtle differences magic actually works in our color schemes or in our text. This is actually a bit more improved version of the same. Okay, so if you want one more effect, you can add over here, you can add the border. What we can do over here is, we are going to start the same with the same color. We are going to decrease this brightness to 90 percent and saturation 80 percent. Let's make it 88 percent. Something like that. Okay, so this is interesting. Let's make it a bit more visible. I'm going to make it 85 percent, 82 percent. This is looking good. This is another way to increase your likability of your UI and don't want to throw it in the eyes of your users, okay? This is a very simple trick I wanted to show you guys. I have seen a lot of designers, they don't know this or have any idea about this. Whenever you are doing something like that, don't try to use the same color for everything. Try to reduce brightness, so adjust it to create great looking UIs. I hope you have enjoyed this lesson. If you have any questions to ask me, let's see you in the next lesson. 28. What Are Color Scales?: In the previous lessons, in the previous videos, you have seen me creating different shades of a single color. We use them mostly in dashboard or other UI design. We mostly need, I think, three or four, two tents and two shades, at least four or five different scale of that same color. Now, the topic is scale. I'm going to show you and share with you the online tools where you can generate. You can put just one color and create a lot of different colors that can go with that, along with different shades and tents. We are going to call it simply the scale, the color scale. Let's start with this website. This is a very old one. I have used it like maybe five, six years ago. I kept on using it. You just enter a color, for example, this one. It is going to show you where this color is. It is over here. Here we have all the light shades. If you go down, you can see it gets darker, darker, and darker. Whenever you are designing something, for example, some dashboard if you want to get all the different shades and different tents of the same color. For example, I want some lighter color for my background, or maybe something like that. I am going to move like four or five steps or six steps away, like maybe this one, I'm going to copy it and paste it and try this one along with this color. This is a very handy tool, 0to255.com. Then I'm going to move to some modern tools. This one is created by some guy I think Hihayk. This is one of the great tools I see online. Here we have this starting color, this is starting color. If you want to start from another color, let start from another color. Let's go with this one. Let's add some blue over here. I have given it this value. Whatever you do, you try to put some value over here, hexadecimal value or use these sliders if you want to. Let's start with this color. Let's move some red from here to make it more blue. This looks great. Anyhow. This is the starting point. Just paste your color over here. Let me show you what this actually is doing. It is actually using some angles and some different calculation to get other colors. These are mostly analogues colors from the color scheme to match with this blue. This middle one is actually your color, over here. It is using four steps on the left side, darker side and one, two, three, four, five, six on the lighter side. It is actually generating 10 colors. If you want to change some values, if I want maybe seven. Nine light shades. Not 70. I want seven. Let's add nine over here. Now, we have nine light shades over here. If I want maybe 10, you can see I have 10 different shades over here. Similarly, if I want more dark values, maybe I want six dark values. I'm going to add six over here. Now, this is the step actually. Fifty percent, if you want to change it. Let me just change it to 15 percent. You can see this is how it is changing. Similarly, if I go to this one, I put over here 20 percent, you can see it is actually making it light 20 percent percent every time. We don't need that because we need very nice bright color. I'm going to use 50 or maybe 65 percent, something like that. Maybe I want to increase it 85, let's use 85. This one's look great. Similarly for the darker one, I'm going to use 30 percent. No, 50 percent percent looks good. Here we have steps. Then we have the lightness and darkness. This is basically brightness control. Then we have the hue angle on your color wheel if you remember. I don't remember what color is over there. But what I'm going to do, it is actually variating your color scheme. Starting from this one, it is actually going minus seven degree into dark angles. It's just changing the color a little bit, the angle of your hue a little bit. Similarly on this side, it is changing the angle to plus 67 percent. If you want to reduce it, you can see now this is the purple color, which was very close to the blue shade on color wheels. If you keep on iterating, if you've want some color scheme over here, for example, you can see this is totally different color scheme. I have moved my angle to 189 percent, let's use 90 percent. Ninety percent is actually totally, you can say on the one step from over there. Ninety percent difference. Let's use 180. This is how you can use this light color hue angle to create different color schemes. Like you can see, this one is actually analogous, very close colors, green and blues. I really like it. I'm going to stay with this one. Darker colors, I like this minus seven degrees, so I'm not going to change it. Similarly, the last stop is saturation. If you want very saturated dark colors, if you remember, I told you that whenever you are going to make your darker color scheme, you are going to saturate it. More saturation and more darkness. Similarly for the light colors, I'm going to reduce their saturation. I'm going to use 10 percent over here. This is how my color scheme is actually working. If you want more saturation, you can see, you can try more saturation like this one for example. I want a very theme where I want very green look or very fresh look, so I'm going to increase the saturation over here. Let's use the brightness to 90 and saturation is 80 percent. This is how it is creating my whole color scheme. I really love it. It has six dark colors and 10 light colors. You can use just this one to create the whole color scheme. You don't need more colors. Maybe some graze. This is actually called a color scale. Next is this tool from lift design color box. This is also similar to this one, but here we have more control and I think this control looks better. On the right side, you can see it is showing me color palette along with the color contrast ratios. You can see 1.56, 2.23. Three is looking great. Then we have four contrasts, 4.06w, and so on and so forth. Here we can control the steps. For example, I want 15 steps over here, and this is my starting hue. For example, I want to start with some blue over here, and I want to end with some reddish purple over here, something like that. This is actually, you can see these are the steps and going up into different direction, which means the hue is actually changing. You can see 195, 197, 199. These are the hue values, I guess let me see. These are the hue values at the bottom and at the top these are actually the scale value 0,10, 20, 30. This is actually my scale steps. Here we have the curve. If you want to change it, you can change it like this EaseInOut. It is actually different using different combination of EaseIn method to be applied on this one for example, I use something like this. You can see on the right, it is generating the color scheme. If you want to grab the whole color scheme, you can use this full-page screen capture. You can capture this, or you can use this one, this tool, I really love it. This is getfireshort. Let me show you how it actually works. I'm going to capture the visible part or capture my selection. I'm going to select this area over here to get my whole color scheme. That is all. I'm going to save it as a color scheme. You might be wondering, how we can copy all this? Anyhow. Here, we have different curves, and then we have the saturation. You can see how much saturated your starting colors will be, how less saturated will be? At the end, we have a lot of situations, we can control it over here. Similarly, we have the curve, let's change the rate. This is against saturation. How much saturation we need? This one looks good. Then this is again for the saturation, I guess. It is for the saturation. This ones is looking great. Then we have the luminosity. Luminosity is how much light must be emitting from your colors. My start will be lighter colors, so more luminosity and will be have less darker colors. Dark, you can see less luminosity like that. Whatever hue settings you want, then again, we have this curve. I'm not sure lock colors. What is the lock color means? I think maybe from here, hexadecimal value. Maybe I want to lock this color. Let me see. This one is actually locking this color. Then you can share it and actually sharing by URL, RGB, JSON colors. If you are a programmer, I think you can use that hexadecimal JSON. You can also copy these hexadecimal values if you want and use them in your software or design software. This is actually the scale. We have steps 0,10, 20. This is actually also used by Google Material Design. If you'll remember it, then the last tool is this one. This is actually for data. If you want to present a lot of data or information or very big graphs where we have a lot of data. You can use this. These are different color modes on the left side, I normally use hue lightness, and you can pick up the color. For example, I want to pick some color over here starting and here I have the ending color light. Let's use this one. Here, you can add different steps if you want. For example, one, two, three, four, five, six, seven steps, let's add eight, nine, and 10. I have created the whole scale over here. You can also visualize it. If you click on visualized, you can see how this color is going to show the map of USA. This is how you can see. At the right bottom, it says US unemployment 2018. It is the yellow shade, the very bright shade is the high unemployment. You can see, if I hover on it, it is going to show me the values. If you are into information design, you can use some color picker like this one and you can copy all these and create your color scheme for your visualizations. That is all about scale and how you can generate scale using these four online tools, there might be others, but right now, I find these very interesting. I hope you have enjoyed this video. If you have any questions, do ask me. Let's move on to the next lesson. 29. 4th Project - Color Scheme with Scales: Now, the time is for another assignment and that is going to be a bit difficult one because I want you to create a color scheme that is going to fit all these different actions. You can see over here, this field is the dark-field, which is e-mail address, it is active right now. The second one, the password one, is empty and it is in the default state, is not filled, inactive state. Then we have Create Account button, which is more compelling or the main Call To Action button or CTA, which we call it on the screen, which has main focus of this screen. Then we have already have an account and login here, which is a secondary action. You are going to color fill this screen like this. I'm going to show you what I have done over here. You can see, so here is my color scheme for this securest and you can see over here, I have used different colors for different states. As you can see, our main primary color is this dark blue, royal blue color and then we have very light bluish, sky blue color for the login here. You're going to submit this color schemed version along with your grayscale version, and along with this color scheme. At least show me your color scheme and also the color scheme you are using and you can say, what are different functions you are assigning to each color, for example, this is our primary color, this is our secondary action. This is primary action, these are brand colors, this one is extra, then we have inactive text field color, which is the border around it, inactive text field. Then we have inactive input text, which is the password written inside it. This is for dark text. We have light text, dark text, active text field, the border around the active text field. Then we have this background. It is not white, it is very whitish color of 204 hue, which is, I think our brand blue color. Then we have the secondary color. I want you to show me your color scheme and what are the functionalities or functions each color has been assigned. What this color is doing, what this color is doing, and what this color is doing. That will be your assignment. I hope you will submit this soon. You can use any software or actually, Adobe Photoshop or Sketch. Let's get started. 30. 12 Always Design In Grey Scale: Today I'm going to show you the third secret of any color scheme design. Whenever you start your design, you are going to design some word frame, like you can see over here on the left. You can see, I have used different values or different shades of gray color, from dark to light to represent my word frame so you can see this is an active field. It has more dark border than this one. This is actually unfilled inactive field, text field. Similarly over here as you can see this text color, and this text color is same. This logo, it has very dark color, and also you can see I have separated this color O, of this dot with some gray. Just to show that this is going to be a different color. Similarly, you can see here I have shown that this button, this is the most important part, so it is highlighted on this screen. Similarly at the bottom you can see I have used login here, in all caps and it also has dark color. Already have an account. This text is light and the Login button, which is an action, it is dark. You can see just by one glance, you can look at this screen, and you can tell that these things are important, or highlighted, or their state is different from the other one, so these are the things you need to take care whenever you are starting any of your design, website or anything. The trick here is always, always and always start your design in gray scale. Never try to start designing something like that, and picking colors on random, and just keep on designing things randomly. Try to sketch out, try to word frame your app, or website, or whatever you are designing, and then pick up some color. For example, like over here, I have picked up this primary color, which is dark blue. Then these are actually two brand colors, and this green one is extra, it is going to help me sometimes. Then you can see all these colors they are actually the shades of the same color, which is this one. This color, and they have different shades. This one is using for texts. This one is again for text, dark texts, light text. This is going to be our background. This is not white, it has some tint mixed into it, this color I guess. Then I am using this color. This is for my secondary action. You can see over here primary colors, secondary color, so if you are thinking that you really need a very contrasting color for your secondary action, you are wrong. You can see here this blue is very light and very, you can say, very bright color rather than this dark color. It is totally opposite to this one, but it is not that contrasting like this one. This 'Create account' button, has more contrast, and it is more vibrant, and it is grabbing attention more than this login. Your next assignment will be to create something like this, and also show me your color scheme, how many shades you needed for completing all the screen, you can see over here, there are different colors used for this active field, this specified. This over here then this button. Another button which is secondary action, and this text is different. This text is a bit darker, this one is a bit light, so this is how you actually design something like that. Also the background have some color over here. These are on the left. You can see I have added the colors in my assets panel. This is [inaudible]. If you want to use sketch or any other app, that's okay. You can go ahead and use any tool. Figma or whatever you want. Just show me your screens and that is all. In the next lesson, you are going to create the assignment, but right now if you have any questions, do let me know, ask me in the discussion, or if you have any suggestions, let me know. I hope you have enjoyed this lesson and you will learn the secret of designing good interfaces or good color schemes. That is, always start your design with gray scale. See you soon in the next lesson. 31. Naming your Colors Properly: In this video I'm going to show you the tricks and tips on how to manage your colors. While you are managing your colors, the first thing is how you are going to name them. I'm right now in sketch. You can see over here, I'm going to share this file with you. You can see over here, I have like 20 different colors. Over here I have different shades of blues, different saturation, different lightness for the Grey. You can see I have like 10 different Grey and nine or 10 different Grey, then we have shades of green, oranges, reds, purple, and cyan color. This is actually going to help you build when you are designing some dashboard. How you are going to name your colors? First thing is that how many colors are, how many shade do you need. If you are not building a bigger system, I suggest that you at least build five different shades of the same color. If you have dark, darkest red, darker red then we have medium red, then we have this light red, then this is the lightest red. This is how you are going to name them. Darker, lighter, lightest, medium, something like that. This naming scheme can be used up to five colors. But if you have like, I have these Grey colors, like they are nine different colors. How am I going to name them? I'm going to use another technique which is called , I have seen a lot of designers and even I think Google Material Design is using it. We are going to name them; Grey 20, Grey zero,10, 20, 30, 40, 50, 60. Whenever you are moving up like Grey 60 or 70, or 80 or 100, they are going to be most darkest color. As you go down like zero, 10, 20, they are lighter shades. This is going to help your developers or whatever team you are working with, that it is easier to convey the colors you are using. Whenever you are trying to build something like that, I want you to name your colors like that. Grey 20, Grey zero, Grey 10, Grey 20, 30, 40, 50, 60, 70, 80, and 100. Or you can at least go to 90 to have like 10 different shades. I think 10 will be enough, more than enough. This is how you are going to name your colors. In the next lesson, I'm going to show you how you are going to actually save them or create a style guide or styles in Adobe sketch. Let's move on to the next lesson. 32. Using Style Generator Plugin In Sketch: In this video, I am going to talk about how you are going to generate sketch styles for your colors. For example, I have like 30 colors, I don't want to create a single style again and again, so I want to create all the styles. For that, you need a plugin called Sketch Styles Generator, go ahead and download it and install it by double-clicking it. Then we are going to go to Sketch. Let me go to ''Create New File'', ''New Art Board'', let's create any art board. Let's create this one. I'm going to pick a few rectangles over here. Here we have one rectangle. Let's start with some color over here like I have this blue color. Replicate it two, three, and four. I'm going to go with some other color, maybe like this. Let's add some gray over here, let's add some blueish cyan color, dark for the background maybe, I have something like that. I have right now four colors, so what I'm going to do is first, I'm going to rename them. You can use a plugin called ''Rename It''. Actually I haven't organized them, so let's organize them like this. Let's make it more lighter, so we're just going with the lightest color from all these. Something like this. Here we have rectangle one, two, three, four. Top one is the, at the top. Next I'm going to move this layer down. This one must be here, and this one is at the right position. Now I'm going to select all of them and I'm going to run another plugin to rename them, ''Rename Selected Layers'', and we are going to use ''Layer Name'' with some ''Number Sequence''. Let's rename them like this. This is blue slash blue one, two, three, four. We have something like this. We can also use assigning number, like blue one, two, three, four. Let's rename them. This is going to be four, this is the darkest, then we have blue three, two, one. This is one way to rename them. Now we are going to select all of them and we're going to go to ''Plug-in'' and we are going to use ''Style Generator'' over here, click over here, and all the styles have been generated. If we go over here, you can see inside blue, we're seeing blue one, two, three, four. This is how you are going to and you know create your styles and generate your styles, so you can reuse them in Sketch. This is how you are going to organize your colors. If you are using Zeplin or Third Party Tool to show it to your developers, then you are going to build your color scheme over there. That is all. I hope you have enjoyed this lesson and do try to download this plug-in Style Generator. Let me show you. You are also going to generate styles for your text colors. If I click over here, you can see this is something called styles, headings, black. I have something like this, button, white, blue, form, text form text, active-filled, inactive. You are going to create all these different styles and colors for your paragraphs tool. You can see over here this text over here, which is paragraph, it is different than the heading and it has different color. You are going to create all different styles, generate all different styles using this Style Generator, and you can use them in your designs later on. This is about re-usability and how you are going to manage your styles in Sketch. In the next video, I'm going to show you the same process you can do in Adobe XD. Let's move on to the next lesson. 33. Managing colors in Adobe XD: Now, right now, I am in Adobe XD and I'm going to show you how you are going to add your colors to your assets, which are your styles and colors and grater styles. What I actually do is if you have designed all your colors and applied your colors to your screen, you just going to select everything, Right-click. And add colors to assets. It is that simple in Adobe XD. Now you can go in this colors and you can arrange these. For example, this is the darkest color, so I'm going to move it up, then this one, then this one, and then we have this one, something like that. Then we have this gray, which is the darkest one from all these. Then we have this primary color at the top, let's move it at the top, then we have these two brand colors.Let's move this one up, and that is all. Also, I think there was a color for use for the background, which is this one; FAFD and something like that. We can add this color from here, right-click Add Assets, and it has been added over here. What I'm doing over here is I'm actually arranging them like that and you can also rename them, for example, this is my primary Blue, something like this, then you can use again the same technique, gray 60 and things like that, which I have told you in the last Lesson 350. This is how we are going to name them. You can also name them like that, for example, this is this color and we can add it to maybe background color, something like this. You can name them on based on their functionality, you can also name them like that, you can also name them for example, text color, dark text color, light text color, things like that. This is how you are going to manage your colors in Adobe XD. If you want to add your grexer styles along with the colors, you can right-click and add a grexer style to assets. This is going to add the color and the font size, everything over here. Similarly, for others, for example, this is your another style, you can add these silica so you can keep on adding this. This is how you are going to build your style guide assets and colors in grexer styles in Adobe XD. This is how you are going to manage your colors in Adobe XD, I hope you have enjoyed this lesson. You can also switch to create view. You can see over here this is nice, but it is not showing the naming borrow ahead. You can also search for color, for example, if I try to use a name, for example, primary, it is going to show me the color. I can also right-click and highlight it on the Canvas where it has been used on different canvases, so these are a lot of great features and I hope you have enjoyed this lesson. If you have any questions, do ask me. Let's move on to the next lesson. 34. Managing Colors In Photoshop: In this video I am going to talk about how you are going to organize and save your color palettes and colors in Photoshop, Adobe Photoshop. You can see on the right side I have swatches panel. If you don't see it, you can go to "Windows" and here you can click ''Swatches''. In the swatches panel you can see we have this menu on the right. If you click over here, we have different options, tiny thumbnails, small thumbnails, large thumbnail, small list. If you have named your colors properly like primary blue, dark primary, secondary active, link blue, something like that, you really need to switch to this view, small list. Or you can also switch to this large list, you can see I can easily find the colors. You can see, the bottom colors I haven't named them, so you can see it is difficult to touch them or use them. So first thing is always try to name your swatches. Second, is that if you have something like you can see over here, I already have a lot of colors in my color palette, and I want to start a new project, and now I want a totally separate color scheme. I don't want them to be added over here or on here. So what I'm going to do is, I'm going to go to my "Replace Swatches". Okay? So you can reset your swatches, you can load new color swatches, you can save swatches. You can replace swatches. So I have a file, so I'm going to first save them. Let me save them on the desktop. My current swatch, 2019. Okay. So I have saved my swatch and now what I'm going to do is I have a file. Let me show you where it is. So I have a file called empty swatches and I'm going to click on "replace swatches" and go to find that. I have just pasted it on my desktop "empty switches", and I'm going to load it. You are going to see what happens. All the colors have gone, so we have just one black color. Now what I'm going to do is I'm going to add my colors now. I just picked up this color, I'm going to over here, and color picker and going to add two swatches. So now I'm going to name a primary glue or maybe dash, I'm going to use dash, something like that. You can also add them to your current library. For example, if I click over here, I'm going to add it to my current library, and I can then use it in Adobe XD, Adobe Illustrator, Adobe Photoshop, CC Live Softwares that are using library. So right now I'm going to just add it over here. I'm going to pick the next one, and I'm going to again click on "Swatch". This is my, let's call it secondary yellow. Then I'm going to click over here and as to this is going to be my white background or something like that, background white. This is again another color, maybe medium or something like that. So let's keep it like Cyan. So here I am adding only four colors. You can also add more, for example, like dense and tones, different of this blue color over here, for example. Now I'm going to add it to like blue, ten, something like that. Then I am again going to go to this blue 20, something like that. Then I am going to go over this one, blue 30, something like this. So I think I have more than enough colors right now. So if you want to delete some color, you can just pick it up, grab it, and leave on that delete and it is going to be deleted. You can also right-click and go to preset manager and here you can move them around if you want to. For example, I want it to be over here, and then I want it to be over here like this. So I can move them around done, and you will see they have been arranged. So there are many things you can do with them. So let's move them to large list, and here we have all the colors listed properly. This is how you are going to use different color palettes, organize your colors in Adobe Photoshop. If you have any questions to ask me. Let's move on to the next lesson. Before that, I'm going to tell you that you can download this empty swatches file. I'm going to show you, I'm going to give it to you. You can just replace your swatches using that empty.aco or color swatch palette file, and your colors will be gone. So let's get back to my colors. So I want them to be my current swatch, so I'm going to load it like this in the small thumbnails. Okay. So that is all. If you have any questions to ask me, let's move on to the next lesson. 35. Browser Extensions To Find Colors: In this video, I'm going to share with you my top color picking and color scheme generating plugins or extensions you can add to your Chrome browser and your Firefox browser. Let's get started. First I'm going to go with some Chrome extensions because they are really nice and really great. Let me show you how actually they work. Here I have one of them. It is actually site palette. If I click on it, you can see I have stripes site right now. It is going to generate a very nice palette just like a style guide. Here I have all the colors. I have them in a very nice way. At the end you can see sketch template, Adobe's swatch, open at Google palette, open at Coolers. This is really great. I can download them. This is the, I think, best plugin I have seen. You can see here we have all the different download options. Then I'm going to move to the next one, which is Colorzilla, you can see over here. This is very old. I'm using it from a lot like I think two or three years from past three years. You just click over here and you start picking color from here. I'm not sure why it is not working. I need to go to this site actually. Here we have it. You can see now whenever I move over here, for example I want to pick this green color, I'm going to click over here. It is going to pick the hexadecimal value and also it is going to copy it. If I want to paste that color in Photoshop, Sketch or any other just I need to control or command V to paste this color. This one is Colorzilla. First one I showed you is Site Palette, this one. Then this one is Colorzilla. To the next one which is this one, Snatchr. It is going to again grab all the colors from this website. You can see over here, text colors. These are the background colors. It has two sections, text colors and background colors. You can see how they have used different shades of grayish blues over here in the text. It is also going to grab the typography styles. Camphor has been used over here mostly on the whole website. There's not an option to download these. I will say if you want to get this one, it's good that the colors have been separated into background and text colors but nothing much you can do. Then we have next one which is this Palettab. Let me show you. Here is this one, Palettab. It is also available for Firefox. It is available for Firefox and Chrome. Whenever you open up a new tab, you can see here we have a nice Palette or nice color scheme. Every time you do this, you are going to get a new color scheme. Whenever I open up a new tab, few of my students, they keep on asking me, what was that extension you are using, which were creating this color schemes along with these Google fonts. This is actually color palette. Sorry, Palettab, this one. You can download it in solid. It is also available for Firefox. Only two extensions are available for Firefox and Chrome both and which is Palettab and Colorzilla. These are very, you can say very old extensions. Then the last one I'm going to show you is this one, CSS Peeper. Let me show you what it can do. Let's close this one. Here we have it. Here is the CSS Peeper. If you click over here, you can see it is going to show you the site name, then the fonts used over here over CSS file load time. If you move to these colors over here, you can see it has listed all the different shades that has been used on this color. Even the opacity, along with the opacity. For example, this one has been used 0 percent opacity, 8 percent opacity and all that. You can just copy from here single color but you cannot download the whole palette. If you go to this one assets, it shows all the assets, different PNGs and SVG, I guess. This is the tab we are looking for so you can copy any color you like. Maybe you like just one color and you want to start your color scheme with this one. These are five different plugins you can download and you can install in your Chrome browser and Firefox. Let me show you. This is the Palettab in Firefox, you can see it is loading the same. Then we have this Colorzilla over here. You can also install Colorzilla. There is one more I'm going to show you which is Style Guide Generator. It doesn't work with all of the websites, but if you click over here, you can see it is generating style guide, similar to Site Palette I guess. I'm not sure you can download anything or any. You cannot download any Swatch or color Palette to open up in Photoshop or Sketch or Adobe XD or whatever. This is another tool, Style Guide Generator, Palettab and Colorzilla. We have few extensions in Firefox that are good for color scheme generation but on the other hand, in Chrome, we have a lot of good options over here. Right now today's winner for me is the Site Palette. This is one of the best tools I think. You can see it can download the sketch template and Photoshop to open up in your favorite design tool. Also, this one is very handy. Sometimes I just need to pick one color so I use this one. I just choose Colorzilla and pick that color and start from there. These are all the different extensions and plugins I use. If you have any more recommendation or you use something else, try to show me in the discussion of commands. I hope you have enjoyed this video. Let's move on. See you soon in the next video. 36. Online Tools For Color Schemes I Use: Most of the new designers have tendency to get into trouble that, "Which color should I pick? Or "From where should I start my color scheme?" For example, if you are building your own startup or something like that, you might be wondering, "Where should I get my colors?" I'm going to share with you few of my tools, just five of them, which you can use. You can use them to generate colors from an image or picture. If you want to have a beach picture or something like that, you can pick up colors from there too. So if you know what your theme is, for example, my theme is food or agriculture or something like that. I can take a picture of some environment and I can start building my color scheme. Similarly, I am going to show you two tools which I normally explore. Color schemes are already built and we can also start from there. Let's dig in. The first tool I'm going to show you is color.adobe.com and you are going to click on this "explore". Once you click on this explore, you will see a lot of cool color schemes you want to start with. There are, I think, maybe, more than thousands of color schemes over here. Here we have most popular, most used random all time this week, something like that. You can see here we have at the left, this color scheme, this is very light color scheme for maybe ladies' perfume or maybe something like that. Mostly it is related to freshness and a bit of feminine touch so, you can see this one. If you want to download it, you can click on download. You can also save it. You can open it or edit it if you want to. You can see over here blue and oranges and greens. This is another one. This is more related to nature, I guess. Then we have different shades of blues I really love it. Then we have this blue and orange, which are purplish blue, which are my favorite colors. Then we have this one, very simple green and orange and yellow. These are all the different color schemes. What you want to do over here is, for example, I want something maybe in blue and orange, I'm going to type over here blue and orange and you will see there will be a lot of different color schemes that I've been using blue and oranges. This one I really like, I think we can easily use this one over here. Let's start with over here, let's try to edit it. Here we have this one. You can see it has been opened over here. Similarly, if we go back, let's see if we can save it or download it. Let's click on "Download". We need to sign in into our Adopt CC. Anyhow, let's click on "Save". You can also create your own ID. You can create your ID over here. You can download also download Adobe XD, which is a free software. If I want to click on the info, you can see this is the whole screen. I might try to grab the screenshot over here. For that I use this tool Jing. If you don't have Jing, I think you should download it. It's a free tool and I really love how it actually works. Sometimes it is very handy for me. You can also use this file short screen capture plug-in over here in Firefox and Google Chrome. So what I do is I normally grab something like that and I am going to start with this color scheme. This will be my main colors, this blue and this orange. This is a darker blue, this is white, and this is a bit of pale color over here. Let's close this. This is how I'm going to start with Adobe Color CC. Now let's see another site where I normally go to explore different color schemes and different color palettes. Here is the Explorer, try to click on it and you will see tons of different color schemes. Over here you can see there are many. You can also filter them. For example, I want blue and yellow. Let's see what are the color schemes over here. It's taking some time. This actually takes a lot of time. I think their search engine is slow, but I have typed now blue and orange and you can see over here orange and blue. All the themes that have been tagged with orange and blue, they are here. I think their search is a bit slow and sluggish. I will not do something like this. It is going to take a lot of time over here. So I can go "Next", "Next". Here I have few good orange and blues. Blue, orange, green. Blue, orange, green. Blue, orange, lime, and lot of other schemes. You can also create and save your own color schemes. If you go to my profile, I'm going to show you my account and profile where I have created, I think like 10 or 15 different color schemes and color palettes. I'm going to share these with you so, don't worry, you can download them and use them in any of your app or software. You can see here I have healthy diet. This is all green, brown and yellows. Blue, green, yellow, you can see over here, very popular color scheme. This is orange-coconut, and this is also browns and oranges and yellows. Then we have gun-metal, green, blue, and few more green and blue, different versions. Red, blue, green. This is safe. You can use that in any app. Similarly, few more. These are few different shades of blues, blue and cyan. I have used it in few of my courses. You can see few more project organic. This is actually analogue color scheme, greens and blues, project V2. These are 14 color schemes. I'm going to share these with you too. Don't worry you can easily download them. The next thing is that, if you have some image or a color scheme, for example, I want to build my color scheme based on some image. I'm going to upload this image. This is from canva.com. Let's select some image. You can select any image if you want to. Let's select this image off my studio. I think it is going to take some time, so let's select some image from my pictures. This looks good. I'm going to click this image over here and let's see what color scheme it is going to show me. Here I have a picture of an interior of bedroom and you can see these are different colors. It has shown me light blue, dark slate gray, light slate gray, and these few colors. Similarly, this is another tool you can also use. Just grab an image, for example, I'm going to grab this one. I also like this one because it shows a lot of different varieties of colors. You can see over here. Actually, I think there is something over here which I am not able to understand. Is it complimentary colors or triad? Whatever it is, I think it is trying to generate some color palette based on these harmonies of different color triangles, triad complimentary. This is actually very helpful. There are a lot of different colors to choose from. Then another tool, which is this one, palettgenerator.com. Let's upload an image over here. Here we have it. You can see it is showing me very less colors, all the browns. Let's take it to ten dominant colors. Here is actually a few more colors. I like it in a way because it shows all the different shades, strengths, and tones of the colors like over here. Also, this is the background. Use colors over on the backgrounds over here. Still there are a few colors missing. Again, one more, colormind.io. You can also upload an image over here. Lets start with this one. It is going to build some color scheme based on that image. Now you can also click on "Generate", and it is going to show you a few more shades. You can see a nice color scheme. It is actually creating the shades from the same image we just uploaded. These are a few tools you can use. These two Adobe Color CC and coolers.io, Explore the color palettes, generate color palettes from the images. These are four tools, and that is all. If you have any questions to ask me, let's move on to the next lesson. 37. Finding Color Inspirations Online: In this video, I'm going to show you few more tools I use and a few more things you need to keep in mind like, what are the default colors for iOS or Android or Windows operating system. So whenever you are designing for an iPhone app or an Android Material Design app, you need to know what are their system colors. I'm going to show you also some of the Instagram color scheme generation accounts where those people they try to create a lot of cool color scheme so you can pick up from there. Let's get started. This is the first site, I think I used it many times. I think this should be one of the best tools to find the theme of your business. For example, I want a serious, something. Let's see what are the colors there are, this colors are mostly orange brown, you can see blues, so this is how I am going to start with my team of my color schemes. Second, I'm going to show you what are the default colors of Windows, iOS, and Android. This is an article from icons8.com, and you can see they have shown all the different puller's. This is Windows 10 design palette. You can get it from here, the official style guide. Next here we have iOS 10 or iPhone operating system default values. You can see here we have red. These are different values for the colors that has been used, that has been used in iPhones or iOS operating system. Then we have this Android Material design, you can see they have a lot of scaled color pallets. We have different scales of colors. 50-900. [inaudible] of the same color and they have many colors you can pick from there. This is a great article I'm going to share with you all the links, so you don't need to worry about it. Here we have again, these are the colors from actually the human interface guidelines from Apple.com. Then now I'm going to show you some of the inspirational websites. Here I have this from like two or three years back, I have saved it, thedaycolor.com. You can see there are tons of great, very modern, very unique color schemes. You can see we have over here and here we have very dark bluish purple and orange on it. I'm not sure you can see. This is another one, you can use it in any interface design, blue, red, green, and yellow. They have all the colors, status colors, everything. You can start with something like this. Here we have some Instagram followers and Instagram you can say, I am not sure what is accounts. I'm falling this awesome color. And this guy or girl or whoever he is or she is, the share. A lot of great, You can see color schemes over here. I think they have tons of color schemes and you can, if you want to start or here, for example, this purple and green looks great. Also I have here purplish and cyan color, very nice color scheme. There are tons of great color schemes here. We have again, orange and blue, very popular, I love it. Then the other one is Colors Cafe, colors.cafe, this is another one and it also has a lot of color schemes, you can see. Also it shows how actually he or she is adding more colors to it. I really like it how it shows on different backgrounds, dark and light. Here we have light and dark. This is colors.cafe. You can start with any color scheme like this one this looks great. This is a great color scheme, orange and blue. You can see the secret behind these is, you can see if you see the whole five colors, that luminance is, it's not very different from each other. All the colors are, have the same light emitting, so they are like medium dull colors, very decent colors. You can call them decent colors. They are not very sharp, they are not very fun or they are not very, you can say, I'm giving you a vibe. If you look at over here, let me show you what I am designing. You can see these two colors they are very sharp, they have a lot of contrast, this is actually very dark, purplish blue. Let me show you. Actually, this is my color scheme which I am building right now. Another color scheme, this experimentation in Adobe Illustrator, you can do it in anywhere. You can see here I have, this is my actual primary color and this one. I am using either this one dark. I'm extending it with you can see some pale colors, some light shades of yellow, some blues. This is, I think my another color which I am trying to add into my color scheme, but right now, I am just going to go with these two. This is dark purplish blue and orangish yellow or gold color. This is right now how I'm working. I have used different online tools to generate this so you cannot say that I, you just use, I use pick the first two colors myself and then I extended it using some online tools like you were seeing colors over here, I got it from coolers.co Also few colors over here they are also from coolers.co. These sucrose, I think I picked up from somewhere else. Anyhow, this is how I actually build my color scheme. These are all the inspirations you can also look for around you in the nature, in the different advertisements, on the billboards, everything. I hope you have enjoyed this lesson. If you have any questions, let's discuss and move on to the next lesson. 38. Online tool for Color Gradients: From the previous few years, gradients has been used a lot in your web design, mobile app designs from different designers, UI designers and web designers, they were in a lot of trend and still are, so I'm going to share with you five or six different resources and websites you can use to get a linear gradients and other gradients that you can use them in your design. The first I'm going to show you is web gradients.com, and the cool thing about it is you can download sketch file and PST file. There're are I think 180 different gradients and you can use them on buttons or anything you want. I really love this because you can also copy the CSS. If you are a Web developer, you can copy CSS. You can download sketch or PST, you can also open this sketch file in Adobe XD if you want to. This is, I think, the heaven for web gradients. If you click over here on the sketch and you need to download it, it is going to show you this screen, WebGradients sketch, gumroad.com, and most of my students, I'm not sure why they have problems downloading it. It says $0. If you want to donate it, you can donate it. Otherwise you just press zero over here and click on, I Want This, and you can download it. Similarly, we have another website, grabient.com and you can also download sketch, you can see at the top over here there are, I think these are like 20 or 30 different gradients. Then we have this gradients.cssgears.com. Here we have again different gradients. These are not too great, but the cool thing about it is if you click on any of this, you can click on this HTML5, Adobe XD or sketch icon to download the file instantly. I have tried to download this one. So if you click over here, it is going to download XD file for this gradient. One more tool which I have used in the past is to blend two colors gracefully. So what I normally do is select one color from here, for example, this one and this one. If I click blend, you can see how it is blended nicely. Similarly, if you can change a few settings over here, you can also copy the code, the design or website code. Actually, it's CSS code for background gradients. This is another website, colinkeany.com blend tool. Here is another one, uigradients.com. I don't like it too much, but I think it is great that you can download and get the JPEG file and also the CSS from here. If you are a web developer, you can do that. Here we have different gradients and if you go over here, you can show few more. For example, I want something over here. So not too useful, but I think you can get something from here, some inspiration. Then we have gradients.io. There are again gradients of different colors and they are just gradients, you cannot download them or anything. Again, we have one more tool which is colorspark and is going to generate different colors depending on just variating different things like that. You can also copy it's CSS. Also there is a color tool for this one so if you want, you can switch to the color tool and it is going to generate some. This color looks nice, so if I need some quick colors, I can do that. Similarly, it also has a sketch plugin. You can see over here colors sparks sketch plugin. You can download it and you can get colors into with Control Shift and C or Control Shift C to get them in your designs instantly, something like that. These are all the different tools I wanted to show you. I really love this one, web gradients. Do check out this one, download it, and try to build your assets of colors and use colors from there. I hope you have enjoyed this video. Do start a discussion or give me some comments on it if you have any questions do ask me. See you soon in another video. 39. Tricks to create gradients NEW Lesson: In this video, I'm going to share with you some of the tricks to create cool looking gradients and how you can use them in your user interface design. Now, on the right you can see over here, I'm not going to create anything over here. This will be another tutorial where I will show you how to create this in figma. But right now we are more interested in this. There are a lot of different techniques. As you can see, I have written over here dark and light. Now the first technique I use is, let me open up everything. First technique I use is that, I am going to go in to this linear gradient. You can see over here, first thing is angle, so it is in this direction. Angle really matters. This gradient, if you apply on this circular graph, it might not work because the angle is different. First trick is that, you have to select one color that is going to be the same hue 205. It will be a lighter version. Then we have another one which will be a bit darker. Now what I try to do is, I try to change a little bit of hue, you can see over here, from 205 I jumped to 216. This is another trick I have taught you in my color scheme course. Now, you can see you can change the angle over here, if you want to just drag like this and wherever you think is comfortable, you can drop it like this. I will keep the light over here in this direction and dark over here. First trick is dark and light. We have very dark shade on one side and very light color on the other side and they are almost the same hue. They are the same color. Now, if you go to this one, so this one is actually called analogous colors. Analogues color means that, we are going to use colors that are very close to each other on the color wheel. Now let me show you the color wheel. Here we have the color wheel. If we go to analogous, you can see these are the colors in analogous. Whenever you move one of them, they are going to move together. We have green, cyan's, blue's then we have green's and blue's, orange's and green's, then we have yellowish amber with orange, then we have pink and purple, red and pink. These are all analogous colors. They are very close to each other on the color wheel. This is the second trick. What I need is, I use this blue color and green color. You can see this analogues color scheme. We have blue's and we have green's. On one side I use this blue color. Second, on the other side I used green color. This is called the second trick for creating analogous colors. Here we have another gradient, and it is made by using analogous colors. Next one is using complementary colors. Blue is opposite to this yellowish or purplish color. I used complementary colors on color wheel. Let me show you what are actually complimentary colors. Let me see if I have the color wheel. Here we have the complimentary. If I try to select one color over here, let's select this one. If I go to complimentary, it is going to go into orange. If I try to select this color, move this color over here, you can see it is moving inside this yellow or orange section over here. They are totally opposite to each other on the color wheel. This is another trick. If you are creating a gradient, you can use complimentary colors to. The next one is, I am using three colors. These are again complementary colors, but actually I am inspired by a scene, for example, sunset with a lot of dark clouds. You can pick up those colors from an image too, so this is a very simple trick. A lot of designers, they don't know this, that is why I saved it by the name of sunset cloud colors. If I go over here, you can see it has three colors over here. This is the orange or sun behind the clouds. This is the dark cloud over here, and this is the other cloud color which is a bit lighter blue. Or you as you can see it says that it is the lightening inside the cloud. This is up to you. This is actually that gradient over here, one, two, three. You can move the stops wherever you want it to be. You can move this over here if you want to. Move this over here, whatever color you want more. I like it this way, so this is another trick. You can create gradients based on color schemes from different images, from different scenes, nature scenes. They are great for creating these colors and gradients. Now that last trick is that, we are going to use the same color of monochromatic color. Let me show you. We have this orange over here, which is 18 over here. Then this is 43 hue. But it is actually, if we move over here, you can see I tried to move the color in this area over here, which is a bit grayish white. What I did is, let me show you. Let's move it over here. Let's keep it 18. I am using the same color on both stops. These are called basically stops. A 100 percent stop, 0 percent stops. From here, 0 to a 100 percent. I can move it like this. If I want to move this one, I can use that. This is another trick. You can use single color with two stops. One will be a bit on the gray side, maybe like this grayish white. The other is over here. Similarly, you can use it like this, and the other one is going to be in this darker section over here. This is going to be gray plus color or white plus color, or this is actually monochromatic color scheme. A single color. Here, we actually use the single color, but we shifted the hue a little bit. Let me show you, if you don't remember. This is 205, but the darker one had 216. But here we are using the same hue for the both stops. This lighter one has 18 and the saturation practice is different. Let's move it over here like this. You can see this is going to end this lesson, if I want to show you how you can use them in user interface. These are two examples. You can see this is light to dark with some variation like this one. Then we have this one which has the sunset or nature-inspired color scheme, where we have two opposite colors. Actually three colors are being used over here, purple, blue, and orange. This is how you actually apply your gradients in color scheme and in your UIs, in your websites. Some of the gradients, they are going to work great on backgrounds. Some of them are going to work on [inaudible] , because like this one, this is a very dark and light. This is not going to work on whole background because we have to put some text and other things over the background. Keep in mind that whenever you use something like this, you have to use a lighter background. Gradients, for example, like this one, this can be used as a background. But these dark's and very light have a lot of contrast. Where you have a lot of contrast in the gradient, stops, you cannot use them as background. Let's move on over here and let me share with you some of the gradients online. You can see here is a gradient maker from coolors.co. You can choose colors, whatever color you want to use. You can also copy the CSS code from here. Similarly, there we have another one, gradient.com. This is another website, it has a lot of gradients. Similarly, we have cssgradient.io. We have a lot of different websites over here, uiGradients, Grabient, Gradient Hunt, Mesh Gradients and WebGradients. It is taking some time to load anyhow. Here are few more generators, CSS color generators, gradient generators, where you can pick up the color and you can generate the gradient. This is the gradient. You can see this is looking really nice on a background. If I try to change the color over here to this one, this is looking really great, it is dull but it is looking really great. This is how you create different gradients and these are different techniques you can use. I hope you have enjoyed this lesson. If you have any questions, you can always ask me. Let's move on to the next lesson. 40. Luminace of Colors in Color Scheme NEW Lesson: In this video, I'm going to talk about a very important topic related to color schemes which is color luminance. Now, color luminance is actually part of two things. One factor is hue, what hue you have selected. Some of the hues like you can see over here yellow, the is greens, this light blue, this yanish blue, the colors over here, these naturally have more luminance, they have more vibrance in them. Whenever you are selecting colors, there are two factors you have to consider. One is what is the saturation of that color because saturation is actually going to amplify the luminance. Luminance is just you can see that some colors are very sharp, very vibrant, you can say they are emitting more light from them rather than others. This is what actually luminance is and luminance has two things to consider, one is saturation, high saturation means high luminance. Also if you have selected some hue from around here from this yellow or green area or this section over here, you can see on the left we have luminance 94, 83, 80 percent, 82 percent, 87 percent. This is naturally occurring luminance similarly, this color over here, it has 70 percent, this pinkish purple color it is very vibrant. I'm going to show you a very simple technique you have to adjust some of the colors. Like if your color scheme has this yellow or green or this color or this color, you have to adjust your saturation and brightness to make them equally well or work with your other colors. Let me show you one example. Now, you can see on the left I have selected top, this blue, green, yellow, this purple and this red. Now you can see this yellow is very vibrant, this green is also from the same section, over here you can see 83 percent, this is the luminance factors. Here again, red and then we have this purple. This again have more vibration. Now, you can see all these colors I have selected have 100 percent saturation and 100 percent brightness. You can see naturally green and yellow and this pink, they're looking more vibrant to me. Now, a lot of designers I have seen that they make mistakes when they select their colors. Now, what you have to do whenever you are using these plain colors, you are using a lot of saturation. You have to balance it out, you have to reduce the luminance factor. You have to work with that you can see at the bottom I have adjusted these colors. For example, this one, if I show you, you can see this, brightness is 88 percent, saturation is 87. If I want to tone it down, I can reduce the saturation over here and I can increase the brightness. Here I like it better over here, 91 percent. Now you can see this color if we zoom in is a lot better than looking at this one. You cannot keep looking at this color for longer duration of times. Similarly for this green you have to adjust it to your color scheme, you have to tone it down. You have to tone down its saturation, its brightness, its vibrance, its luminance. Now you can see all these colors over here, this yellow, this blue, this green, they are almost closer to each other in the luminance factor. You can see they look like they belong to each other rather than you can see over here, some are a bit less luminant or less vibrant. Some are very vibrant, they are not going to work well together. Also for humans, they cannot keep their eyes on these colors that have a very high saturation or have a very high luminance. You have to manually adjust your colors, like you can see over here, this blue, I can go over here. I have to tone it down a bit. I will move around over here, I will move away from this area because this is very vibrant, this is high saturation. This is also high saturation and darkness, so I will keep my, you can see color over here, selection over here. Similarly, this red you can see I have tone it down and from 100 percent I have reduced it's saturation to 75 percent and brightness is 85 percent. Now you can see it is easier to look at even if you want to move it somewhere over here like this, so this looks better. Similarly this color, this is still very sharp and vibrant to me so I'm going to tone it down a little bit over here. The gray, I will try to make some gray over here, a little bit dark. Now they have adjusted to my eye. Now, whenever you're creating a color scheme, don't try to use colors like these. Make sure that their luminance, their saturation is tone down, it is easier for the human eyes to look at. I have seen some of my students that they try to use these kind of colors, this is the very big mistake a lot of beginner designer or nervous designers they make. So keep in mind that you have to adjust the saturation and also if you are in these hues like this yellow and this greens or this one or this one, they are naturally more vibrant. They are naturally more luminant. They are going to emit more light. Yellow is very closer to white, so it has the most luminous factor like you can see, 94 percent so it is just six percent below white color. I hope you have got the concept of luminance now and how to use that in your color schemes. Now, if you have any questions or you didn't understand anything, you can always ask me. Till then, we will meet in another lesson Take care and bye. 41. Whats Next?: Now, thanks a lot for being with me along with this whole duration of time and learning together with me. I hope you have learned something useful. If you are unable to understand something or have some questions, you can always reach out to me via this platform. You can always reach out to me via my website learnuxid.com. You can contact me, you can email me. You can join me on social networks and ask me questions or anything, any questions you have regarding user experience design, user interface design or freelancing in general. Till then we are going to see you inside another course. Do check out my other classes and courses about design, about typography, layout design, color schemes and all that different stuff. Try to leave honest review, write some comments about whatever you have learned inside this course. Till then see you soon inside another class or course. Till then, take care and bye.