Create Amazing Color Schemes for Your UI/UX Design Projects | Arash Ahadzadeh | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Create Amazing Color Schemes for Your UI/UX Design Projects

teacher avatar Arash Ahadzadeh, iOS Developer & UI Designer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

33 Lessons (1h 59m)
    • 1. Introduction

      2:05
    • 2. Structure of the course

      0:49
    • 3. The importance of colors in UI/UX design

      1:36
    • 4. Color Modes

      1:49
    • 5. The color ingredients

      1:13
    • 6. Master the color wheel

      1:30
    • 7. Different types of colors

      1:52
    • 8. Color Harmonies

      2:01
    • 9. Color Contrast

      1:45
    • 10. Real-world examples of harmonious color schemes

      4:37
    • 11. Introduction to Color Psychology

      3:49
    • 12. Gender differences in color preference

      1:23
    • 13. Required colors for UI design

      3:36
    • 14. How to create a color palette for your project?

      3:51
    • 15. How to choose your base color?

      1:37
    • 16. How to choose an accent color?

      0:48
    • 17. How to choose background colors?

      0:58
    • 18. Semantic colors in UI design

      1:00
    • 19. What is a color scale?

      2:05
    • 20. What is Grayscale?

      2:22
    • 21. How to apply a color palette to your design?

      4:02
    • 22. How to name your colors appropriately?

      2:30
    • 23. How to create great gradients?

      3:25
    • 24. What is color accessibility?

      2:55
    • 25. Validate your color palette based on contrast ratio

      1:43
    • 26. Useful tools for accessibility

      1:49
    • 27. Color inspiration

      1:24
    • 28. Online tools for color palette creation

      4:03
    • 29. Apply a color palette to a website - Part 1

      10:31
    • 30. Apply a color palette to a website - Part 2

      13:57
    • 31. Apply a color palette to an application - Part 1

      15:09
    • 32. Apply a color palette to an application - Part 2

      15:38
    • 33. What to do next?

      0:54
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

1,237

Students

--

Projects

About This Class

cab5e217.png

Have you ever tried to create your own color palette but you couldn't choose your colors harmoniously? If so, you are in the right place.

Many designers, especially beginners, aren't comfortable working with colors. That's why they try to find pre-made color palettes on websites. But why? The reason is they don't know the fundamentals of color.

If you are a UI/UX designer, you know how important color is. In fact, one of the most important aspects of user interface and user experience design is color, and if you don't use it properly, your design won't stand out.

In this course, you will learn everything you need to know about colors step by step, from color theory to color psychology. You will learn how to create harmonious and beautiful color palettes in no time. In addition to creating color palettes, you will learn how to apply colors to your design like a professional, no matter if it's a website or a mobile application.

Moreover, we will dive into the color accessibility topic, and you will learn how to create amazing color palettes that are accessible to everyone.

During this course, we will create different color palettes and apply them to websites and mobile applications using the software Figma. You will also learn how to validate your colors based on contrast ratios easily.

I’ll go over all of the essential tools and techniques for creating amazing color palettes required for User Interface (UI) and User Experience (UX) design.

This course has been designed for people who are struggling to choose and apply colors properly. We will start with the most basic principles and work all the way through, step by step.

Course highlights:

  • Master Color Theory

  • Master Color Psychology

  • Learn how to create harmonious color schemes

  • Tips & Tricks for working with colors

  • Learn about the required colors in UI/UX design projects

  • Learn how to apply colors to your design like a pro

Who this course is for:

  • Web Designers
  • UI Designers
  • UI/UX Designers
  • Graphic designers who want to become UI designers
  • Anyone who wants to learn how to work with colors
  • Developers who want to understand colors better

So, what are you waiting for? Enroll today!!

Meet Your Teacher

Teacher Profile Image

Arash Ahadzadeh

iOS Developer & UI Designer

Teacher

