Color

Color in Design

Choosing colors for a design project can be pretty challenging and time-consuming when you’re working with a client. In this lesson, we’ll learn some useful terms + tips to create a color scheme for a website.

Source: DesignMantic

When you split a color wheel in half, you get warm colors on one side and cool colors on the other.

Warm colors:

• Warm colors are your reds, oranges, and yellows.
• They’re often associated with positivity, energy, and enthusiasm. 

Blue colors:

• Cool colors are your blues, greens, and purples.
• They’re often associated with peace, tranquility, a sense of reservedness.
• While warm colors are more energizing, cool colors are more calming.

Neutral colors:

• Neutral colors are your whites, blacks, grays, and browns.

RGB:

• The RGB color method is used to represent color on the web. It stands for red, green, and blue.
• Colors are written as “rgb(r,g,b)”, with each value representing the shade or intensity of the hues that make up a particular color.
  • For example, rgb(138,43,226), which gives us a blueviolet color, is made of: red = 138, green = 43, blue = 226.

Source: Rapid Tables

For your reference,

• rgb(0,0,0) = black
• rgb(255,255,255) = white
• rgb(255,0,0) = red
• rgb(0,0,255) = blue

Hex:

• Hex codes are another way that colors are represented on the web. They use a hexadecimal system to identify colors.
• Colors are written as “#RRGGBB”, where “RR”, “GG”, and “BB” represent the intensity of red, green, and blue.
  • “#8A2BE2” is also blueviolet, where red = 8A, green = 2B, and blue = E2.

We don’t really need to dig into how these color codes are derived, but if you’re interested, you can read a little more about how RGB and hex codes work here. Later in the course, we’ll look at some tools to help us select colors.

Types of Color Schemes

Source: Upwork

Monochromatic Color Schemes

Source: GCF Global

• Monochromatic color schemes are made up of one color in various shades and tints.
• Because monochromatic schemes share the same base color, it’s pretty easy to achieve color harmony and cohesiveness. However, monochromatic color schemes can also get monotonous.

Website example with a monochromatic color scheme:

Source: Orbit

Complementary Color Schemes

Source: GCF Global

• Complementary color schemes consist of two colors that are on opposite sides of the color wheel.
• Complementary colors are great for creating contrast in your color scheme.

Website example with a complementary color scheme:

Source: Visme

Analogous Color Schemes

Source: GCF Global

• Analogous color schemes are made up of three colors that are right next to each other on the color wheel.
• This helps to create cohesiveness and harmony without the monotony of monochromatic schemes.

Website example with an analogous color scheme:

Source: Digital Sypnosis

Triadic Color Schemes

Source: GCF Global

• Triadic color schemes consist of three colors that can be connected by a triangle on the color wheel.
• It can be trickier to achieve color harmony in triadic color schemes as you’ll need to be careful to pick shades of colors that don’t clash with one another. A good tip is to select one color to be the dominant color, then treat use the other colors as accents (use them sparingly) or select lighter shades. This can prevent the colors from competing with one another in your design.

Website example with a triadic color scheme:

Source: Digital Sypnosis

Creating a Color Palette & The 30-60-90 Rule

When creating a color palette, start with a dominant color, 1-2 secondary or accent colors + neutrals. Structuring your color scheme like this can help you control the usage of your colors to avoid using one color “too much” or another one “too little”.

But how do you know how much is “too much” or “too little”? There is no set rule here – no right or wrong – but a general rule of thumb used in design (including interior design) is the 30-60-90 design rule:

• 60% of your website should be the dominant color
• 30% should be the secondary color
• 10% should be an accent color

Source: UI Place

Tips for how to use your color throughout your website:

• Select a secondary color that complements the dominant color, but is different enough to create contrast to give our eyes a break from the dominant color.
• Treat the accent color like a fun surprise here and there. It can be bold but used sparingly, or soft and subtle – just there to create visual interest.
• After selecting your dominant color, select a contrasting color to use for special elements you want to call attention to, like buttons. Take a look at how this website uses their accent color for the button, as well as how the entire design applies the 30-60-90 day rule.

Source: Flux Academy / Spendesk

Choosing Colors for Your Website

Okay, so you get the recommended structure for building a color palette, but how do you actually decide what colors to include in that palette? Start here:

1. Define your client’s brand personality and audience

If you’re working with a client who has an elegant, sophisticated brand, like a jewelry shop, then the colors of your website should reflect that brand personality. Vibrant colors like orange and yellow will make the brand seem playful and youthful, but pairing silver with a soft pink to represent elegance and love might be just right. On the other hand, if you’r designing a website for college freshmen, then vibrant colors would be really effective at portraying the fun, adventurous spirits of college kids. Know your audience as well.

2. Consider color psychology

Certain colors can evoke certain emotions when we see them because we’ve associated feelings, images, and customs with colors. Earthy colors like blues and greens can slow us down and make us feel at peace, but a disruptive color like red might signal danger and trigger a sense of urgency. As a designer, knowing how colors can instigate certain emotional responses can help you create a color palette that makes your audience feel the way you want them to.

For example, cooler colors are typically associated with tranquility while warmer colors are typically associated with energy. If you’re designing a website for a yoga studio and you want your audience to feel the way they would in the yoga studio, you might select greens and blues to represent peace and healing. But if you’re designing a website for a gym and you want your audience to feel energized, you might opt for reds and oranges.

However, I want to note that color is not the only element that affects your audience’s response to your design. While understanding the psychology of color is helpful, know that you’re not limited to their associations. To elaborate, you can still create an energetic design using purple even though it’s a cool color that is normally. Color is just one aspect of your design; you’ve got fonts, imagery, and all sorts of elements to play with.

3. Get inspired!

When I need to create a color palette, I always start by browsing through websites on portfolio sites like Dribbble or Awwwards for inspiration. I also find color generator apps like Coolors really helpful; on their website, you can either generate colors or browse through existing color palettes!

Try the Coolors Palette Generator!

Here are also a few articles on color in web design if you’re interested in reading some more:

• Color theory for designers: a beginner’s guide
• Rules for Choosing A Website Color Scheme
• 29 Beautiful Color Schemes From Award-Winning Websites
• 50 Gorgeous Color Schemes From Award-Winning Websites

4. Remember that these “rules” are all just starting points.

What I’d like to leave you with at the end of this lesson is that the “rules” or “principles” I mentioned aren’t really rules. They’re guidelines and suggestions meant to give you a starting point with your design. This applies to the previous lessons as well.

You can still create a fun web design with the color blue even though cool colors are typically associated with calmness. You can still create a visually interesting design even with a monochromatic color scheme.

Color is just one element of your design – you also have images, shapes, fonts, and other tools that influence the way that your design is received by your audience. My tip for you as you start out: Apply the principles that work for your design, break the rules that don’t, and experiment until you find a better solution. 

Source: Emon Pixels

Source: Paulina Oparcik