How to pick the right colors for your website or app | UI/UX design tips

let's talk about colors now say you are designing a product like an app or a website and you wonder how can you start picking the right colors for your product to be honest i struggle with this as well so in this video you'll learn how to create a color system that is scalable accessible and also harmonious i will also share some helpful resources to you in terms of generating color contrast color palettes how to look for inspiration and also what to look out for when picking the right color be sure to stick to the end because i'll be sharing with you a checklist on everything that we just went through so first of all how do you pick the right color for your target audience there are two things here the first thing is the color psychology understanding color psychology will help you pick the right color for brand so what i will do is i will google color psychology so in the search results you will see a list of all the colors and what they mean and how these colors affect our human emotions so for example if your brand is about excitement it's about being bold it probably is a great idea to pick the color like red because that's how your color evokes emotions and human being the second thing that i would look out for when choosing the right color for my target audience is actually cultural color meanings different colors have different meanings in different countries and cultures so before you choose a color be sure to check out their cultural color meanings on this site here i'll leave all the video links in the description so that you can refer back later for example if you're choosing red for your brand color red means good fortune in china but in south africa it means something entirely different next up allow me to introduce the 60 30 and 10 rule this rule is actually used in interior design and i think this is something that you could also use in terms of ui it is recommended that 60 of the ui uses the dominant color whereas 30 of it uses the secondary color and 10 uses an accent color so you don't have to follow this strictly just use it as a guideline so let's now start talking about how you can pick the right color palette the first thing i will always do is to pick a primary color so this is a color that is displayed most frequently across your product if the brand personality is of a serious tone then you can pick a color palette that is less vibrant and playful now how many primary colors do you need i would recommend one to two primary colors but let's check out a real example here when you look at atlassian design systems primary color palette they have three colors on their primary palette this is the primary color that is carried upon all their screens keep in mind that this is the color that is going to be 60 of your ui so pick wisely now that you have your primary color it's time to choose an accent color so the guiding principle is if you want people to pay attention on a certain component then it is a great idea to use an accent color on that component itself so people's eyes just naturally drawn to it so let me just copy this hex code of atlassian's primary color and i will launch adobe color here so make sure you're on the color view tab i will pick the base color and paste the primary color that we just copied it will automatically generate a color palette that applies the color harmony rule for example there are like nine color harmony rules here you can try out one other quick tip that i learned is that if you select your primary color and go to complementary color how many roll the color that complements your primary color can also be your accent color there is no right or wrong answer so just play around with the color wheel and see which one suits your brand more so right now i'm launching apple's human interface guidelines and based on the guideline it says that you can provide two versions of your accent color to make sure it looks good on both light and dark modes so this is something that you can take in mind as well if your app has lag in that mode or you have different backgrounds that complements the accent color then you can prepare a variant one is for light backgrounds and one is for dark backgrounds so now you have your primary color your accent color it's time for your secondary colors these are colors that could make your ui stand out or complement your brand or just to increase brand awareness and you could probably be thirty percent of your ui the number of secondary colors that i would recommend is three to five on adolescence design system the secondary palette consists of five colors and you can see the colors are pretty vibrant these are colors that are intentionally set to keep things fresh and interesting next up you will need neutral colors this is like the most important color palette of all neutral colors are essential in every single product so if you want to pick your own neutral color palette start with the darkest tone first and slowly work your way down in terms of opacity so for example if it's 100 black you can scale it down from 100 black to 90 gray and 80 70 percent 60 vice versa and this is how i usually go about setting my own neutral color palettes so if your neutral color is scaled down from black it can be a little bit boring so what i will usually do is i will add a tint of blue into my neutral colors so looking back at atlassian's design system example here they have split their neutral color palette into tree so they have the dark neutrals mid neutrals light neutrals i'll have like two or three dark neutral colors and then i will always have the lightest neutral colors the lightest neutral colors will be used for dividers borders backgrounds of your text and even for disabled buttons i can use a light neutral color as the button color so this is one of the tool that i use for generating pins and shades for example this is the color that i want to start from i click on this make tints and shades it's handy if you want to automatically generate your colors based on your darkness and lightness the next color palette that i will prepare is a semantic color it is actually colors for things like your alerts your warnings your checkboxes or any banners that you want to show information to people so what i will do is i'll usually have four semantic colors the first semantic color i'll have is red red is used to signify a negative state an error state or just simply danger for example when you're deleting your account it is great to have the delete button as read so that people know that oh this is a dangerous button and don't click on it unless you're really sure so the next semantic color i'll use is orange orange is for warnings it's to warn users like are you sure you want to do this and then we'll have green which is for positive states like payment successful or to tell people this is the correct answer and things like that and next color is blue i'll use blue for informative components for example i'm just showing users a banner or an alert to tell them something that is good to know but it doesn't signify that it's negative or positive people are already used to these four semantic colors so i would recommend you not to reinvent the wheel and make use of the four existing colors that people are used to so taking back to atlassian's design system here they have an extensive semantic color palette where there is blue neutral green yellow red and purple for different actions and different speeds so this is great if you have a product that requires all these colors otherwise if your product is rather simple with lesser screens then it's okay to just have four semantic colors next up we'll have an extended color palette based on your other colors that you have selected extended color palettes can be used on backgrounds hover state selected states or any other states that you would want to show and that doesn't belong in the primary secondary or accent color palette so for example if my primary color is blue and i want to have more tints and shades of blue and these are colors that make you still stick to the brand maintain consistency and still not clutter your interface so i recommend having an extended color palette to still keep things interesting and when it comes to how many colors should you have in your extended color palette i will usually have four to five at least based on what's the base color that i already have and this is really dependent on what you're using it in your ui next up let's talk about accessibility this is something that we should not overlook we follow the wcag accessibility guideline which is actually called web content accessibility guidelines so the general rule of thumb is your text font should be above a certain range in different screen sizes and also the contrast between your text and the background in terms of the color should have a minimum ratio of 4.5 to one and how do you check all these things right so i'll recommend going to a tool like coolers.co and check your color contrast against the background color so let's try a darker color here and you can see that if we have a darker background color against a darker text your color contrast is reduced it will just tell you that you know this contrast is really poor and it's time to fix it so there is a minimum that you should comply which is actually 4.5 like this but as you can see the accessibility of this is still not so good so i would always recommend to go a step beyond and pick a color contrast that is in the green range if possible so if you want to know more about the guidelines and how it works there is a long list of all the detail requirements in terms of this wcag guidelines for example if you're using figma and you want to check your color contrast right on figma you can launch a plugin called a11y color contrast checker which is actually by microsoft for example if you're using your phone or a product in a darker environment versus a bright environment in daytime your contrast is going to look visually different so be sure to check that as well when it comes to dark mode remember that you can always have another variant for each color in whatever palette that you have to cater for dark mode apple actually encourages this because the same color does not necessarily look the same on the light background and the dark background it's because our human eye perceives color a little bit differently so for example airbnb has a very minimal color palette as you can see on this screen the images stands out the brand color stands out and i know this is actionable because of the accent colors that they use sometimes they also have gradient colors for buttons to make things more interesting for people and basically with lesser colors on the ui it helps your brand stand out more on youtube which is the interface that you're looking right now they use very minimal color palettes to not drive users away from the call to action so as you can see besides the youtube logo that stands out the search bar isn't right in your face call to action is going to be the subscribe button down here and also maybe the shop now for ads and other youtube videos that they want to recommend you if you use too many colors in your interface then everything becomes a priority and users don't know where to look so it's always great to have minimal colors and let the real call to action stand out more now i'm going to share a few tools for you to generate your own color palette ideas and one of it that i really love is my mind so on this side you will find a list of color combinations that are aesthetically pleasing and the next one will be for example if you're on dribble you can actually filter your dribble by color so say if it's uh you want a great color you can actually filter that and they will show you results with that color only another way is if you have a photo and you want to extract the colors from that photo to generate a palette you can do that on adobe color so on adobe color go to extract theme drag and drop an image and it will show you a list of color palettes with that image in there so this is a really quick hack to get the colors from an image and on pinterest you can of course search for something like color palettes and it will basically recommend you a list of colors if you want to have a quick color generator you can go to sites like coolers where they will show you trending color palettes or any other color palettes that you can generate on the side you can just tap on space bar to generate different colors you can also view them in color blindness mode another way to generate quick color ideas is for example on lapa ninja i will go to their colors and i will just select a color i'll have a list of landing pages that uses red as their primary color and it's just a great way to look for inspiration right [Music] so combining all these resources tips in this video i hope that it will help you generate your own color palette that you are happy with that is on brand that is consistent scalable and most importantly accessible and harmonious if you have any other content that you would like to see let me know in the comment section below and i'll see you in the next video [Music] you

Channel: Rachel How

Views: 7,654

Keywords:

Id: ewRYw4pnKQU

Length: 13min 21sec (801 seconds)

Published: Sun Sep 05 2021