Create Amazing Color Schemes for Your UI/UX Design Projects

1. Introduction: Why is it so difficult to work with colors? If you are a UI UX designer, you are well aware of the importance of color. You know that sometimes creating the right color palette becomes a daunting task. But why? Because you need to know how to create a great color combination and how to apply it to your design. If you have no idea how to do that and you're struggling with creating amazing color schemes. Don't worry, you are in the right place. Hi, I'm Irish. I had and I am a UI UX designer. I also teach UI and UX Design at the University of Economics and Human Sciences in Warsaw. In this course, you and I are going to walk through all the details about colors. We will start with the most basic fundamentals of color and then move on to advanced topics like color harmonies, color psychology, and so much more. If you're one of those people who think creating a gray color palette requires talent and artistic skills. It's probably time to change your mindset because color is all about science. Yes, you heard it right? When you learn the science behind colors, you can easily come up with your own harmonious color palettes in no time. In addition to creating color palettes, you will also learn how to apply colors to your design no matter if it's a website or an application. Moreover, we will talk about the importance of color accessibility in UI UX design. And you will learn how to create beautiful and accessible color palettes through simple exercises. Last but not least, I'll share with you some personal tips and tricks for working with colors that accelerate your design process dramatically. This course is designed to give you the theoretical and practical skill sets required to choose and apply colors properly. It also helps you become a more confident and better designer just by practicing different techniques. So if you are ready to master color and create amazing color schemes, I see you in class. 2. Structure of the course: Hey everyone. In this video, we're going to talk about the structure of this course. This course is divided into two different parts, the theoretical and a practical parts. In the theoretical part, you will learn all the fundamentals of color, such as color theory, color psychology, color harmonies, and so much more in the practical parts, you will practice how to apply the knowledge you've gained in the theoretical part to real-world projects, we will create different color palettes and apply them to a website and a mobile application. This way, you will truly understand the process of creating and applying color palettes to user interfaces. So, see you in the next video. 3. The importance of colors in UI/UX design: When we talk about design, no matter if it's UI, UX design, graphic design, or even interior design, colors play a wider role in any of them. Undoubtedly, colors are one of the most important aspects of UI UX design. Without colors, It's almost impossible to give our design characters and feelings. No matter how good your composition is, if you don't use colors appropriately, I guarantee that your design one stand out when you design a project, whether it's a website or a mobile application, it's essential to convey the correct message and feelings to the end-user by choosing proper colors. But why is culture important in UI UX design, the shorthand series, visual first impression matters. Are you convinced? If not, let me elaborate more on that. When users launch a mobile application or a website, it takes them about 50 milliseconds to decide whether they want to stay in or not. Their decisions depend on different factors. And one of these factors is color usage. So can you see how important it is to use proper colors in your design? Choosing gray colors looks complex at first glance, but trust me, when you learn the fundamentals of colors and the science behind that, I assure you that you can create amazing color schemes for your projects in no time. In the following videos, you will learn about the basics of colors for UI UX design. So see you then. 4. Color Modes: When we want to use colors, there are different color modes that we can choose from, such as CMYK, RGB, gray scale, etc. But the most dominant ones are CMYK and RGB. Color modes can impact how images are presented to the users. Let me break them down for you. Cmyk stands for cyan, magenta, yellow, and black. It's most frequently used for color printing. Rgb stands for red, green, and blue. It's best for digital work because these colors are the primary colors used in computer screens, mobile screens, etc. So if you are a graphic designer who wants to design artwork for print, you should use CMYK. And if you are a UI UX designer who wants to design for digital screens, you should use RGB. Let me quickly show you how RGB differs from CMYK. Take a look at this photo. The color mode of this image is RGB. But look what happens if I convert it to CMYK. Did you see that? What's the reason behind this difference? Here is the chromaticity diagram. And this is the range of colors that our eyes could process and recognize. This is the range of colors we can achieve in RGB mode. And this is the range of colors we can achieve in CMYK mode. As you can see, the RGB range or gametes is much larger than the CMYK range. That's why the RGB mode colors look more vibrant than the colors on the CMYK mode. I hope now you have a better understanding of different color modes. See you in the next video. 5. The color ingredients: We can break down every color into three core ingredients. Hue, saturation, and value. Hue is basically the origin of the color we see like red, blue, or purple, or any other colors. The second property of a color is saturation, and it's the intensity of a hue. Take green for instance, increase the saturation and the intensity increases. And the contrary, if we decrease that saturation, intensity decreases, the last attribute of a color is value. It's basically the brightness of a color. Now we can break down the value into two different terms, teamed and shade. A tint is a brighter version of a hue, and we can create one if we mix the heel with white. On the other hand, a shade is a darker version of a hue. And as you may guess, we can create one by adding black to our view. We can also create a tone of our color by adding gray to it. In future videos, you will learn how to create different tints and shades of a color for your projects. 6. Master the color wheel: Have you ever wondered how some UI designers create the perfect color palettes for their projects. They don't just use their artistic skills for this matter. They use science and it's called color theory. To learn this science, you should understand what a color wheel is and how you can use it. This is a color wheel. And just like what you learned in school, It's made of primary, secondary, and tertiary colors. The primary colors are red, blue, and yellow. If we mix these colors together, they make the secondary colors and your green, orange, and purple. Finally, when we mix the secondary and primary colors, they make the tertiary colors yellow, orange, red, orange, red, violet, blue violet, blue green, and yellow green. These make up the color wheel invented by Sir Isaac Newton, and it simplifies how we can work with different colors. The color wheel can be divided into two main groups based on the color, temperature, cool, and warm colors. But how can we use the color wheel to come up with amazing color palettes for our projects. Well, we can use some basic formulas known as color harmonies to pick different colors from the color wheel harmoniously. We will talk about color harmonies in future videos. 7. Different types of colors: As I mentioned in the previous video, we have two groups of colors, cool and warm colors. But how should we know which group is more suitable for our UI design project? Each group of colors has some characteristics that help us decide whether it's a good choice or not. E.g. cool colors represent water, snow, sky, and they are called soothing and refreshed. On the other hand, warm colors represent heat, sunlight, and friendliness. They are energetic, exciting, and cozy in general, depending on the brand characteristics, we can decide which color group is suitable for our project. For instance, if their brand offers exciting and fun activities, you can go with the warm colors. Conversely, you can use cool colors if the brand is all about trust, safeness, professionalism, etc. So the colors we use should reflect the brand's personality. In addition to these two groups, we have another group of colors called neutral colors, white, black, brown, and gray. Neutral colors don't appear in the color wheel. We usually use them for backgrounds because they complement and highlight other colors pretty well in our design. But using a gray or white color as the background doesn't always look interesting anesthetic to the user xyz, then what can we do to make our design look even better? We can add a hue and a lethal saturation to the neutral colors. Thanks to this technique, the neutral colors look more interesting to the users lines. 8. Color Harmonies: Now that you learned about the color wheel and color in general, it's time to learn how to use the color wheel to create professional-looking color schemes. There are some basic formulas based on color harmony that can help us choose harmonious colors easily. Let's start with the easiest formula, which is called monochromatic. It uses only one color or hue. Just choose a color on the color wheel and create variations using the saturation and value. What I like about monochromatic color schemes is the fact that they are guaranteed to work well together. Next color formula is complimentary. It takes two colors from opposite sides of the color wheel, such as blue and orange, or yellow and purple. It's a great color scheme when you want to use high contrast in colors in your design, a split complementary color scheme takes the colors on either side of the complement. It gives you different colors to work with while keeping the same level of contrast. And analogous color scheme takes colors that are next to each other on the color wheel, like yellows and greens, or blues and purples. A triadic color scheme uses three colors that are evenly spaced. They form a triangle on the color wheel. These color combinations are usually vibrant, so make sure to use them wisely in your projects that a triadic color scheme takes two sets of complimentary colors and forms a rectangle on the color wheel. These colors work great when you let one color act as the main color and the others as an accent, you can create various teams, shades and tones within each color palette. If you are a little bit overwhelmed, don't worry, when you start applying these methods, you will gain confidence and you can easily recognize whether some colors work together or not. 9. Color Contrast: Color contrast is the difference in light between the foreground and background. Does it sound weird? Let me show you an example. Here is a sharp background, and if we add an element with a saturated color on top of it, we will get this terrible piece of art. And I wish I could pretend that I have never seen such an awful design. Fortunately, we could fix that. You could often get a better contrast ratio just by modifying the tones, teens, or saturation of your colors. A contrast ratio is just the value assigned to the difference in light between foreground and background. The higher the ratio, the easier it gets to read the content on the screen. Here are a few tips that could take your design quality from good to great. Tip number one, never use pure black and pure white and vice-versa. It causes digital eyes train and Hertz user's eyes. Instead, you can use a very dark gray on a very light gray and vice-versa. Tip number two, don't use a bright color. On a bright color. It doesn't let your elements stand out. Instead, you can use a bright color on a dark shade tip number three, always check your colors on both light and dark backgrounds. Sometimes you may need to adjust them to get a good contrast ratio on dark backgrounds. And last but not least, tip number four, always validate your colors by checking the contrast ratio. Believe me, there are beautiful looking user interface designs on Dribbble and be hands that failed the contrast ratio test. You will learn how to check the contrast ratio later in this course. 10. Real-world examples of harmonious color schemes: Now that you've learned how the color combinations work, Let's see some examples of each color harmony to see how you can apply them to your design. Monochromatic color scheme. As you can see, this website uses a monochromatic color scheme. Why? Because it only uses one single color here, but are actually we have many colors here. Why are you saying that it uses only one single color? At first glance, it may seem that there are many colors here. However, we have one single color and different shades, tones, and tints of that color. The primary color is this blue, and they use a dark shade of that color for these large tidal. And also the links at the top and for the sign-up button, as you can see, they use the primary color and a light tint of that color. Okay, So basically the hue is the same, but the value and saturation are different. Alright, let's take a look at another example. This website called Orbit also uses a monochromatic color scheme. Here they also use only one color and they perfectly apply these colors too. They're designed to create a great visual hierarchy. Complimentary color scheme are right. Here is a popular website booking and as you can see, it uses a complimentary color scheme. Why? Because here we have blue and orange. These two colors are placed on the opposite sides of the color wheel. They also use a neutral color for the background. And this is the reason that the orange and the blue colors stand out here. So it's very important to choose your background color wisely, there are some other colors, such as green or red here, but these are semantic colors and we will talk about them later. Let's take a look at this mobile application. It's also very popular company, and as you can see, it uses the same combination here, blue and orange. It's a very popular color combination that you can see in interior design, in graphic design and UI UX design, split complimentary color scheme. This website uses a split complementary color scheme. And as you can see, it's energetic and fun. And the reason is these are high contrast in colors. Usually we use them in illustrations. Now let's take a look at this website. Here I also used a split complementary color scheme, and as you can see, I used it for the patterns on the right side, not for the rest of elements on the left side. So it's very important to know which colors are suitable for rich content. Analogous color scheme. This website uses an analogous color scheme. And as you can see, the designer perfectly apply these colors to the illustration and just use a white color for the foreground content. Therefore, we have a very high contrast ratio here. This website also uses an analogous color scheme. As you can see, they use the main color as the background, and they use two other colors that are placed on the right and left sides of the color on the color wheel. And they use them for the CTA or call to action as you can see, and also for the tidal, these are the accent colors and they should get the most attention. Triadic color scheme. This website uses a triadic color scheme, and as you notice, these colors are exciting and fun. This is also another example of triadic color scheme. As you can see here, the designer used some desaturated colors to let the contents and information like these texts and these images pop on those backgrounds. And the result is great to triadic color scheme. Here is an example of tetrads color scheme used in user interface design, as you can see here, most of colors are used for the illustration. Illustration here has many colors like green, orange, red, pink, dark purple, etc. So it's not actually a good idea to use this color scheme for the main elements of your project like text, buttons, etc. So unless you are an experienced designer and know what you're doing, I wouldn't suggest using these colors scheme in UI UX design. This website is another example of a triadic color scheme. Here again, we have an illustration and it's obvious that the designer didn't use the whole color palette for the content. 11. Introduction to Color Psychology: Knowing how to pair colors is crucial for any designer. However, it's not enough for creating a meaningful design. Let's look into the meaning of individual colors. Nevertheless, any color can convey a positive or negative feeling to the users. So you wanna make sure you use the right colors to communicate with users properly. Each color can have positive and negative feelings. So it's important to use them in the right place to avoid any misunderstanding. Read, rev implicates excitement, love, power, and energy. It also could convey danger, error, and aggression. So ensure to clarify the intense with a short description alongside the color yellow. Yellow represents creativity, happiness, optimism, and friendliness. That's why McDonalds uses it as its brand color. Orange. Orange could provide the users with a sense of warmth. It's in winding and show's success and confidence. Green. Green is a dominant color in nature that can evoke powerful emotions. It represents health, freshness, and growth. If you want to design a project for an eco-friendly product, that's probably the best color you could use. Blue. Blue signifies trust, calmness, and peace. For some people, it's a sign of sadness and depression. You may have recognized that most technology and corporate websites use blue to deliver a sense of trust and respect. Some hospitals also use blue on their website. By far, blue is the most preferred color by all users. This is why you see many mobile applications and websites out there using blue as their dominant color. Violet. While it is a color that symbolizes royalty and wealth. Since the wind, the die was scarce in the past, it was reserved for royalty. It's also the favorite color of many female users, and it provides a sense of creativity. Pink, pink is a color of compassion and positivity. While pink has been used for feminine products for years, it can be gender neutral as well, but makes sure to think twice when you want to use pink for a woodworking shop website. Brown. Just like green. Brown, is associated with nature, even though it can provide a sense of coziness. It can also be dull and dirty. Made sure to check different brown shades before applying them to your design. Because a light brown can look clean and a dark one can look dirty. Black. Black implies elegance, luxury and sophistication. Make sure to use it properly as it might provide a sense of sorrow and sadness as well. Although it's commonly used for text, you could use it for the background as long as you put vibrant colors in the foreground. White. We see white in almost any design. And that's because it symbolizes cleanliness and simplicity. If you want to design a minimalistic webpage or a mobile application, made sure to use white a lot. You may be familiar with the term whitespace. And it means leaving some space empty that the user doesn't feel overwhelmed. Not to mention it lets other colors pop in your design as well. From now on, I want you to think about the meaning of colors you use in your projects that you could upgrade your design from good, too awesome. 12. Gender differences in color preference: When designing an app or a website, it's essential to know who your target audiences. Why? Because based on the users demographics, you can decide which colors work best for the project and potentially increase the conversion rate over the past years, different research projects have shown that men and women prefer different colors, just because we know the colors, meaning it doesn't necessarily mean that we should use them all. Let's compare the most preferred colors by men and women side-by-side. As you can see, blue is the most popular color for both men and women. Now you understand why so many websites and applications use blue as their dominant color. Purple is mostly liked by women, while both men and women like red and green. Now let's compare the most disliked colors by men and women. As you can see, brown and orange are the least favorite colors for both men and women. So next time you want to create a color palette, you could first do a little bit of research to find out who your target audience really is. And based on what you found, you could pick your colors easily. 13. Required colors for UI design: No matter what kind of UI design project you work on, you will need the following colors to work with. One, primary and secondary colors. Primary color is the dominant color that's used most frequently in your UI. Usually, you should use the brand's color as the primary color. Consider this image as an example, Qatar Airways uses its pair Polish brand color as their primary color. Optionally, you can create a set of secondary colors to make your design more interesting, keep in mind that you should use secondary colors if and only if they are required for your design to pop. Suppose you want to design a menu with different options in order to distinguish between the selected option and on selected options, you can use a secondary color to axe and colors accent color is used to emphasize actions and highlight information such as texts, buttons, or call to action, slider, links, progress bar, etc. Once you pick your primary color, you can use the color harmonies we talked about to create the acts and color. I'll show you how to create a color palette step-by-step in the next video, consider the lift landing page. It uses purple as the axon color and as you can see, it has been used for the call to action and leans, three semantic colors. They are used for warning error, success and information. Use yellow for warning, red for error, green for success, and blue for information. These colors are suggested based on the color psychology. You are free to use different shades, tones, and tints of these colors. Make sure not to use these semantic colors interchangeably because they may convey the wrong message to the user. Neutral colors. White, black, or gray schemes is colors are mostly used for text and background. They let all other colors pop in your design, almost all color palettes require neutral colors to create a high color contrast ratio between the background and foreground. As you can see, this website uses a light neutral color for the background. And last but not least, number five, chars and data visualization colors, just like secondary colors, having these colors are also optional depending on the type of your project. If you need to have charts, heat maps, or Treemap in your UI, consider creating a set of ten to 20 colors in a particular order. You could create such colors using the following guidelines. You can create a categorical color scheme made of multiple colors that contrast to each other in a certain order. It's good for line charts, bar charts, et cetera. Since these are contrasting colors, use this color scheme when you need to present data distinctively. The other type of color scheme you can create is sequential. It's a gradual transition of colors from light to dark and vice versa. It's suitable for Treemap and heatmap. The last type of color scheme you can create is diverging. Diverging colors are useful when you have negative and positive values to present. Don't use these colors for categorical scales. 14. How to create a color palette for your project?: Now that you have gained all the required knowledge about color, let's put them into practice and create a color palette step-by-step. Are you ready? Let's get started. No matter what software you're using, change the color model to HSB or use Figma. So let me show you how it works. First, I head over to the field section, and from this drop-down menu, I choose HSB. As you can see, we have three different values here, H for hue, S for saturation, and B for brightness. So when we want to increase the intensity of our color, we should increase the saturation here. If you want to create a shade, we should decrease the brightness to add black to our base color. Step one, choose your base color. It's the primary color of your UI. You can pick the brand's color for it. If there is any step to apply the color to shape on your Canvas, it could be a circle or a rectangle. Step three, duplicate the shape five times to get six identical shapes. These are your swatches. Step four, choose the swatches near the base color and modify only the saturation or brightness to get to supportive dark shades of your color. Don't change the hue. These colors are used for different sets of actionable elements like buttons or links, e.g. when we design a button, we want to create all the states of the button like default, active, inactive, etc. Step five, now choose to neutral colors by adding gray and white to your color. Step six. Finally, create a dark tone of your color by adding more gray to your color. We are done, as you can see, just by using one single base color, you can design a complete interface. I have a question for you, what kind of color harmony indeed, we use to create these beautiful palette? If your answer is monochromatic, you are absolutely right. We use one color and created variations by adding tints, shades, and tones to our color palette. Now let's create an analogous color scheme. I'm going to use the color wheel as my reference. Let's pick purple as our base color. Now I'm going to move the hue slider to the left and right slightly to choose three more colors. Keep in mind that in order to create variations for your color scheme, you don't need major hue changes. You just need to slightly modify the hue and create variations by adjusting saturation and brightness. In this case, I'm going to choose a tint of this pink color as my accent color. Now that our primary and accent colors are ready, it's time to add to neutral colors by adding gray to our main color. Now let's see how this palette looks in an interface. It looks amazing, doesn't it? Depending on the type of project, you can add semantic colors to your color palette. Semantic colors are used for warning, error, success and information. As I mentioned in the previous video, you should use yellow for warning, read for error, green for success, and blue for showing information. A quick note here, having these colors is a must if you want to design a dashboard. Because on dashboards, we usually present important data and it's essential to use semantic colors to convey the purpose and meaning of all data to the users. Clearly. 15. How to choose your base color?: In this video, we're going to talk about the process of picking a base color for your color palettes. The base color is the dominant color in your project. To choose the base color, check the brand colors first. If you want to design a website or a mobile application for KFC, what would be the best base color for your color palettes? Yes, you're right. Red. Why? Because the brands costumers are familiar with the brand's color and can connect with your design. Incidentally, if you need to choose the brand's primary color, first, list the characteristics of the brand and think about what color connects to the idea behind the brand in accordance with the color psychology, it's essential to use colors that communicate with users. Let's suppose you want to choose a primary color for a company that offers organic products. In that case, green could be a good option because it feels natural and fresh. When you decide which color is suitable for the brand, you can play with that colors, attributes such as saturation, brightness, and value. Most of the time you choose a color and you say that it looks cool. However, when you try to combine that color with other colors, it may not look as good as you expected. So make sure to check your primary color against other colors to see if that's the right choice for your project. We've been talking about the accessibility of colors later in this course. 16. How to choose an accent color?: Axon colors are used for links, call to actions, progress bar, etc. They are usually bright and saturated. You can create an accent color by choosing the base or primary color and using different color harmonies like monochromatic, analogous or complimentary. If you're still unsure how to choose a great accent color, let me show you my process. Choose your primary color and increase or decrease the hue by 30 to 40 points. Now increase the brightness by five to ten points while your accent color is ready. This formula works with any color. Can you see how easy it is to create an accent color now? 17. How to choose background colors?: No matter how beautiful and why brands your accent colors are, if you don't have a good background color, they don't get enough attention. So it's crucial to choose your background color wisely, when it comes to background, you are not limited to use just light colors. Sometimes we can use the primary color for the background, as long as it's not too wide brand to make the users leave your website or app. We can also select your primary color and create a very light tint by decreasing the saturation and increasing the brightness. As you can see, I use this technique for this interface. For instance, you can set the saturation value 2-8 points and set the brightness value 95-100 points. Neutral colors are guaranteed to work best for backgrounds. 18. Semantic colors in UI design: As I mentioned before, semantic colors are used for status and feedback, like warning, error, success, and information. Although you should use yellow, red, green, and blue as your semantic colors, you are not limited to just one color. The best practice is that you create different shades and tints of these colors to be able to apply them flexibly. Once your four colors are ready, you can use monochromatic color harmony to create variants. That gives you enough flexibility for applying these colors to your design. Let's suppose you want to design a warning. If you use only one color, it would look like this. Now let's take a step further and add a shade of yellow to our semantic colors. Now the result looks much better. The same technique could be applied to all other semantic colors. 19. What is a color scale?: What's the color scale? Do you remember the three attributes of color? Yes, I'm talking about hue, saturation and value. A color scale is a gradual transition of a particular color from light to dark or vice-versa. So what's an attribute of color is changing in a color scale. You're right, value. Many artists and designers believe that value is the most important attribute of color. But why? Because you don't need color to design a beautiful and accessible project. All you need is a gray scale that you could use to create a great visual hierarchy using contrasting colors. As a designer, you should understand that if you don't get the values right, the rest of your colors want to look right? When it comes to color, accessibility values play an important role. Let's take a look at the material design color palettes in case you don't know, material design is a design language developed by Google. And it gives you a set of guidelines to enhance your design process. Here are a few colors scales created by material design. These colors are chosen to work together harmoniously. As you can see, each color corresponds with a number 50-900. Higher values represent darker colors, and lower values represent lighter ones. Having different values of a color helps us meet the accessibility standards. What do I mean by accessibility? Let's take these purple for instance. As you can see, the text color used on some variance is white and on others is black. It means that you should use a light text color on some colors and on others. You should use a dark text color in order for the text to be legible, we will explore color accessibility later in this course. 20. What is Grayscale?: Once Grayscale, Grayscale is simply made of different shades of grey, many artists and designers start their design using a gray scale. What why? The reason is, when you work with just different shades of gray, you can focus on other important things like spacing, sizes, visual hierarchy, the weight of your elements, and more. You can just concentrate on how your elements like buttons, text, sliders, or cars, should be laid out. When you use the grayscale color mode, you can easily notice whether you have enough contrast between your elements are not. E.g. this interface has a great visual hierarchy. As you can see, the most important information is darker than the least important information. Now I want you to focus on the priority column. Can you see that the higher the priority level is, the darker the color gets? Let's analyze it further. Here we have three priority levels, high, medium, and low. Now let's switch to the grayscale mode. As you can see, the highest priority has the darkest shade here. And this is why we don't usually use yellow for the delete button in an interface. Now, take a look at this card. The colors are harmonious and you're ready to add the car to your design except you aren't. Let's switch to the grayscale color mode for a second. Can you see the problem? As you can see, we don't have a good visual hierarchy here, making our redesign less accessible. How can we fix that? Well, I would use a lighter color for the description and the cancel button. Because, why? Because of the importance of visual hierarchy are most important elements, which are the title and the Confirm button should get the most attention. Therefore, they cancel button and the description should have a lighter tints of our colors. Now let's compare it with the grayscale mode. Obviously, it looks much better now in terms of both accessibility and visual hierarchy. If you want to have an efficient design process, make sure to start with gray scale and then apply colors to your design. 21. How to apply a color palette to your design?: Now that you've learned how to choose your colors based on color harmonies and color psychology, it's actually time to apply them to your design. But wait, can you apply colors to your elements randomly? Of course you can't, unless you want your design to look like this. It's hurtful, isn't it? Imagine you're cooking a portion of delicious and beautiful food for lunch. You have all the ingredients ready at your disposal. And you just need to know how much of each ingredient should be added to your pen. If you use the ingredients disproportionately, you may end up with a salty meal or a tasteless me. If that's not your intent, you need to have a recipe, but do we have a recipe for applying colors as well? Fortunately, yes, we do. There is a well-known rule called 603010 that's taken from interior design. Let's see how it works. Based on this rule, you need to use 60 per cent of your dominant or primary color, 30% of your secondary color, and ten per cent of your axon color. First, let's check this interior design. As you can see, the primary color is used for 60 per cent of the environment. The secondary color is used for 30% of the environment, and the axon color is used for ten per cent of the environment. Now it's time to give it a try. This an interface designed in grayscale mode. Let's start using only three colors. Fairs, a primary, a secondary, and an accent color. I'm going to use the primary color for our background, the secondary color for the text and these cards, and the accent color for the CTA, which are these buttons, and also for these bars in the bar chart, can you see how balanced this design is? Now we could even rearrange our color proportions. Let's replace the primary color with our secondary color and see how it turns out it still looks good, doesn't it? But don't we normally have more colors in our color palette? Yes, we do. We can still apply this rule even if we have different shades of our primary color or more secondary and acts and colors, we just need to keep them in the same ratio. Let's consider these color palettes. We might want to use this light neutral color and this blue primary color mostly in our design, then both of them should take 60% of our ratio. These two colors are now going to be our secondary colors. So they take 30% of our ratio. And last but not least, these two acts and colors should take ten per cent of our ratio. Now let's see how we could apply them to our interface. We could start with our hero section. We pick one of the colors from our primary ratio, which takes 60 per cent of our design in total, and we use it as the hero sections background. The other primary color is also used as the other part of our background. Now for the content, we could use our secondary colors. For the CTA buttons, we need to use a color that draws the user's attention. So we should use our accent colors for this purpose. I'm going to use yellow for the CTA buttons and orange for the slider button and Indicator. Remember that you should always check your colors against each other to see whether there is a good contrast ratio between them or not. One accent color may look amazing on dark backgrounds, while the other could be only legible on light backgrounds. This is basically how you can allocate different colors to different elements of your design. One of the things you can do to make sure that your color ratio works well is to create a variance for different parts of your design and compare them with each other in terms of contents, legibility, and accessibility. 22. How to name your colors appropriately?: Naming conventions, one of the most important topics when it comes to creating design systems. As a sole designer, you may consider naming colors as the least important factor that you can think of when you work on a project, it's understandable, but let me give you an example to understand the importance of naming conventions truly, let's suppose you're working on a project with a small color palette that includes four to ten colors. These are your colors. How do you name them? Well, most of you may name them blue, blue, light green, and yellow. And it's totally fine if you're working on a small project as a solid liner. Now let's imagine that you work on a large scale project with more colors to work with, and you should collaborate with other designers. Can you use the same approach here? Of course not, But why? When you name colors in a design system, the main goal is to make the colors role as vivid as possible. So why do you think blue slash slash two is a logical name? It makes no sense to other collaborators unless you want to go and explain your naming conventions to all other designers, developers, and marketers in your team, you should use an approach that works for everyone without the need to explain the logic behind it. Let's suppose you have a primary color and three shades of this color for different states of your elements, like default, active, press, et cetera. What's the best way to name these colors? First, start with the usage of this color. In this case, it's primary. Then use a hyphen or a forward slash and write the variations like active, inactive, default, etc. This way, we could describe colors without even mentioning their names. This is called a functional naming convention. So no matter who uses our design system, whether that person is a colorblind designer or a new member of your team, he or she can easily understand how those colors should be used in the project. This approach is clear, scalable, and universal. Of course, there are different naming conventions, but this is the one that works well for small, medium, and large scale projects. 23. How to create great gradients?: Now that you know how to create a great color palette for your projects, it's time to talk about gradients. What's a gradient? A gradient is a gradual transition from one color to another color. Although using gradients in your design is optional, it adds character and personality to your design. That's why most designers nowadays use gradients in their design. We have basically four different types of gradients, linear, radial, angular, and diamond. But the most popular one is the linear gradient. Now let me show you how you can create great gradients for your projects. First, open up coolers.co. Now click on the More menu at the top and click on the create a gradient button. Here we could create our gradient. As you can see, we have different colors here. If I hover my mouse on top of these slider and click somewhere, I can add a new color to this slider. If I want to remove a color, I can click on this remove button just like that. Now that we have two different colors, let me tell you how you can come up with great gradients, because obviously not all colors look great when we blend them together, let me select my first color and I'm gonna change it to blue, okay, e.g. this blue. Now I'm going to show you a bad example. Let me select the second color and change it to e.g. orange. Just like that. As you can see, this gradient doesn't look very good because we don't have a smooth transition here, although we are using your color harmony, the result is not good. Remember some color harmonies are only good for solid colors, not gradients. But how can we make it better? Here is my technique. Recommend that you should use that too, because it's so simple and it's going to make your life much, much easier. First, select your first color, copy the hex color code, and paste it for the second color. Okay, so here we have two identical colors. Now, using the color picker, I'm going to move the slider to the right and to the left in order to pick analogous colors, just like that. Now can you see how amazing and smooth these color transition is? Now let's try another example. I'm going to move the hue slider to the left side a little bit. Can you see how beautiful it is? You can also modify the brightness of your colors if you wish. It's totally up to you. This technique always works. So in order to create great gradients, you need to remember only one rule. And that's using the analogous color harmony. If you want to come up with random gradients, you can easily click on this random button and coolers creates random gradients for you. Just like that. The other thing you can do is use monochromatic color harmony. So just by using one color and different shades and tints of that color, you can come up with great gradients. Just like that. 24. What is color accessibility?: When it comes to UI UX design, accessibility matters a lot. After all, designers are there to solve problems, not to make them. So it's important to design in a way that everyone, regardless of their physical, auditory, or visual disabilities could be able to use the product color accessibility lets people with vision impairment use the product we designed just like everyone else. Do you remember the example about semantic colors? This is all about color accessibility. Here we have three profile images. A status indicator at the top right corner, green means the user is online. Blue indicates that the user is offline, and purple means that the user is busy. But let's see how people with monochromatic vision CDS design. As you can see, the colors are difficult to distinguish from one another. That's why choosing the right of value for each color matters a lot. Now let's modify these colors to make this design more accessible. Let's use semantic colors for these indicators. Now, it's so much better. Can you see why accessibility is important? Now, people suffering from monochromatic vision can not distinguish Hughes. They can only see different shades of gray. This is why I already mentioned that the value of colors is more important than other attributes of color. We can create a good contrast between our shades by just changing the value of a color that even people with monochromatic vision could recognize our elements hierarchy. Of course, there are many color vision deficiencies, but the point I'm trying to make is that not everyone perceives the colors the way we do. Let's consider this design and see how different people with color vision deficiencies can process these colors. Monochromatic vision or complete colorblindness. As I mentioned before, people with monochromatic vision can only see different gray shades, proton opium, colorblindness. People with these color vision deficiency perceive red colors as darker colors than normal, and usually red becomes a dark green. So if you choose red as your foreground color and black as your background color, it would be too dark for them to read the text. Blue cone, monochrome messy, or VCM for short. People with BCM can see the red and green colors properly. While they can perceive blue, there are other color vision deficiencies as well. But the important thing is that we as designers, should make sure to choose our colors in a way that improves the functionality of the products we design. So always put the user in the center of your design. 25. Validate your color palette based on contrast ratio: One of the factors that we should always check regarding color accessibility is the contrast ratio according to Web Content Accessibility Guidelines, or WCAG for short. There are two different levels of contrast ratio. Double a for minimum contrast or AAA for enhanced contrast, the WA level requires a minimum contrast ratio of 4.5 to one for normal text and 3-to-1 for large or bold text. On the other hand, the triple a level requires a minimum contrast ratio of seven to one for normal text and 4.5 to one for large or bold text. But wait, how can we actually measure the contrast ratio of our colors? Well, we can use online contrast checkers for this matter. There is a website called coolers for both creating color palettes and checking the contrast ratio. Let's give it a try and see how it works. Go to coolers.co slash contrast checker. Here we should specify a background color. Here, we should specify the text color we are going to use on our background. As you can see, I've got a pretty high number and it's fantastic. It also indicates that these color combination works well for both small and large text. Now let's take another pair of colors. Can you see that it's still readable, but it works only for large text. So always check the contrast ratio of your colors to see how accessible they are. 26. Useful tools for accessibility: In this video, I'm going to introduce some useful tools to you for accessibility. Are you ready? Let's get started. Number one, Stark. It's a Figma Sketch and Adobe XD plugging. It lets you check your color contrast ratio and simulate different color vision deficiencies. You just need to select an art board and run the plug-in. Stark handles the rest number to contrast, it's a Figma plugins that lets you check the contrast ratio of your colors. Unlike Stark, which led to check the contrast ratio only three times with the free plan. Contrast has no limit in this regard, and it also has a cool feature that scans your entire designed to find texts contrast issues. Number three, who can use.com. It's an amazing website that not only checks the color contrast ratio, but also shows how color combinations can affect different people with visual impairments. Let's give it a try. First, we specify our backgrounds color, then we set our text color, specify the font size and weight. Here we can see the contrast ratio, which is quite high, and the grading, which is AAA. Additionally, we can see how different people can process this color combination. So we have the regular region, the most popular colorblindness deficiencies and some other region problems. We also have the situation of vision events, which is quite interesting because we can see how accessible are color combination is by simulating the effect of direct sunlight and night mode on a phone or a screen. 27. Color inspiration: As designers, we always look for inspiration everywhere to keep up with design trends, come up with new ideas and so on. Being inspired is part of our life. And it's a very good thing because it helps us open our minds and try new things. We can get inspiration for our design layout or even for creating our color palettes. Inspirational sources are everywhere. We could get inspired by nature, but your flowers, colors, or even by a personal item. I'm going to ask you a question. What color harmony do we have here? You are right, complimentary. What about here? If your answer is monochromatic? You are totally right. We have monochromatic color harmony here as well. You can also visit some websites for inspiration like dribble, where you can choose a color and see how other designers use it in their artworks. You can check another website called Color Hunt, where you can find many different color palettes for your projects. The next website is called muesli. You can go to colors that muse that Lee choose your desired color palette. And it will show you how your color scheme actually looks on an interface. 28. Online tools for color palette creation: There are plenty of different tools out there enabling you to create your harmonious color palettes. In this video, I'm gonna show you some useful color palette generating websites. Are you ready? Let's get started. Number one, coolers. As I already mentioned, this is the tool that I use to find harmonious color combinations for my projects. You can give it a try to, let me show you how it works. Once you open the website, you can click on the Generate button in the menu. And here is the palette generator. If you press the spacebar on your keyboard, this whole pallet changes. Once you find one color you like, you can like that color by clicking on the lock icon. Now continue pressing the space bar until you find the second color. It's fun, isn't it? I should mention that now only the best matching colors or peak based on the colors you liked. You should keep doing this process until you select all colors. Now you can export your color palette and use it in your design software. If you have a specific main color, you can just paste the hex color code here, Luckett, and press the spacebar to generate your color palette. Once your color palette is ready, you can use other cool features of this website. For instance, you can adjust the attributes of all colors at once using the adjust palette option. You can also check the accessibility of your color by using the colorblindness option. What's, what if you want to create a color palette using a specific color harmony, don't worry, you can do that to simply head over to the More menu and click on Generate method from these drop menu, you can specify the color harmony you want to use to create color palettes. Do you want to see your color palettes in grayscale mode? Just click on the View illuminance map. You can also create a palette from a photo. To do that, click on the camera button and upload your image here. Your color palette is ready. If you're looking for gradients, you can simply hit over to the Explorer gradient section and you can find countless gradients for your projects here. Alright, let's talk about the second tool you can use to create your own color palettes. My color, that space. It's another great website that gives you all the colors you need based on your primary color. So just choose your color here and click on Generate. As you can see, it shows you different color categories that you can choose from based on your need. The next tool is called Adobe Color. It's an advanced tool that lets you create color palettes easily by choosing different color harmonies and adjusting them on the color picker. Just like this, you can also head over to the Explore section and browse through countless color palettes taken from photos. If you go to the trans section, you can discover current color trends in different industries like fashion, graphic design, illustration, et cetera. Under the accessibility tool stamp, you can check the accessibility of your colors as well. Do you like using artificial intelligence or AI to create your color palettes? If you do, I have good news for you. The next website we're going to talk about is called chroma. And it uses artificial intelligence to train a neural network powered algorithm for creating personalized color palettes. Well, how does it work? First, you should choose your favorite colors to train the generator algorithm. Once you pick your colors, click on the start training button to start the training process. Once it's done, you will be presented with hundreds of different color pairs and color palettes. It's so cool, isn't it? 29. Apply a color palette to a website - Part 1: Hey everyone, welcome back to another video of this tutorial. In this video, I'm gonna show you how you can create a color palette in order to apply colors to a landing page. So if you're not sure how you can come up with the primary, the secondary and the axon colors. Don't worry, I'm going to walk you through all the required steps to create a beautiful and harmonious color palette. And also, I'll show you how you can apply it to a landing page for this project. I already designed a landing page in Figma. And what I want you to do is download the landing page starter file from the resources section and imported to your Figma dashboard. Okay, So if you're not familiar with Figma, let me tell you that Figma is a popular browser-based application that lets you design user interfaces. And we're going to use it to apply all the things you learned so far to a real-world project. So to import a landing page starter file, just click on this Import button at the top right corner and choose the file on your computer. Once it's imported. Just double-click on it to open it up. Are right. Let me zoom in. There we go. So here is a concept project that I designed for this exercise. As you can see, I prepared it in grayscale color mode, except for the logo and images. Okay, those are colorful. So this landing page is for an imaginary company called Draft, and they provide online insurance services to entrepreneurs. So everything is going to be done on their application called Draft. Let me preview it that you can see the whole landing page. So at the top we have an ordinary navigation bar. And then here is our hero section. On the left side we have the content, the title, the subtitle, and a call to action, this button. And on the right side we have some cards and also this mockup. Now I'm going to scroll down. Here is the client section. And as you can see, these are colorful because we are not going to modify their colors anyway. So I kept them colorful. Let me scroll down. This is the feature section. As you can see, we have six different cards and each card represents one feature. The content here is not real, and I use Lorem Ipsum texts here. You can modify them. But for the purpose of this tutorial, it doesn't matter because we're going to focus on colors. And at the bottom we have an explorer All button. Okay, Let me scroll down here we have a testimonial section. Once again, the logos are colorful. I'm going to scroll down here. There is another section that provides the user with the most important services that they can get from this company. Okay, we have some images and the content on the right side. Let me scroll down. And this section is the CTA section. This is where we ask the user to install the app on their phone. Let me scroll down. And last but not least, we have the footer. So as you can see, we have some categories, some links, the contact information, and also a short description of draft. And we have a call to action button here as well. And at the bottom we have a copyright disclaimer and the social media icons, let me tell you what we're gonna do. First of all, we need to create a color palette, and then we need to apply that color palette to this landing page, to the elements of this landing page. To do that, I'm going to use the website called coolers that I already introduced to you. So let me go ahead and click on Generate. Alright, so what's the first step you are, right? We need a primary color or a base color. But since this brand doesn't have any primary color, we as designers, should come up with the primary color. Okay. So what do you think? Which color is more appropriate for an insurance company? Do you think that we need to use cool colors or warm colors? Which color harmony should be used to create this color palette? These are the typical questions that you should ask yourself whenever you want to create a color palette for your projects. Let's take a look at the content. First of all, to come up with the primary color, we need to think of the brand. What's the idea behind it? Who is their target audience, and what users expect from the brand. So first, let's think about the characteristics of this brand. So this is an insurance company and users should feel that they are safe and their assets are secure, and also they expect professional attitudes from the brand. So since we are talking about professionalism and trust, I think blue is the best option because blue is popular among men and women, so there is no obstacle in that regard. And I think we could use blue for the primary color. Alright, cool. Now let's go ahead and choose our primary color. But what kind of color harmonies should be used since we don't have any illustrations and I don't want to get high contrast in colors. I think the best option would be to choose Analogous. We could use monochromatic as well, but I don t think complimentary or split complimentary would be good options. I'm going to go with analogous, so that we can choose colors that are next to each other on the color wheel. I'm going to select it and let me press the space bar on my keyboard to get a good blue color. Alright, here we've got different kinds of blue. I'm going to select one of them and modified manually to get my primary color. Okay, So I think this one is a good option. I'm going to click on this color code and let me change the color model to HSB. Let me change the hue a little bit to see whether I can get a better base color or not. Alright, this blue is cool. However, it's too bright. So I'm going to decrease the brightness from a D5 to around 30, okay? Alright, maybe 31, and the saturation is good. Maybe I can increase it to 84. Perfect, It's cool. Alright, now that our primary color is ready, let me lock it and I'm going to drag it to the left side. Just like that. Now I'm going to continue pressing the space bar on my keyboard to get other colors are right. I like this light blue color as well. So I'm lucky to, and let me press Space-bar. Again. This middle color looks nice as well, but it's a little bit desaturated, so I'm going to modify it somehow. First of all, let me slightly move the hue slider to the right side to see whether I can get a better base color or not. I think 127 is good. And as you can see, the saturation is set to 78, and I'm going to increase it to get a saturated color. Alright, 87 looks good, but what about the brightness? It's too dark. Let me increase the brightness to, I'm going to set it to maybe 74. Perfect. I'm going to lock it and continue pressing the space bar. Now I'm looking for an accent color. It could be a green color or a purple color, since we are using an analogous color harmony. Alright, let's see whether we can use this green color or not. I think it looks good. However, it needs to be modified a little bit. So I'm going to click on the hex color code here. As you can see, it's too saturated and it would be a problem in terms of color contrast and accessibility. So I'm going to make it desaturated a little bit. Let me set it to 88, okay, and also I am going to change the base color or right, 161 looks good. However, it's too dark to be an accent color. I'm going to increase the brightness a little bit. I think 82 looks good. I like it. Let me lock it and I'm going to press space on my keyboard. I'm looking forward to neutral colors, okay? Alright, I don't like these colors, so what I'm gonna do is copy the primary color code here. I'm gonna go to hex. I'm going to copy it and let me paste it here. So we've got the primary color, and now using the color picker, I can create a tone here to get my desired neutral color. Okay, So let me move the color picker to the left side to add gray to our base color. This is how we create a tone, if you remember, just like that. Now let me go to HSB to see the attributes of my color. Desaturation is good. However, I'm going to make it a little bit desaturated. Let me decrease the saturation amount to 20. And also for the brightness, I'm going to increase C2 maybe for the four. Yeah, it looks good, nice. Let me lock it. Now. I'm going to add one more neutral color, but a light one. And if I hover over this section, I can click on this add color icon. And let me paste that color code here. Okay, Just like that, now, I'm going to modify the colors. So let me go to the HSB color model. The hue is gonna be the same, but I'm going to make it desaturated to create a tint of this color. Okay, So let me make it this saturated like this. I think if I decrease it to six, it would be great. And also I'm going to increase the brightness to 99, are right, cool. This is a great neutral color. I'm going to lock it and I need one more color. And that's going to be white because we're going to use that for our cards and let me change it to white. Perfect. Alright, cool. Our color palette is ready. Now it's time to export it. So I'm going to click on Export button and you could use whatever format you want, but I prefer SVG, so let me download it. Now I'm going to go to Figma and let me drag and drop the exports at color palette. Here. There we go. I'm going to enlarge it. Cool. Let me move it here. Alright guys, that's all for the first part of this project. In the next video, we will start applying our colors to our design. So see you then. 30. Apply a color palette to a website - Part 2: Now that our color palette is ready, we need to define the ratio of our colors because we're going to use the 603010 rule. So let me go ahead and remove these texts. So what colors are gonna be our primary colors in terms of ratio, this blue is definitely gonna be our primary color. These two colors are also going to be our primary colors, okay, in terms of ratio. So the first three colors are going to be applied to 60 per cent of our design. And these three colors are our secondary colors and are gonna be applied to 30 per cent of our design. And last but not least, the screen is going to act as our accent color, and it covers ten per cent of our design. Alright, Cool. Usually we need to create color styles before applying colors to our project. However, since it's not necessary for this tutorial, I'm going to skip that step and we will start applying our colors to our elements. So without further ado, let's get started. Alright, first, let's start with the background. For the background, we can use one of these three colors. Okay? I think this light neutral color is going to be a good option for our backgrounds color. Okay, so I'm gonna go ahead and copy its hex color code and let me select my art board and paste it for the background. And also I need to apply to other sections as well. So for the navigation bar, I'm going to apply it here and also for these clients section, let me paste it. I'm going to scroll down our right. As you can see for the testimonial section, we need to use a dark background. Why? Because here we have a dark shade, which color can be used for this section. I think one of our secondary colors would be a good option. So I'm gonna go with this middle blue. Let me copy its color code and I'm going to apply it to this background, okay? Alright, cool. As you can see, we have a good contrast between the cards and our background. Cool. And what about here? As you can see here, we also need to use a dark color. For this section, I'm going to use our primary color. Okay, so let me copy the hex color code and I'm going to apply to it just like that. And there we go, our right, our backgrounds colors have been applied successfully. Now it's time to move on to other sections. So let's start from the top. For these links, I'm going to use my secondary color, okay, this one. So I'm going to copy the hex color code. And let me select all these links. And also this error icon. And I'm going to apply it to all these texts layers. They look great. But what about the hero section content for these two text layers? I think the primary color would be good because we are going to create a high contrast ratio between our background and our foreground. So I'm gonna go with this primary color. Let me copy it and select these two text layers and I'm going to paste it. Cool. The last thing we need to modify here is the CTA or call to action button. And as you know, for CTAs, we usually use an accent color because it needs to draw the user's attention to it. I'm going to copy the hex color code of our acts and color, and let me paste it here. And for the text, I'm going to use white for now. Okay? I'm not sure about contrast ratio, but for now we don't need to worry about it, because later on, we will validate our colors in terms of contrast ratio and color accessibility. Alright, since we need to be consistent throughout our project, I'm going to use the same color for these texts as well. So let me copy it. And I'm going to paste it for these two text layers here as well. And also we are going to apply the same color to all these texts layers. So I'm going to select all of them and paste the color. Now let's see which colors should be used for our cards here. So the cards are gonna be white, as you can see here we have white cards and here we also have two white cards and they look clean and amazing. But the things we need to modify our these icons, the texts layers, and also these Explore button. For these icons. As you can see, we have three different shades. Therefore, we need to use three different colors. Okay, so I'm going to use our secondary and accent colors for these icons. Let me go ahead and copy the color code of these secondary color. Now instead of changing the color of these icons one by one on the right side, under the selection colors, you can see that we have three different shades. And I'm going to select the first one and paste the color code. There we go. We apply the first color. Now it's time to apply the second color, which is this one. So I'm gonna go ahead and copy the color code of my other secondary color. I'm going to select the feature list and the next shade is gonna be this one. So let me paste it. There we go. They look amazing already. And for the last color, I'm going to use. The axon colors. So let me copy the color code, select the cards, and I'm going to click on see all five colors. There we go. I'm going to paste it. They look awesome, don't they? And as you can see, the color of our Explore button has been changed as well because the same shade has been used for that before. So we don't need to modify it. Okay. For the text, I'm going to go ahead and copy the primary color and paste it here. Cool. Can you see how beautiful and clean this section is? The reason is that we used a color harmony to come up with this color palette. And also we use the 603010 rule. Now it's time to modify our explorer All button here. Okay? This button, I'm going to use our accent color, which is this green. And for the text and this arrow icon, I'm going to use white for now. What about here? The cars are okay, but we need to modify the color of these texts, okay, so I'm going to select them and let me apply our primary color to all these texts. For these texts, I'm going to use the neutral color that we created before. So let me go ahead and copy its color code. And now I'm going to apply the same colors to all these content. So let me fast forward this process in order to save your time are right, It's done. Now let me modify the color of these large tidal, okay, I think our light neutral color would be great for that. So let me choose that. And what about these quotation mark? Well, obviously we need to use our secondary color for it. Okay. But the light blue one, this one, I'm going to copy the hex color code and let me paste it here. It's too bright, so I'm going to decrease the opacity to 20%. Now it looks much better. This section is done as well. Now we can move forward to another section. Here, as you can see, we have three different circles behind these photos and they are light teens. Okay, so we should decrease the opacity of our colors here as well. For the first one, I'm going to use our primary color for it. And let me decrease the opacity to 20 per cent. For the second one, I'm going to use our blue secondary color and I'm going to decrease the opacity to 20 per cent as well. And for the last one, I'm going to use our accent color, and also decrease the opacity to 20 per cent. Since these titles, car, office, and house, correspond with these photos, I'm going to modify the color of these bullet points right before these titles. Okay, so the first one is going to have our primary color, but we don't need to decrease the opacity here. The second one is going to have our secondary color. And the last one is going to have our accent color or write this section looks great as well. I hope you like it. Now let's move on to the next section. This is called the CTA section. Okay, so here we need to modify the text color only for the text, I'm going to use our neutral color that we used for our background, just like that. And last but not least, we need to apply colors to our footer as well. So for these texts and these categories, at the top, I'm going to use our dole neutral color, which is this one. So let me choose that. Alright, cool. As you can see, it's been applied to all these texts layers for these CTA button, I'm going to use the accent color, this one. And also for the text, I'm going to use white. And for these links, I'm going to use our primary color, okay? This one. What about this divider, this disclaimer, and also the social media icons. I think if we use our LDL neutral color, it would be great. The one that we used for this text. So I'm going to copy it and paste it for all these elements and also for these icons are right, as you can see before got to change the color of the word draft. I'm going to use our secondary color for it. Alright, cool. Our landing page is ready. We successfully created a color palette and applied all those colors to our design according to the 603010 rule. Okay, so let's preview it are rife. Our heuristic chain looks good. The navigation bar looks clean. We have the CTA bar using the accent color. Our cards here are white. These cars looks great as well. We have used the analogous color scheme for these icons are right, the testimonial section looks clean as well. For this section, we use the primary color and some tints of our secondary and x and colors. For this section, we used our primary color as our background and a neutral color for our foreground content. And last but not least, we used our primary, secondary and accent colors for the footer. So everything looks cool. However, now we need to check our colors and see whether they passed the contrast ratio test or not. So I'm going to start from the top and then we want to other sections. So first of all, let me select one of these links, e.g. about. Then I'm going to right-click on that. And I'm going to run the contrast plugin. As you can see these color palettes, the contrast ratio test for WA and AAA levels. And it's fantastic. But what about these texts? It also passed all the tests and it's great. Now I'm going to select these, get us started text. Oops, as you can see, although it looks very good on our interface, it failed the contrast ratio test. So we need to fix that. We have two options. We can either modify our accent color, which is not a good idea in my opinion, or we could modify our texts color. So instead of white, I'm going to go ahead and choose our primary color for these texts. And now as you can see it pass the contrast ratio test. Can you see how important it is to validate your colors in terms of contrast ratio. Let me go ahead and modify all other buttons, like here, and also here. Okay, cool. But what about here? If I select this text, you can see that it passed the contrast ratio test. What about this Explore button? It also pass the contrast ratio test. And here, as you can see it past the contrast ratio test, we already checked these color against our background. So we know that it passed the contrast ratio test for these texts as well. But what about here? Let me select it, right, as you can see, it pass the AAA level for normal text and AA and AAA levels for large text. So it's not a problem. Here. We already checked that color against our background. And basically that's all. Now that we validated our colors based on contrast ratio, it's time to validate our colors based on the colorblindness deficiencies. Okay, so I'm going to select my art board. It's not grayscale mode anymore. And then I'm going to run a plugin called color filters. If I click on gray scale, we can see that we've got a grayscale mode again, and we have different shades of gray. So the visual hierarchy looks very good. We have good contrast ratio here for our content and our Watson's. Everything looks great. Now let's take another color deficiency. I'm going to undo the process Command Z or Control Z. And let me run that plugin once again and choose e.g. red lines are right, we have good shades as well. So everything looks clean to people suffering from these color vision deficiency. And last but not least, Let's check it for another color deficiency, e.g. blue cone, monochrome Massey. And clearly we have great shades so people won't face any problem while using this website. Alright, let's preview our landing page for the last time. Can you see how clean these landing pages colors are harmonious and also accessible to everyone. Alright guys, that's all for this video. I hope you enjoyed it and I'll see you in the next one. 31. Apply a color palette to an application - Part 1: Hey everyone, welcome back. In this video, we're going to create another color palette and apply it to a mobile application. But first things first, make sure to download the mobile app starter project from the resources section and imported to your Figma dashboard. Okay, you can either drag and drop it into this environment or you could click on the Import button at the top right corner and choose it from your computer. Alright, let me open it up. Alright, this is the project that you already prepared for you. And we're going to create a color palette step-by-step and apply it to our design according to the 60th 30.10 rule. So if you're ready, let's get started. As you can see here, I prepared an art board called colors for you with many swatches, e.g. we have primary and neutral semantic charts and data visualization, and we need to modify the color of all these swatches. But first of all, let me show you the project. So the project we are going to work on is a personal finance application and it lets users to manage their finances easily. So I designed all the pages in grayscale color mode that we could easily distinguish the shades and apply our colors to all these elements. So as you can see here, we have three different sign-in pages. Basically, the design is the same. However, this one is the main sign-in page. The second one is the sign-in page, but we've got a username and a password and also an error here. On the third page, we've got this warning icon as you can see, let me zoom that you could clearly see that and a CTA or call to action and some links. On the homepage we have a large tidal, two different credit cards and a dialogue that presents the last three transactions to the user. And last but not least, we have the finances page. On this page we have a pie chart at the top, right below that, we have some information about the expenses. And also here we have the data related to this pie chart. Alright, so what kind of colors do we need for this project? First of all, we need to come up with a primary color. And also we could have secondary colors, but I don't think it's necessary this time. We're not going to use coolers or any other websites to come up with our color palette. I'm gonna show you how you can do that by yourself manually, since it's a finance app and users need to trust this app. Again, we're going to use blue as the primary color, but this time, instead of using an analogous color harmony, I'm going to use a monochromatic color harmony. So are you ready to start creating our color palette? Let's begin. Let me zoom in here. I'm going to select my first swatch and let me head over to the field section and click on this color to open the color picker. As I mentioned, I'm going to use blue as the primary colors. So I'm going to move the slider to the blue section are right, I think this blue looks good. Maybe I could change the hue to 217, something like this. It looks much better now for the primary color, I'm going to make it a little bit desaturated. So let me decrease the saturation from 94 to around 90 or maybe 89. Yeah, it looks good. And also the brightness is gonna be around 70 or maybe 75. Yeah, it looks nice. Alright guys, are primary color is ready. Now it's time to move on to other colors, since we are going to use a monochromatic color harmony, our base color is going to be the same. So I'm going to select all these swatches, hold down the Shift key on your keyboard and select all the swatches and just change their color to our primary color, just like that. Now I'm going to select the second swatch and let me create a dark shade of our primary color because we're going to need that for our texts layers. First of all, let me increase the intensity or saturation of my color, 90-100, just like that. And also I'm going to decrease the brightness to add black to my base color. So if I move my color picker down just like this, I can easily add black to it, but I think if I set it to about 45 or maybe 43, it would be great. Yeah, it looks nice. Alright. Our second color is ready as well. But what about the last color? This one is going to be used as our accent color, okay, So it needs to be vibrant and bright. So let me go ahead and modify the saturation and brightness. Since this color is somehow bright, we can easily make it brighter if we set the saturation and brightness to 100 per cent. Alright, now we need three neutral colors. So let me select the swatch and then I'm going to create a tone of our base color. If you remember, to create a tone, we need to add gray to our base color. So if I just move my color picker to the gray area, I can create a tone. And as you can see, we're getting a dull color, and that's exactly what we want. But let me make it a little bit brighter by increasing the brightness. Okay? So right now the brightness is set to 43. Let me set it to maybe 49 are right, it looks good. So the second neutral color is gonna be a tint of our base color. So we need to add white to our base color. So let me move to the white section. Just like that, I'm going to set the saturation to five, okay? And the brightness is gonna be 100%. And as you can see, we've got a great neutral color, and the last neutral color is going to be pure white. Why do we need that? Because we're going to use it as a foreground color, e.g. for icons and also for some of our texts colors I will show you later. Alright, cool. Our primary and neutral colors are ready. Now we need to move on to the next section, semantic colors. As you know, having semantic colors in your color palette is optional. However, as I showed you here, we have the sign-in pages and we've got an error here and also a warning here. So for these two states, we need to have semantic colors. So let me go ahead and select the first swatch here. And I'm going to go to the field section to open up our color picker. Since we need a red color, make sure to set the age or hue to zero, because this is how we could get a pure red color. But as you can see, it's too bright and vibrant. So we're going to fix that. Let me select it. If I head over to the color picker section, I can easily decrease the intensity by lowering the saturation to maybe 60. Let me check, or maybe 65 are right. And also I'm going to set the brightness to 95 to make it look a little bit darker, just like that. Now I'm going to create two tins of these color. So first of all, let me select the second swatch and I'm going to use this color, then I'm going to add white to it. Cool. And for the last one, I'm going to move it even further to get a very light tint of our color. Sometimes if you want to create a card or an icon, these things would be very useful in order to create a good contrast ratio between your foreground and background elements. Alright, now, let's move on to the second semantic color that we need. The first one is required for the error message, but the second one is required for the warning icon. Okay? So for warning, as you know, we need to use yellow. So let me go ahead and choose a yellow using the color picker, right? I think this is a cool color. Now, I'm going to select the second swatch and get our yellow color. But this time, instead of having to teens, I'm going to create one team and one shade of our base color. To create a shade, I'm going to add black to my color. If I decrease the brightness like that, I could create a great shade. However, I think it needs to be a little bit desaturated. So let me decrease the saturation to around 70 or maybe 68. Yes, it looks good right now, you may think that it's not a good color combination. However, when we start using it, you may see how harmonious these colors would be. Alright, And for the last swatch, again, I'm going to choose our base color, and this time I'm going to create a tint of our color. So let me add white to it. Just like that, the saturation is going to be 40 and the brightness is gonna be 100, perfect, our semantic colors are ready as well. But as you can see, we have one more section to feel that charts and data visualization. Why do we need these colors? Well, because we have charts and data here when you're working on a finance mobile application or a finance web app, it's almost inevitable to use these kinds of colors because we need to present data in a way that are distinguishable and clear to recognize. If you remember, for charts and data visualization, we could use three different colors schemes, categorical, sequential, and diverged. Usually when we want to present data without any numeric value, like in this chart, we use categorical color scheme. Why? Because using the category called color scheme. We could come up with high contrast in colors that the users could distinguish between them easily. Alright, so let's go ahead and finish this section as well. First of all, I'm going to select my first swatch here and let me go ahead and choose my first color for the first color, I'm going to use blue. It could be any blue. It doesn't necessarily need to be one of the primary blues. However, since this blue looks good, I'm going to copy the hex color code and use it for our charts and data visualization as well. So I'm going to paste it here. However, I think I could modify that somehow because this color is so saturated. So let me decrease the saturation from 90 to around AD, or maybe AD2. It looks good. And also I'm going to increase the brightness 73-78. Alright, cool. But what about the next scholar? Keep in mind that the order of these colors matter a lot. Why? Because people with color vision deficiencies should easily process these colors when they are placed next to each other. If it's not understandable right now, it's totally fine. Once our color palette is ready, I'm going to show you an example that you could get it perfectly. But for now, let's go ahead and complete our color palette. For the second one, I'm going to use a green color. So let me go to the green section are right, I think this green looks good. Maybe I could decrease the hue to 150, and now let me decrease the saturation and brightness to make this color look a little bit darker or right cool, It looks nice. Now let me go ahead and select my third swatch for this one, I'm going to use yellow. So let me choose my semantic color, yellow, this one, and just modify the saturation and brightness for brightness, I think 100 is fine. Maybe we could modify to 99, but for the saturation, I'm going to make it desaturated a lot. Right now. It's set to 90, but I'm going to make it 60 or maybe 66. Yeah, it looks cool. So can you see the pattern I'm using here for the first color? As you can see, the brightness was 77, which is the value of our color for the next one, brightness is 63. So we made it darker. For the next one, the brightness is 97, so we made it lighter. So this is why I said the order of these colors matter because if someone with e.g. monochrome massive lesion wants to process these colors. They can easily distinguish between them. Alright, let me select the next swatch for the next one, I'm going to use my red semantic color and let me modify it a little bit. Maybe we could just decrease the saturation too. 60 or maybe 62, something like that. The brightness looks good. And last but not least, for this one, I'm going to use a dark blue color. So let me move the hue slider to the blue section. Are right. I think this color looks good. Maybe I can decrease the hue to 247. And for the saturation, I'm going to make it around 65 or maybe 61. However, it needs to be too dark. So let me decrease the brightness from 74 to around 30 or 35. Let me see how it looks or right, 36% looks good. All right, cool. Our charts and data visualization color scheme is also ready. Now it's time to show you why the order of these colors matter. First of all, let me go ahead and select this art board. And I'm going to right-click here to run a plug-in that I already showed you in previous videos. It's called color filters. And if I go to colorblind simulations, I can choose monochrome SE, e.g. and right now, you can see that the value of these colors changes continuously and we don't have to dark shades next to each other, e.g. we don't have this color here because it would be too hard for the user to distinguish between them. That's why the order of colors matter here. Let me undo the process. Are right, that's all for the first part of this project. I hope you enjoyed it and I see you in the next part. 32. Apply a color palette to an application - Part 2: Now it's time to apply our colors to our design. So if you are ready, let's get started. First of all, I'm going to start with these sign-in pages for the background. First, I'm going to select this artboard. And on the right side under the selection colors, I'm going to click on see all nine colors just like that. So here we have nine different shades of gray and we need to modify them one by one. This one is our background. For the background, I'm going to use our light neutral color. So let me use the eyedropper and choose our light neutral color just like that. And if you don't know which colors are corresponded to which elements, you can click on this icon to find a particular elements that these colors are used for. So e.g. I'm going to click on that. And here you can see that we have a drop shadow using this color. Alright, now let me go ahead and modify the color of our title. For the title, as you can see, it's too dark, so we have a dark shade. Therefore, we need to use our dark shade that we created here. So let me modify its color just like that. But what about the text fields? The text fields are gonna be white, so we're going to leave them as they are. However, the elements here like these icons and these texts layers need to be changed. So for these icons, I'm going to use our accent color. So let me go ahead and modify their color just like that. Alright, but what about these two texts layers? For these texts layers, again, we need a dark shade, but instead of using our primary color, I'm going to use our neutral color, this one. So let me go ahead and choose our neutral color. Just like that, our rights are text fields are almost ready. However, as you can see, we have a stroke around them and we need to modify their color as well. For the stroke, we have a color, but with 50 per cent opacity. So for this color, I'm going to use our neutral color again. And let me decrease its opacity to 50 per cent for this one as well. Let me just do the same process are right, cool. Now our text fields are ready, but there are three more elements that we need to modify. Forgot Password link, the CTA and this link. Okay, First of all, let me select these two links and I'm going to use our accent color for them. Okay? So I'm going to choose our accent color just like that. But what about our CTA? As you know, for the CTA, we also use our accent color, so it's gonna be so easy. Let me choose our accent color. However, remember to modify the color of our shadow as well, because it's not a good practice to use a Black Drop Shadow for colorful elements. So I'm going to choose the shadow layer and let me choose the same color and decrease its opacity to 32% are right guys, as you can see, our first sign-in page is ready and it looks nice and clean. I hope you like it too. Now we need to go ahead and apply the same colors to all these sign-in pages. So I'm going to fast forward this process to save you some time. Our right are assigning pages are ready. I applied the same colors to all those elements except this error message and this warning icon. Because we're going to do that together. For this error message, we need to use a semantic color. Okay? So let me go ahead and choose these semantic color. I'm going to copy the hex color code and I'm going to paste it here, are right, it looks good, but later on, we need to validate our colors in terms of contrast ratio as well. But for now, we're going to leave it as is. But what about this icon? For these warning icon? As you can see, we have two different colors. We have a light tint and a dark shade. So for this light teens, I'm going to use our light teens that we created here. I'm going to copy the hex color code and let me paste it for the circle. And for these two elements, I'm going to use our dark shade, this one that we created before. So let me paste it here and there it is. Can you see how beautiful and harmonious these colors are now, that's why it's always a good idea to create different shades and different teams of your semantic colors are right, so our signing pages are completed perfectly. And now we can move on to the next page, which is our homepage. Here we have many elements. We have a title, we have two credit cards, we have a dialogue and some transactions. So let me start with the title. Which color should be used for it? If you're an series that dark shade of our primary color, you are 100 per cent, right? We need to use colours consistently throughout our project. So I'm going to copy this color and let me paste it for these tidal. But what about for the background? For the background, I'm going to use the same light, neutral color, just like that. Now let's apply colors to our credit cards. For the main card, I'm going to use my accent color, this one, but make sure to choose the correct layer in the layers list. Since I use the mask, it's called the rectangle seven. I'm going to choose that. And let me use our accent color for it. There we go. These texts are gonna be white and also these MasterCard logo is going to stay white. But what about these lines? For this one, I'm going to use the dark shade of our primary color, the one that we used for our title, this one, and this one is gonna be white. It looks great. But what about this card? As you can see here, we have a tint of our color, so it's a little bit brighter. The color we're gonna use is gonna be the same as our accent color. However, as you can see, it's brighter because I decrease the opacity of the main card here, MasterCard to 250 per cent, okay? If I increase it to 100%, you can see that we don't get a good visual hierarchy since the main card is not selected here, it's better to make it 50% are right, Cool. But what about these cards? The dialogue itself is going to be white. However, these cards are going to use our neutral color, the one that we used for our background. And this color has already been applied to these cards because we use the selection colors section, so we don't need to modify them. But what about these indicator for this one, I'm going to use my primary color, which is this one. And then I'm going to decrease its opacity to 15% are right, cool. Now we need to move on to our elements. As you can see, these squares don't have a very dark shade like these black shade, as you can see here. Therefore, I'm going to use our accent color for them. And if you compare these elements colors with each other, you can see that all of them use the same shade except this one. So if I just select my homepage art board, I can easily choose this color and I can use the accent color just like that. And all of those shades have been changed immediately. But what about these dates? For these dates, we're going to use our dole neutral color. So I'm going to select all of them. And let me go ahead and choose our dark neutral color just like that. Alright, cool. They look great. Now we need to move on to our last page, which is the finances page. Right at the top we have a navigation bar. Okay. The Elements of this navigation bar should use the same color. I'm going to select all of them, and I'm going to use the primary color for them. This one. Using the eyedropper. I can select my primary color. And there we go. The color has been applied to all of them. Here we have a pie chart, okay, for these charts, we need to use our chart and data visualization color scheme. Therefore, we are not limited to use our monochromatic color scheme anymore. Alright, let's start with this large shape. I'm going to select that, and I'm going to choose our blue color here. So let me move these colors art board over here. Let me select this one. And using the eyedropper, I'm going to select this color. Fantastic, but these shape has a drop shadow as well. So if you choose this blue layer, the one under our main shape in the layer's list, you can modify the color of our drop shadow as well, just like this, and decrease the opacity to 30%. Now, for the next shape, I'm going to use green. Make sure to keep the order the same. E.g. don't use red and place it next to our blue because people suffering from color vision deficiencies may face difficulties in that case. So for the next shape, I'm going to use green. And let me modify the drop shadow color as well. I'm going to select green and decrease the opacity to 30%. For the next shape, I'm going to use this one, yellow, I already modified the layers name that you can easily understand which shape should use which color. And now let me modify the drop shadows color as well, and decrease the opacity to 30%. And the next shape is going to use our red color. Also, the drop shadow needs to be read with a 30% opacity. And last but not least, let me use our last color and we don't need to have a drop shadow here. Alright, it looks very good, doesn't it? Now, it's time to apply colors to these texts layers. So here we have two different shades. One is too dark and these two are a little bit brighter. So I'm going to select this layer and this one, and I'm going to use our neutral color for them just like that. However, for this one, we need to use a darker shade. Therefore, the dark shade of our primary color looks good here. Can you see how easy it is to apply colors to our design when we already designed our project in grayscale mode. Alright, but what about these data for these circles? We need to use the same colors that we used for our chars. So this one, which is the biggest one, is gonna be blue. So I'm gonna select this circle and just use this blue. And this line is going to use the same blue as well. Or the second one, which is the next expense, is going to be low. Okay, so I'm going to use this one, the same yellow here, and the next one is going to be green. So I'm going to select these two shapes at the same time. And let me choose our green color. And this one, online shopping is gonna be red. So I'm going to select red. And last but not least, the others group need to use our darkest shade, which is scholar are right, but what about these texts layers for the titles, e.g. rent, groceries, restaurants, etc. I'm going to use our dark primary color. Okay. The one that we used for this amount. So let me use this one. And for these transactions and these amounts, I'm going to use our doll neutral color. I'm going to select all of them, hold down the Shift key and click on them one-by-one, and finally, choose our neutral color. They look fantastic, Dante. And the last one is our CTA, the download statement button. So for this one, I'm going to use our accent color, which is this one. And also for the drop shadow. I'm going to use the same color. However, with a 32% opacity or right, Nice. One thing that we forgot to change is the background of this page. So let me select the art board and just modify the background color to our neutral blue color. Can you see how beautiful these pages are? I hope you like it. Now let me go ahead and preview them one-by-one are right here is our first sign-in page. This one is the second sign-in page with this error state. This one has a warning icon with our semantic colors. And here we used our monochromatic color scheme for the credit cards and all the other elements. And last but not least, for the finances screen, since we had a category called chart, we used a categorical color scheme for them. Okay? Alright, we're almost done. The only thing we need to do now is validate our colors based on color contrast ratio. So let me select this sign-in title, e.g. and then we're gonna run a plugin called contrast, the one that we used before. Just like that, as you can see it past all the contrast ratio tests for all levels, the WA and AAA levels. What about these texts? Alright, it passed almost all test. However, it failed for the AAA level for normal texts, but it's totally fine because it's already past the double a level. What about this one? Are semantic color. As you can see, it failed for normal text. However, if you take a look at the contrast ratio, which is 3.1 to one, we can see that it's not that low and it's acceptable to use this color for this text layer. Why? Because for these texts layer, we used a semi bold weight. If I change it to regular, now, it's not acceptable. But for semi volt or bold text, this color is acceptable as long as the contrast ratio is not less than 3.1 to one. What about this one? It also pass the required test and this one, fantastic. But what about here for the title? We already checked that. Let me select the texts layers on these cards. As you can see, it passed all the tests. What about here, the accent color against this neutral color? It passed all the tests. And also our dole neutral color against our light neutral color. It again, pass all the test. Alright, and let me check the contrast of these texts as well. I'm going to run the plugin once again, as you can see, it passed all the tests. We're not going to validate other colors, e.g. these ones because we already checked them, are right guys. That's all for this video. I hope you enjoyed it and I'll see you in the next video. 33. What to do next?: Alright guys, that's all for this course. I really hope you enjoyed it and learned useful skills for your design journey. Now, it's your turn to practice what you learned and become a better designer. I'd love to hear your feedback on this course to make it better and better for you. If you would like to get notified about a course update or my new courses, you can follow me on Skillshare as well. If you want to become a UI UX designer and you don't know where to start, you can check out my Figma course on Skillshare, where I will teach you everything you need to know in order to become a UI UX designer. If you want to learn more about UI UX design and level up your design skills. I have good news for you. I have a YouTube channel where I post tons of free stuff that you might find interesting. So make sure to subscribe to my channel to not miss my upcoming tutorials. Last but not least, I'd like to thank you for watching this course and I can't wait to see your color palettes and artworks. See you and bye-bye.