Color Palettes

Choosing a good color palette is essential to building a brand.

Color Theory

Learn about the theory behind colors, our website design gallery of colors and what they mean.

The Psychology of Color

  • Red

    Represents passion, energy, urgency, excitement, vibrancy & danger - Often used to create urgency for people to buy. Effective in triggering strong emotional reactions. Restaurants use it to stimulate appetite.

  • Pink

    Represents feminine, sweetness, innocence, fertility & romance - Often used to market services and products to women and young girls.

  • Orange

    Represents friendliness, enthusiasm & creativity - Promotes people to take action: Buy & Subscribe. Orange attracts impulse shoppers.

  • Yellow

    Represents youthfulness, optimism & cheerfulness - Often used to grab the attention of the audience. Yellow can put strain on the eye, so you want to use it sparingly.

  • Green

    Represents wealth, health, tranquility, and nature - The easiest color for the eye to process, so it has relaxation effects. Green is the second most preferred color by both men and women.

  • Blue

    Represents trust, security, stablility, peace, and calmness - Often used in businesses and banks to create sense of security & trust in the brand. Blue is the No.1 preferred color by both men & women.

  • Purple

    Represents royalty, wealth, success & wisdom - Often used in beauty or anti-aging products. Purple has a soothing and calming effect on people.

  • Gray

    Represents neutral, simplicity, calm, futuristic & logic - It lacks emotion and is associated with technology, industry, precision, control, competence and even sophistication.

  • Black

    Represents power, luxury, sophistication & elegance - Often used to market luxury brands to evoke professionalism, strength & precision.

Palettes & Packages

Learn how to create the right color palette for the customer based on the palette option they chose from our gallery during the consultation, and the top industry standards.

Color Palettes

During the site design consultation, the design rep will have chosen a specific color scheme type from the intake form. You may see terms like Conservative, Cutting Edge, Relaxed, Formal, Energetic and Bold

The logo of the site or the chosen color scheme may not reflect all the colors in the palette. It is important to understand that the customer didn't choose a palette because they want those colors included in their site, rather they chose it because they like how those colors contrast or the outlook portrayed by the palette.

mono

Monochromatic

Monochromatic color schemes are easy to create because they use only one color.

comp

Complementary

Complementary schemes are created by combining colors from opposite sides of the color wheel.

analog

Analogous

Analogous color schemes are created by using colors that are next to each other on the color wheel.

triad

Triadic Color Schemes

Triadic schemes are made up of hues equally spaced around the color wheel.

Color Packages

For example, if a customer chose "Formal" they probably just want simple & elegant colors that compliment their logo, used throughout the site. If the customer chose "Bold" they probably would prefer high contrast and colors that stand out.

Conservative

Serious, muted, de-saturated

Cutting Edge

Strong, clean, contrasting

Relaxed

Retro, de-saturated, soft

Formal

Restrained, de-saturated, rich

Energetic

Pastels, clean, fresh

Bold

Saturated, clean, strong

What Influences Package Choice?

Customers will generally have a preference in wanting something to look and feel a certain way. A formal or luxurious look is a lot different from a bold look. The type of business will often times be what determines the package. A tech business for example, will generally go with a cutting edge look whereas a high-end restaurant would lean towards a formal look. A newly established hip brunch spot will benefit from a bold, clean look. 

  • Colors will come from their branding if they have a brand established.
  • If they don’t have any colors set, we will go with colors that make sense for the look and feel for the package.
  • Consider the type of business and industry when choosing colors
  • If there are images, we can match the colors to the main colors in the photos if they are a focal point

We can utilize color generators using images such as: colormind.io/image

WHAT IF LOGO/EXAMPLE SITE CONTRADICTS PACKAGE

The package selected is not about specific colors in the package, but more about the look and feel that they want to achieve. The colors can be matched to the logo or images while still retaining a certain package look. Logos will generally be designed to make sense with their industry. A clean, minimal logo will pair well with a clean, modern website just as a bold logo with bright colors will pair well with bright bold colors on a website.

If the package contradicts the logo or example site, we can still work with it and adjust the amount of colors we utilize from the logo, and use appropriate fonts, images, and design elements such as boxes or borders to make the brand work with the package selected.

We can also utilize color generators where we lock in a certain color and have other good color combinations generated such as: http://colormind.io/

Industry Standards

Since we are working with websites, we will work with RGB/Hex colors. There are no industry standard specific colors, just common choices when it comes to certain industries. E.g. blue/green for healthcare, blue/white for technology, orange/black for construction.

The colors used depend on branding. If no brand is established, colors are generally used to help convey a certain look and feel such as friendly, aggressive, luxurious, etc. The feeling you want to convey can be further established by using an appropriate typeface/fonts.
Refer to The Psychology of Color section for inspiration.

Industry-standard color formats are as follows:

Web/Digital:

RGB Uses red, green, blue for colors used on screen/web/TV.
Hex: Uses six digit combination of letters/numbers. Short code for RGB.

RGB/Hex can achieve colors that appear neon/glowing, while CMYK/print colors are generally not able to produce colors as vibrant as RGB colors can.

Print:

PMS (Pantone) for color accuracy and matching colors. High-end print jobs. Matching colors on different collateral/materials for branding.
CMYK for full color print jobs. Uses 4 colors.

Implementation

Using Dominant Color vs Accent Color

The colors used should be from your branding. This includes the logo, website, and all other materials used for the business. Use your dominant color in a limited number of places where you want your website visitors to pay attention to, or if you want your visitors to take certain actions. It can be used for certain sections as well depending on the color combination used. We do not want colors to be overwhelming nor make things hard to see, so using a yellow background with white text, for example, is a bad idea.

It is pretty boring to have just one color throughout your entire website.

The accent color shouldn’t be the main focal points of your page, but they can help make other elements stand out, such as secondary buttons, underlines, sub-headings, etc.

Image source: websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-websites

BAD COLOR COMBINATIONS

Never choose a background that makes your text or content hard to read. Avoid color combinations that strain the eye or cause a “vibrating” effect. Make sure the text and background have enough contrast so that it is easily readable. Too many colors will make things look too busy and unprofessional.

More to read on bad color combinations: https://designwebkit.com/web-and-trends/color-combinations-hell-death-sentence-designs/

HOW MANY COLORS TO USE

Generally, no more than 3 colors should be used on a website. The primary color, accent color, and white/black/gray counting as the third element.

  • 1

    The primary color

  • 2

    The accent color

  • 3

    and white/black/gray counting as the third element

If shades of a color are used, we can simply use 1 or 2 colors and the shades within it (lighter/darker variations of that color).
We can utilize color shade generators such as: https://noeldelgado.github.io/shadowlord/

Keep in mind that using images will affect colors depending on how much color it has, how large the image is, and how many images are used.
More on using a good image: https://www.justinmind.com/blog/how-to-use-an-image-as-a-website-background-4-best-practices/

Table of Contents
    Add a header to begin generating the table of contents