Get Hexed: Picking Inspirational School Website Colors

July 7, 2018 Rachael Eaton

hex color chart

Colors are the foundation of website design. They evoke emotional responses and help spur visitors to action, which makes them vital to the overall success of your school’s site. No pressure—right? So how do you pick the best colors to represent your school online and inspire admission prospects?

For most schools, you don’t have much choice regarding the main colors as these are already represented in the school’s crest or logo. As such, these colors are established traits of the school’s identity. So when it comes to the website, we typically start here, utilizing the school’s historic colors in dominant locations such as header and footer elements.

Main colors aside, you still have decisions to make over the website color palette. After all, we can’t have a beautiful website without accent colors! Using the dominant colors as our basis, let’s find two or three complementary colors that will be used in places such as content containers, headlines, buttons, links, and pull quotes.

With an endless spectrum of colors to choose from—neutrals, tints, warm colors, cool colors—where do you start? Let’s examine the strengths of each:

  • Tints, or variations of the school’s current colors, are a natural place to start the discussion as they allow you to expand the color palette without adding additional colors; this tactic is helpful when the school’s brand guidelines restrict expanded color usage.

  • Neutral colors such as those on the white, black, and gray spectrums are “safe” options, providing contrasts that won’t distract from the main colors; neutral colors are also a safe option when schools are concerned with infringing on the color palette of competitors.

  • Warm colors such as red, orange, and yellow, evoke excitement and optimism; warm colors are often looked upon when the school is looking to shake-up its current color palette and make a bold statement.

  • Cool colors such as blue, green, and purple have a calming quality; cool colors are attractive options when the school wants a “refreshed” look that won’t upstage the main colors.

When selecting colors, focus on design balance, and don’t go overboard. Including the main colors, the website palette should consist of six options or less. The more colors there are, the harder it will be to maintain a consistent look throughout the website, and consistency is key!

As mentioned in the intro, website colors play a critical role in evoking emotions and feelings from visitors that factor into their first impressions. Make sure the colors you choose are creating a personality for the school that support its identity, story, and mission. For example, lower schools might select bright colors to communicate fun and excitement, while upper schools may opt for bolder colors that convey growth, maturity, and future success.

Similarly, an all-girls school is likely to lean towards a soft, feminine color palette, where an all-boys school typically looks to more simplistic but bolder colors. Boarding schools with international admission prospects should also consider the cultures it’s targeting. For example, red represents luck and prosperity in many Asian cultures, whereas yellow signifies jealousy in France and Germany.

Still overwhelmed with the options? Create a list of the school’s goals and lead the way with appropriate colors. Want to increase admissions? A bold red will make a statement. Need more families to give? Green represents money. Maybe athletics could use a boost? Look at bold colors with movement and action such as an intense blue, red, green, or orange—or draw from popular local college or professional teams. Academics the priority? Think of successful colors such as yellow, purple, red, or blue to provide inspiration.

Accessibility is another important consideration for website colors. The main thing to watch out for here is the contrast between text and its background color. A tool such as Contrast Checker provides a quick way to ensure the site’s colors meet accessibility compliance.

As you develop your color palette, there are also some easy-to-use color generators such as Adobe Color CC, Coolors and Color Safe to provide inspiration. Have fun, and remember to choose colors that complement the school’s ideals, pick bold colors for action items such as “apply now” or “make a gift,” softer options for core items such as academics, and keep the palette simple for a consistent look that will inspire and entice visitors.

About the Author

Rachael Eaton

Rachael Eaton is an interactive designer with Blackbaud K-12's Professional Services team. She has five years of experience in website design and content management, and she enjoys working in photography, print design, and traditional media. In her spare time, you’ll find her hiking, camping, traveling, and enjoying the outdoors with friends and family.

More Content by Rachael Eaton
Previous Article
Does your school REALLY have a story?
Does your school REALLY have a story?

Learn the three critical components to crafting an effective school story that appeals to admission prospects.

View More
Keeping Team Morale High During Busy Seasons
Keeping Team Morale High During Busy Seasons

From the standard to the unconventional, these managerial strategies will help your team survive—and thrive...