I am a UI/UX Designer & an iOS developer with having almost four years of experience in application development and also ten years of graphic design and UI/UX design.
My passion is helping people to learn new skills in a short-term course and achieve their goals. I've been designing for more than ten years and developing iOS apps for four years. It's my honor if I could help you to learn to program in a simple word. I currently am teaching, Figma, Sketch, iOS 13, Swift 5, Illustrator, Photoshop, Cinema 4d, HTML, CSS, JavaScript, etc.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Why is it so difficult to work with colors? If you're a UI/UX designer, you're 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 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 Arash Ahadzadeh, and I'm a UI/UX designer. I also teach UI and UX design at the University of Economics and Human Sciences in Warsaw and 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 the 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're ready to master color and create amazing color schemes, I'll 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 the 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 part, 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. 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 whiter role in any of them. Undoubtedly, colors are one of the most important aspects of your 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 won't 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 color 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. 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. Seen 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, Grayscale, 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're 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 gamut 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, 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. On the contrary, if you 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: tint and shade. A tint is a brighter version of a hue, and we can create one if we mix the hue with white. On the other hand, a shade is a darker version of a hue. As you may guess, we can create one by adding black to our hue. 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 they are 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. For example, cool colors represent water, snow, sky, and they are calm, soothing, and refreshed. On the other hand, warm colors represent heat, sunlight, and friendliness. They're 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 the 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, et cetera. 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 a background doesn't always look interesting and aesthetic to the user's eyes. Then what can we do? To make our design look even better, we can add a hue and a little saturation to the neutral colors. Thanks to this technique, the neutral colors look more interesting to the user's eyes. 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. The next color formula is complementary. 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 contrasting colors in your design. A split-complementary color scheme takes the colors on either side of the complements. It gives you different colors to work with while keeping the same level of contrast. An 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, and they form a triangle on the color wheel. These color combinations are usually vibrant, so make sure to use them wisely in your projects. The tetradic color scheme takes two sets of complementary 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 themes, 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. 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, tints, or saturation of your colors. A contrast ratio is just a 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 1, never use pure black and pure white and vice versa. It causes digital eye train and hurt users' eyes. Instead, you can use a very dark gray on a very light gray and vice versa. Tip number 2, 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 3, 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. Last but not least, tip number 4, always validate your colors by checking the contrast ratio. Believe me, there are beautiful looking user interface designs on Dribbble and Behance that fail 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 Aresh, 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 used a dark shade of that color for this large title 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. Basically, the hue is the same, but the value and saturation are different. Let's take a look at another example. This website called Orbit also uses a monochromatic color scheme, and here they also use only one color and they perfectly apply these colors to their design to create a great visual hierarchy. Complementary color scheme. Here is a popular website, Booking, and as you can see, it uses a complementary 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 used a neutral color for the background, and this is the reason that the orange and the blue colors stand out here. It's very important to choose your background's 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 a 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 complementary color scheme. This website uses a split complementary color scheme, and as you can see, it's energetic and fun. The reason is, these are high contrasting 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. It's very important to know which colors are suitable for which content. Analogous color scheme. This website uses an analogous color scheme, and as you can see, the designer perfectly applied these colors to the illustration and just used 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 title, 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 noticed, 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 his text and these images pop on those backgrounds, and the result is great. Tetradic color scheme. Here is an example of tetradic 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. It's not actually a good idea to use this color scheme for the main elements of your project like text, buttons, etc. Unless you are an experienced designer and know what you're doing, I wouldn't suggest using this color scheme in UI/UX design. This website is another example of a tetradic color scheme. Here again, we have an illustration, and it's obvious that the designer didn't use the whole color palette for the contents. 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 want to 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. Red. Red 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 inviting and shows 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, calm, 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. Violet is a color that symbolizes royalty and wealth. Since the violet dye 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 make 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. Make sure to check different brown shapes before applying them to your design. Because a light brown can do 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 white brand 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, make 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're using your projects that you could upgrade your design from good to awesome. 12. Gender differences in color preference: When designing an app or a website, it's essential to know who your target audience is. 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 a 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 purplish 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 unselected options, you can use a secondary color. Two; accent colors. Accent color is used to emphasize actions and highlight information such as text, 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 accent color. I'll show you how to create a color palette step-by-step in the next video. Consider the Lyft landing page. It uses purple as the accent color and as you can see, it has been used for the call to action and links. 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're 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. These 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. Last but not least, number 5, chart 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, heatmaps, or treemap in your UI, consider creating a set of 10-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, etc. 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 it started. No matter what software you're using, change the color model to HSB. I use Figma. So let me show you how it works. First, I head over to the Fill section, and from this drop menu, I choose HSB. As you can see, we have three different values here H for hue, S for saturation, and B for brightness. 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 1, 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 2, apply the color to shape on your canvas. It could be a circle or rectangle. Step 3, duplicate the shape five times to get six identical shapes. These are your swatches. Step 4, choose the swatches near the base color and modify only the saturation or brightness to get two supportive dark shades of your color. Don't change the hue. These colors are used for different states of actionable elements like buttons or links. For example, when we design a button, we want to create all the states of the button like default, active, inactive, etc. Step 5, now choose two neutral colors by adding gray and white to your color. Step 6, 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 did we use to create this beautiful palette? If your answer is monochromatic, you're 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 two 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, red 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' customers are familiar with the brand's color and can connect with your design instantly. If you need to choose the brand's primary color, first, list the characteristics of the brand, and then 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 expect it. Make sure to check your primary color against other colors to see if that's the right choice for your project. We will talk about the accessibility of colors later in this course. 16. How to choose an accent color?: Accent colors are used for links, call-to-actions, progress bar, et cetera. 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 a complementary. 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-40 points. Now increase the brightness by 5-10 points. Voila, 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 vibrant 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're not limited to use just light colors. Sometimes we can use the primary color for the background, as long as it's not too vibrant 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 used this technique for this interface. For instance, you can set the saturation value between 2-8 points and set the brightness value between 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 a 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. What 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 grayscale 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 won't 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. It gives you a set of guidelines to enhance your design process. Here are a few color scales created by Material Design. These colors are chosen to work together harmoniously. As you can see, each color corresponds with a number, between 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 this 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 and 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?: What's grayscale? Grayscale is simply made of different shades of gray. Many artists and designers start their design using a grayscale. But 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 cards should be laid out. When you use the grayscale color mode, you can easily notice whether you have enough contrast between your elements or not. For example, 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. 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 card 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 design less accessible. How can we fix that? Well, I would use a lighter color for the description and the cancel button. But why? Because of the importance of visual hierarchy. Our most important elements, which are the title and the confirm button should get the most attention. Therefore, the cancel button and the description should have a lighter tint 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 grayscale 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't 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 pan. If you use the ingredients disproportionately, you may end up with a salty meal or a tasteless meal. 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 60-30-10 that's taken from interior design. Let's see how it works. Based on this rule, you need to use 60 percent of your dominant or primary color, 30 percent of your secondary color, and 10 percent of your accent color. First, let's check these interior design. As you can see, the primary color is used for 60 percent of the environment, the secondary color is used for 30 percent of the environment, and the accent color is used for 10 percent of the environment. Now it's time to give it a try. This is an interface designed in grayscale mode. Let's start using only three colors first. 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 accent colors. We just need to keep them in the same ratio. Let's consider this color palette. We might want to use these light neutron color and this blue primary color mostly in our design. Then both of them should take 60 percent of our ratio. These two colors are now going to be our secondary colors, so they take 30 percent of our ratio. Last but not least, these two accent colors should take 10 percent 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 percent 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 am 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 live 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 variance for different parts of your design and compare them with each other in terms of content 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 4-10 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 sole designer. 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. Why do you think blue/light/ 2 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 had a primary color, and three shades of this color for different states of your elements, like default, active, pressed, etc. 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. No matter who uses our design system, whether that person is a color blind 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 gradients. 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 1st color and I'm going to change it to blue, for example, this blue. Now I'm going to show you a bad example. Let me select the 2nd color and change it to, for example, 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 a 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 and I recommend that you should use that too, because it's so simple and it's going to make your life much easier. First, select your 1st color, copy the hex color code, and paste it for the 2nd color. 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. 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 these random button and Coolers creates random gradients for you just like that. The other thing you can do is use monochromatic color harmony. 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. 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 design just like everyone else. Do you remember the example about semantic colors? This is all about color accessibility. Here we have three profile images with the 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 see this 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 cannot distinguish hues. 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. Protanopia colorblindness. People with these color vision deficiency perceive red colors as darker colors than normal and usually red becomes a dark green. 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 monochromacy or BCM for short. People with BCM can't 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. 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, AA for minimum contrast or AAA for enhanced contrast. The AA level requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large or bold text. On the other hand, the AAA level requires a minimum contrast ratio of 7:1 for normal text and 4.5:1 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 Coolors for both creating color palettes and checking the contrast ratio. Let's give it a try and see how it works. Go to coolors.co/contrast-checker. Here, we should specify a background color, and 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 this color combination works well for both small and large text. Now, let's check 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 1, Stark. It's a Figma, Sketch, and Adobe XD plugin. It lets you check your color contrast ratio and simulate different color vision deficiencies. You just need to select an artboard and run the plugin and Stark handles the rest. Number 2, Contrast. It's a Figma plugin that lets you check the contrast ratio of your colors. Unlike Stark, which lets you 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 design to find text contrast issues. Number 3, whocanuse.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 background's color, then we set our text color, and specify the font size and weight. Here we can see the contrast ratio, which is quite high, and a grading which is AAA. Additionally, we can see how different people can process this color combination, so we have the Regular Vision, the most popular color blindness deficiencies, and some other vision problems. We also have the situation or vision events, which is quite interesting because we can see how accessible our color combination is by simulating the effect of direct sunlight, a night mode on a phone or 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. 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, by your flowers' colors, or even by your personal item. I'm going to ask you a question. What color harmony do we have here? You're right. Complementary. What about here? If your answer is monochromatic, you're 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 this 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 Muzli. You can go to colors.muz.li, 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 going to show you some useful color palette generating websites. Are you ready? Let's get started. Number 1, Coolors. 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 too. 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 palette 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 a 2nd color. It's fun, isn't it? I should mention that now, only the best matching colors are picked 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, lock it, 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. But what if you want to create a color palette using a specific color harmony? Don't worry, you can do that too. 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 luminance 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 head over to the Explore gradients section and you can find countless gradients for your projects here. Let's talk about the 2nd tool you can use to create your own color palettes, Mycolor.space. It's another great website that gives you all the colors you need based on your primary color. 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 trends section, you can discover current color trends in different industries like fashion, graphic design, illustration, etc. Under the accessibility tools tab, 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 Khroma 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 50 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 going to show you how you can create a color palette in order to apply colors to a landing page. If you're not sure how you can come up with the primary, the secondary, and the accent colors, don't worry. I'm going to walk you through all the required steps to create a beautiful and harmonious color palette. Also, I will show you how you can apply it to a landing page. For this project, I already designed a landing page in Figma. What I want you to do is download the landing page starter file from the resources section and import it to your Figma dashboard. 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. We're going to use it to apply all the things you learned so far to a real-world project. 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. Let me zoom in. There we go. Here is a concept project that I designed for this exercise. As you can see, I prepared this in gray scale color mode except for the logo and images, those are colorful. This landing page is for an imaginary company called Draft, and they provide online insurance services to entrepreneurs. Everything is going to be done under an application called Draft. Let me preview it so that we can see the whole landing page. 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. On the right side, we have some cards and also this mark up. Now I'm going to scroll down. Here is the clients section. 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 are going to focus on colors. At the bottom, we have an Explore All button. 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. We have some images and the content on the right side. Let me scroll down. This section is the CTA section. This is where we ask the user to install the app on their phone. Let me scroll down. Last but not least, we have the footer. As you can see, we have some categories, some links, the contact information, and also a short description of Draft. We have a Call to Action button here as well. At the bottom, we have a copyright disclaimer and the social media icons. Let me tell you what we are going to 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 Coolors that I already introduced to you. Let me go ahead and click on "Generate". What's the first step? You're 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. 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 we use 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? First, let's think about the characteristics of this brand. 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. 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. I think we could use blue for the primary color. Cool. Now let's go ahead and choose our primary color. But what kind of color harmonies should we use? Since we don't have any illustrations and I don't want to get high contrasting 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. Here we've got different kinds of blue. I'm going to select one of them and modify it manually to get my primary color. 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. This blue is cool; however, it's too bright. So I'm going to decrease the brightness from 85 to around 30, maybe 31. The saturation is good. Maybe I can increase it to 84. Perfect. It's cool. 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. I like this light blue color as well. I'm going to lock it too 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 227 is good. As you can see, the saturation is set to 78, and I'm going to increase it to get a saturated color. Eighty-seven looks good. But what about the brightness? It's too dark. Let me increase the brightness too. 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. 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. 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. I'm going to make it desaturated a little bit. Let me set it to 88. Also, I'm going to change the base color. One hundred sixty-one 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. Now, I'm looking for two neutral colors. I don't like these colors. What I'm going do is copy the primary color code here. I'm going to go to hex. I'm going to copy it and let me paste it here. We've got the primary color. Now using the color picker. I can create a tone here to get my desired neutral color. 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. The saturation is good; however, I'm going to make it a little bit desaturated. Let me decrease the saturation amount to 20. Also, for the brightness, I'm going to increase it to maybe 44. It looks good. Nice. Let me lock it. Now I'm going to add one more neutral color, but a light one. If I hover over this section, I can click on this "Add Color" icon. Let me paste that color code here, just like that. Now I'm going to modify the color. Let me go to the HSB color model. The hue is going to be the same, but I'm going to make it desaturated to create a tint of this color. Let me make it desaturated like this. I think if I decrease it to six, it would be great. Also, I'm going to increase the brightness to 99. 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 are going to use that for our cards. Let me change it to white. Perfect. Cool. Our color palette is ready. Now it's time to export it. 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 exported color palette here. There we go. I'm going to enlarge it. Cool. Let me move it here. All right, guys, that's all for the first part of this project. In the next video, we will start applying our colors to our design. 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 are going to use the 60-30-10 rule. Let me go ahead and remove this text. What colors are going to be our primary colors in terms of ratio? This blue is definitely going to be our primary color. These two colors are also going to be our primary colors in terms of ratio. The first three colors are going to be applied to 60 percent of our design. These three colors are our secondary colors and are going to be applied to 30 percent of our design, and last but not least, the screen is going to act as our accent color, and it covers 10 percent of our design. 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. Without further ado, let's get started. First, let's start with the background. For the background, we can use one of these three colors. I think this light neutral color is going to be a good option for our backgrounds color. I'm going to go ahead and copy its hex color code, and let me select my art board and paste it for the background. Also, I need to apply to other sections as well. 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. As you can see, for the testimonial section, we need to use a dark background. Why? Because here, we have a dark shade. So which color can be used for this section? I think one of our secondary colors would be a good option. I'm going to go with this middle blue, let me copy its color code, and I'm going to apply to this background. Cool. As you can see, we have a good contrast between the cards and our background. Cool. 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. Let me copy the hex color code and I'm going to apply to it, just like that. There we go. Our backgrounds colors have been applied successfully. Now it's time to move on to other sections. Let's start from the top. For these links, I'm going to use my secondary color, this one. I'm going to copy the hex color code and let me select all these links, and also this arrow 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 going to 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. 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 accent color, and let me paste it here. For the text, I'm going to use white for now. 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. Since we need to be consistent throughout our project, I'm going to use the same color for this text as well. Let me copy it, and I'm going to paste it for these two text layers. Here as well. Also, we are going to apply the same color to all these texts layers. 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. The cards are going to 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 text layers, and also this Explore button. For these icons, as you can see, we have three different shades, therefore, we need to use three different colors. I'm going to use our secondary and accent colors for these icons. Let me go ahead and copy the color code of the 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. I'm going to select the first one and paste the color code. There we go. We applied the first color. Now it's time to apply the second color, which is this one. I'm going to 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 going to be this one, so let me paste it. There we go. They look amazing already. For the last color, I'm going to use the accent color. 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? 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. 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 these color palettes, and also we used the 60-30-10 rule. Now it's time to modify our Explore All button here. For this button, I'm going to use our accent color, which is this green. For the text and this arrow icon, I'm going to use white for now. What about here? The cards are okay, but we need to modify the color of these text. I'm going to select them and let me apply our primary color to all of these texts. For this text, I'm going to use the neutral color that we created before. Let me go ahead and copy its color code. Now I'm going to apply the same colors to all these content. Let me fast forward this process in order to save your time. It's done. Now, let me modify the color of this large title. I think our light neutral color would be great for that. Let me choose that. What about these quotation mark? Well, obviously, we need to use our secondary color for it. 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 percent. 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 tints. 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 percent. For the second one, I'm going to use our blue secondary color and I'm going to decrease the opacity to 20 percent as well. For the last one, I'm going to use our accent color, and also decrease the opacity to 20 percent. 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. 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. 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. 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. Last but not least, we need to apply colors to our footer as well. For this text and these categories at the top, I'm going to use our dull neutral color, which is this one, so let me choose that. Cool. As you can see, it's been applied to all these text 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. For these links, I'm going to use our primary color, this one. What about this divider, this disclaimer, and also this social media icons? I think if we use our dull neutral color, it would be great, the one that we used for this text. I'm going to copy it and paste it for all these elements, and also for these icons. As you can see, we forgot to change the color of this word, draft. I'm going to use our secondary color for it. Cool. Our learning page is ready. We successfully created a color palette and applied all of those colors to our design according to the 60-30-10 rule. Let's preview it. Our hero section 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, the testimonial section looks clean as well. For this section, we used the primary color and some tints of our secondary and accent colors. For this section, we used our primary color as our background and a neutral color for our foreground content. Last but not least, we used our primary, secondary and accent colors for the footer. Everything looks cool. However, now we need to check our colors and see whether they pass the contrast ratio test or not. I'm going to start from the top and then move on to other sections. First of all, let me select one of these links, for example, about, and then I'm going to right-click on that. I'm going to run the contrast plugin. As you can see, these color passed the contrast ratio test for double a and triple a 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. As you can see, although it looks very good on our interface, it failed the contrast ratio test. 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 text color. Instead of white, I'm going to go ahead and choose our primary color for these texts. 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. Cool. But what about here? If I select these texts, you can see that it pass the contrast ratio test. What about this Explore button? It also passed a contrast ratio test. 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 and for these texts as well. But what about here? Let me select it. As you can see, it pass the AA 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. I'm going to select my artboard. It's not gray scale mode anymore. 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 gray scale mode again. We have different shades of gray so the visual hierarchy looks very good. We have good contrast ratio here for our content and our buttons. 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, for example, red blind. We have good shades as well, so everything looks clean to people suffering from these color vision deficiency. Last but not least, let's check it for another color deficiency. For example, blue cone monochromacy. Clearly, we have grayed shades, so people won't face any problem while using this website. Let's preview our learning page for the last time. Can you see how clean these learning page is? Colors are harmonious and also accessible to everyone. All right, 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 import it to your Figma dashboard. 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. Let me open it up. This is the project that we had already prepared for you. We are going to create a color palette step-by-step and apply it to our design according to the 60-30 and 10 rule. If you're ready, let's get started. As you can see here, I prepared an artboard, called Colors, for you with many swatches. For example, we have primary and neutral semantic chart and data visualization. We need to modify the color of all the swatches, but first of all, let me show you the project. The project we are going to work on is a personal finance application and it lets users to manage their finances easily. I designed all the pages in gray scale color mode that we could easily distinguish the shades and apply our colors to all these elements. 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 the username, and password, and also an error here. On the third page, we've got this warning icon as you can see, let me zoom in that you could clearly see that, and a CTA or call to action, and some links. On the homepage, we have a large title, two different credit cards, and a dialogue that presents the last three transactions to the user. Last, but not the 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. Also, here, we have the data related to this pie chart. 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 are not going to use Coolors or any other websites to come up with our color palette. I'm going to 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 are 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. 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 Fill section and click on this color to open the color picker. As I mentioned, I'm going to use blue as the primary color. I'm going to move the slider to the blue section. 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. Let me decrease the saturation from 94 to around 90 or maybe 89. It looks good. Also, the brightness is going to be around 70 or maybe 75. It looks nice. Our 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. I'm going to select all of 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 are going to need that for our texts layers. First of all, let me increase the intensity or saturation of my color from 90 to100 just like that. Also, I'm going to decrease the brightness to add black to my base color. 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. It looks nice. Our second color is ready as well, but what about the last color? This one is going to be used as our accent color so it needs to be vibrant and bright. Let me go ahead and modify the saturation and the brightness. Since this color is somehow bright, we can easily make it brighter if we set the saturation and brightness to 100 percent. Now, we need three neutral colors. Let me select this 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. If I just move my color picker to the gray area, I can create a tone. As you can see we are getting a dull color, and that's exactly what we want, but let me make it a little bit brighter by increasing the brightness. Right now, the brightness is set to 43. Let me set it to maybe 49. It looks good. The second neutral color is going to be a tint of our base color so we need to add white to our base color. Let me move to the white section just like that. I'm going to set the saturation to five and the brightness is going to be 100 percent. As you can see, we've got a great neutral color. The last neutral color is going to be pure white. Why do we need that? Because we are going to use it as a foreground color, for example, for icons and also for some of our texts colors. I will show you later. 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. For these two states, we need to have semantic colors. Let me go ahead and select the first swatch here. I'm going to go to the Fill section to open up our color picker. Since we need a red color, make sure to set the H, 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 are 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. 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 tints of this color. First of all, let me select the second swatch. I'm going to use this color, then, I'm going to add white to it. 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 tints would be very useful in order to create a good contrast ratio between your foreground and background elements. 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. For warning, as you know, we need to use yellow. Let me go ahead and choose a yellow using the color picker. 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 two tints, I'm going to create one tint 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. 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. Let me add white to it, just like that. The saturation is going to be 40 and the brightness is going to be 100. Perfect. Our semantic colors are ready as well. But as you can see, we have one more section to fill, and that is 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 colors because we need to present data in a way that are distinguishable and clear to recognize. If you remember for chart and data visualization, we could use three different color 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 categorical color scheme, we could come up with high contrasting colors that the users could distinguish between them easily. 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. Let me decrease the saturation from 90 to around 80 or maybe 82. It looks good, and also, I'm going to increase the brightness from 73-78. Cool. But what about the next color? 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. Let me go to the green section. 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. Cool. It looks nice. Now, let me go ahead and select my third swatch, and for this one, I'm going to use yellow. 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 it 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. 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, the brightness is 63, so we made it darker. For the next one, the brightness is 97, so we made it lighter. This is why I said the order of these colors matter because if someone with, for example, monochromacy vision wants to process these colors, they can easily distinguish between them. 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 to 60 or maybe 62, something like that. The brightness looks good. Last but not least, for this one, I'm going to use a dark blue color. Let me move the hue slider to the blue section. 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, 36 looks good. Cool. Our chart 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 artboard, and I'm going to right-click here to run a plugin that I already showed you in previous videos, it's called color filters. If I go to colorblind simulations, I can choose monochromacy for example, and right now, you can see that the value of these colors changes continuously and we don't have two dark shades next to each other. For example, 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. That's all for the first part of this project. I hope you enjoyed it and I'll 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. If you're 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. 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. Let me use the eyedropper and choose our light neutral color, just like that. If you don't know which colors are corresponded to which elements, you can click on this icon to find the particular elements that these colors are used for. For example, I'm going to click on that. Here, you can see that we have a drop shadow using these color. 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. Let me modify its color, just like that. But what about the text fields? The text fields are going to be white, so we're going to leave them as they are. However, the elements here like these icons and these text layers need to be changed. For these icons, I'm going to use our accent color. Let me go ahead and modify their color just like that. But what about these two text layers? For these text layers again, we need a dark shade. But instead of using our primary color, I'm going to use our neutral color, this one. Let me go ahead and choose our neutral color, just like that. Our 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 percent opacity. For this color, I'm going to use our neutral color again. Let me decrease its opacity to 50 percent for this one as well. Let me just do the same process. Now our text fields are ready. But there are three more elements that we need to modify, this forgot password link, this CTA, and this link. First of all, let me select these two links and I'm going to use our accent color for them. 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. It's going to 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. I'm going to choose the shadow layer. Let me choose the same color and decrease its opacity to 32 percent. 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. I'm going to fast forward this process to save you some time. Our sign-in pages are ready. I applied the same colors to all those elements except this error message and this warning icon, because we are going to do that together. For this error message, we need to use a semantic color. Let me go ahead and choose the semantic color. I'm going to copy the hex color code and paste it here. 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 this warning icon, as you can see, we have two different colors. We have a light tint and a black shade. For this light tint, I'm going to use our light tint that we created here. I'm going to copy the hex color code and let me paste it for the circle. For these two elements, I'm going to use our dark shade, this one that we created before. 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 tints of your semantic colors. Our sign-in pages are completed perfectly. Now we can move on to the next page, which is our homepage. Here we have many elements. We have a title, two credit cards, a dialogue, and some transactions. Let me start with the title. Which color should be used for it? If your answer is the black shade of our primary color, you are 100 percent right. We need to use colors consistently throughout our project. I'm going to copy this color and let me paste it for this title. 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 rectangle seven. I'm going to choose that. Let me use our accent color for it. There we go. These texts are going to be white and also this 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. This one is going to be white. It looks great. But what about this card? As you can see here, we have a tint of our color. It's a little bit brighter. The color we are going to use is going to 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 two, to 50 percent. If I increase it to 100 percent, 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 percent. 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. 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 this 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 percent. Now we need to move on to our elements. As you can see, these squares don't have a very black shade like this black shade, as you can see here. Therefore, I'm going to use our accent color for them. If you compare these elements' colors with each other, you can see that all of them use the same shade except this one. If I just select my homepage artboard, I can easily choose this color and I can use the accent color just like that. All of those shades have been changed immediately. But what about these dates? For these dates, we're going to use our dull neutral color. I'm going to select all of them, and let me go ahead and choose our dark neutral color, just like that. 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. 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. There we go, the color has been applied to all of them. Here we had a pie chart, and for this charts we need to use a chart and data visualization color scheme. Therefore, we are not limited to use our monochromatic color scheme anymore. All right. Let's start with these large shape. I'm going to select that, and I'm going to choose our blue color here. 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 layers list, you can modify the color of our drop shadow as well, just like this and decrease the opacity to 30 percent. Now, for the next shape, I'm going to use green. Make sure to keep the order the same, for example, don't use red and place it next to our blue, because people suffering from color vision deficiencies may face difficulties in that case. 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 percent and 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. Now let me modify the drop shadows color as well, and decrease the opacity to 30 percent. The next shape is going to use our red color, also the drop shadow needs to be red with a 30 percent opacity, and last but not least, let me use our last color and we don't need to have a drop shadow here. It looks very good, doesn't it? Now it's time to apply colors to these text layers. Here we have two different shades. One is too dark, and these two are a little bit brighter. 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? But what about these data? For these circles, we need to use the same colors that we used for our chart. So this one, which is the biggest one is going to be blue. I'm going to select this circle and just use this blue and this line is going to use the same blue as well. For the second one, which is the next big expense, it's going to be yellow, so I'm going to use this one, the same yellow here. 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. This one, online shopping is going to 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 this color. But what about these texts layers? For the titles, for example, rent, groceries, restaurants, etc. I'm going to use our dark primary color, the one that we used for this amount, so let me use this one. For these transactions and these amounts, I'm going to use our dull 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, don't they? The last one is our CTA, the Download Statement button. 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 percent opacity. 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. Here is our first sign in page, this one is the second sign in page with these 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. Last but not least, for the finances screen, since we had a categorical chart, we used a categorical called color scheme for them. We are almost done. The only thing we need to do now is validate our colors based on color contrast ratio. Let me select the sign in title, for example, and I'm going to run a plugin called contrast, the one that we used before. Just like that, as you can see it passed all the contrast ratio tests for all levels, the double A and triple A levels. What about this text? It passed almost all tests, however, it failed for the triple A level for normal text, but it's totally fine because it already passed the double A level. What about this one, our 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:1, you can see that it's not that low and it's acceptable to use this color for this text layer, why? Because for this text layer, we used a semi bold weight. If I change it to regular, now, it's not acceptable, but for semi bold or bold text, this color is acceptable as long as the contrast ratio is not less than 3.1:1. 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 text 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 dull neutral color against our light neutral color, it again passed all the test. Let me check the contrast of these text 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, for example, these ones because we already checked them. All right guys. That's all for this video, I hope you enjoyed it and I will see you in the next video. 33. What to do next?: All right 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, you can check out my Instagram page where I post new design techniques daily. Last but not least, I'd like to thank you for watching this course. I can't wait to see your color palettes and artworks. See you. Bye.