Designing Scalable and Accessible Color Palettes

Designers can create harmonious color palettes by understanding color psychology, cultural meanings, and following the 60-30-10 rule.

### Designing a Color System: Tips for Scalable, Accessible, and Harmonious Products
* 🎨 When designing a product, it's crucial to create a **color system that is scalable, accessible, and harmonious**, which can enhance **user experience and brand identity**.
* 🧠 Understanding color psychology is essential; for instance, using **red can evoke excitement and boldness**, making it suitable for brands aiming to **convey those emotions**.
* 🌍 Additionally, cultural color meanings vary globally, so researching these meanings is vital before finalizing color choices, as **red symbolizes good fortune in China** but has different connotations in **South Africa**.
* 📏 The **60-30-10 rule** suggests that 60% of your UI should be the **dominant color**, 30% a **secondary color**, and 10% an **accent color**, serving as a guideline for **balanced design**.
* 🎨 Selecting one to two primary colors is recommended, while accent colors should **draw attention to important components**, and tools like Adobe Color can help **generate harmonious palettes**.
* ⚖ Accessibility is paramount; adhering to WCAG guidelines ensures **sufficient contrast between text and background colors**, ideally achieving a **contrast ratio of at least 4.5 to 1**.
* 🛠 Utilize various tools, such as Coolors and Dribbble, to explore color palette ideas and inspirations, ensuring your final palette is **aesthetically pleasing and functional**.
* 🌈 By combining these strategies, you can create a color palette that is not only **visually appealing** but also aligns with your brand's goals and **enhances user interaction**.

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 with 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 color psychology. Understanding color psychology will help

you pick the right color for your 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 a color like red because that's how your color evokes emotions in human beings. 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-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 across 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 to a certain component, then it is a great idea to use an accent color on that component itself, so people's eyes are 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 rules. For example, there are like nine color harmony rules here you can try out.

Another quick tip that I learned is that if you select your primary color and go to "complementary color," 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 into mind as well. If your app has light or dark mode, or you have different backgrounds that complement the accent color, then you can prepare a variant: one for light backgrounds and one 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, complement your brand, or just increase brand awareness. They could probably be 30% of your UI. The number of secondary colors I would recommend is three to five.

On the 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%, 60%, and vice versa. 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 three: 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 tools that I use for generating tints 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 palette. 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 dangerous. For example, when you're deleting your account, it is great to have the delete button as red 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 the 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 states. So this is great if you have a product

that requires all these colors; otherwise, if your product is rather simple with fewer 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 states, 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 keep things interesting. And when it comes to how many colors should you have in your extended color palette, I 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 for 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 color, should have a minimum ratio of 4.5 to 1. 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 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 with, 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 going a step beyond and picking 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 detailed requirements in terms of this WCAG.

Guidelines, for example: If you're using Figma and want to check your color contrast, launch the a11y Color Contrast Checker plugin (by Microsoft).  For example, if you're using your phone or product in a darker environment

versus a bright environment, the contrast will look visually different. Check this for dark mode. Remember, you can have a variant for each color in your palette to cater to dark mode. Apple

encourages this because the same color doesn't look the same on light and dark backgrounds. Our eyes perceive color differently. For example, Airbnb has a minimal color palette, as you can

see. The images and brand color stand out.  The accent colors are actionable.  Sometimes they use gradient colors for buttons.  With fewer UI colors,

your brand stands out more. YouTube uses a minimal palette to avoid distracting users from the call to action. Besides the YouTube logo, the search bar isn't

in your face. The call to action is the subscribe button, and maybe the 'Shop now' for ads and recommendations. Too many colors make everything 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 that I really love is my

mind. So on this side, you will find a list of color combinations that are aesthetically pleasing. The next one will be, for example, if you're on Dribbble, you can actually filter your Dribbble 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 Coolors, 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 the 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' section and I will just select a color. I'll have a list of landing pages that use red as their primary color, and it's just a great way

to look for inspiration right [Music] So, combining all these resources and 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, 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]

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

Rachel How

Choosing the Right Colors for Your Product

Importance of color selection in app/website design.

Creating scalable, accessible, and harmonious color systems.

Considering color psychology and cultural color meanings.

Example of cultural differences in color interpretation (red).

Applying the 60-30-10 Rule and Choosing a Color Palette

Using the 60-30-10 rule for dominant, secondary, and accent colors.

Selecting one to two primary colors based on brand personality.

Using accent colors to draw attention to specific components.

Choosing three to five secondary colors to enhance UI and brand awareness.

Creating Neutral, Semantic, and Extended Color Palettes

Importance of neutral colors and creating a palette from darkest to lightest tones.

Developing a semantic color palette for alerts, warnings, etc., using red, orange, green, and blue.

Creating an extended color palette for backgrounds, hover states, etc.

Following WCAG guidelines for text font size and color contrast.

Checking color contrast in different environments (light/dark mode).

Airbnb's minimal color palette, emphasizing brand color and actionable accent colors.

YouTube's minimal palette to avoid distractions and highlight call to action.

Tools and Resources for Color Palette Inspiration

Using websites like MyMind for aesthetically pleasing color combinations.

Filtering Dribbble by color to find design inspiration.

Extracting colors from photos using Adobe Color.

Using Coolors for quick color generation and color blindness mode.