Meagan Fisher: As you can see from this example website created for an imaginary sunglasses brand, color choices are among the most impactful decisions you can make about a design. They can have a big influence on people’s perception of your product or website, and greatly enhance or hinder the usability of your experience.

Hi, my name is Meagan Fisher. And in this video, we’ll focus on three key aspects of how to choose an effective color palette:

1. Color as it relates to brand.
2. Color and its impact on accessibility.
3. Color conventions to follow for improved user experience.

A color palette can be defined as a small and cohesive set of colors used exclusively within your design.

As a best practice, keep it simple and work with no more than three to four colors in your designs.

Often, I’ll do an exercise where I describe the personality of a design in words first and then consider what color palette creates the feeling of that character. Experimenting with this can be one of the most fun parts of a design project.

Tip: See from these examples how the use of color tells a particular story about these brands.

As a general rule, darker and more muted tones convey more authority, trustworthiness, and quality. That’s why we often see palettes of navy, maroon, and black from institutions in finance, education, and government. Brighter tones convey more energy, happiness, and approachability. Note how the use of brighter color palettes can make a product feel more youthful, fresh, and vibrant.

Tip: The most important criteria any palette must meet is that it must be accessible.

Low contrast colors make it difficult for users with vision differences to engage with your designs. For example, someone with a visual impairment may struggle to make out light texts on a white background, or for users who are colorblind, certain colors may blend together in a way that prohibits readability.

Best Practice: That’s why it’s always important to check your colors in an accessibility color checker.

Simply add your color palette to the tool, and it will tell you if your choices are accessible to a wide range of users or not. Choosing to skip this step could result in a design that’s frustrating or even impossible for some people to engage with. If you haven’t already, I suggest watching my tutorial, Getting Contrast right in Your Typography to learn more about this topic.

Tip: Another factor to consider when making color choices — be careful of breaking industry standard color conventions.

For example, gray indicates something is disabled. Red indicates an error, or that something is required. Yellow often indicates caution or alerts. One primary color should be used for all interactive elements.

Let’s look at each of these in more detail.

Best Practice: First, be sure to avoid making your actionable items gray.

Often, designers will be tempted to style elements, such as buttons, links, and alerts using gray for various reasons. In this case, the designer chose gray for a button background because that is the primary color for the company’s brand. The problem is that gray is also the color of disabled buttons, which could lead to the user ignoring it. Compare these examples to see how the use of an impactful color can make a difference in how actionable the user interface feels.

Best Practice: Red is another color that should be used sparingly.

As you can see in the example here, if you use this attention-grabbing color throughout your design, it will blend with important error messages, which are also typically in red.

Best Practice: Finally, be consistent with the color you choose for interactive elements.

If different buttons and links use different colors, some of them may be overlooked or seem static.

Compare the first design, which uses a variety of colors for clickable elements, with one that stays consistent throughout. You can see how the clickable elements are easier to spot in the second version.

For more guidance on color accessibility, conventions, and the role it plays in a brand’s personality, check out the Resources section of this video.

And there you have it, three tips to help you create an effective color palette in web design. Thanks for watching, and be sure to check out our other Take 5 tutorials, as well as the entire course catalog here at Gymnasium.