When it comes to picking colors for your website, there are between 12 and 10,000,000 colors in the world to choose from. (Scientists say women can see more colors than men!)
So how do you pick?
If your school has established colors you may not need to think about color options much. If you are the Pasadena Eagles PTO, for example, it makes a sense to reflect the school’s red and gold color palate.
Or if your school is called Verdant Valley Middle School, odds are, at least one of your colors will be some shade of green.
But for many groups, color options are wide open— which is both fun and challenging. Below are some tips and fun tools to help you in your selection process. The goal is to narrow the universe of color down to 2-3 colors— ideally 2 colors and and accent color—and stick with them. Over time, members will come to associate those colors with your group, building, community, identity.
The Psychology of Color
As you begin, it’s helpful to know what emotional and psychological ideas people associate with color. Studies1 show that when asked what colors remind them most of Power and Speed, for example, 76% thought of “red” first; 7% yellow, 4% black, etc.
So if the Pasadena Eagles want to be seen as fast and powerful— red, yellow and black are good choices, because they correspond with how people already visualize speed and power.
Purple is the primary color of the Watch Dogs site. An unusual choice for a men’s logo. However, purple is the top color when courage and bravery are discussed.
Colors that Energize; Colors that Calm
The spectrum of color can be broken into “warm” and “cool” colors. Warm colors radiate fun, active energy. If your group is high energy & fun, go for the warm colors.
Cool colors have a calm, dependable, steady feel. If you the group is wise and stead, cool colors may make a lot of sense.
And either group can be mixed and matched at will with neutral colors— white, black, grey, tan. The lighter the color, the more open and free the space will feel. The darker the color, the more closed it will tend to seem.
Let’s see what this looks like in practice.
Jasper Middle School is a calm, easy-going place. So they selected cool colors, mixed with neutrals. Choosing colors that are similar creates an easy, comfortable feel.
If Jasper wanted to put out a warm, high-energy vibe, they could have gone with “warm” colors, like orange and yellow.
Another way to go is “high impact”. This is achieved by using colors that are opposites—and it creates tons of visual punch. “Complementary” colors are colors that are opposite from each other on the color wheel.
Yellow & purple…
blue and orange…
green and red*.
These colors fight with each other visually, and create high impact.
*Beware of using green and red. People with color blindness cannot tell the difference between these two colors.
Favorite colors: Men vs. Women
Knowing your audience may greatly affect your choice of color. Regardless of gender, blue is most people’s favorite color, and green is right up there. Both genders also like red and black. Women's second favorite color is purple—not true for men!—which is why purple is an interesting choice for the Watch Dog Association.
Interestingly, neither gender is particularly fond of grey, brown, yellow or orange. And very few men choose purple as their favorite color.
Go with your Gut
Sometimes you have to go with your gut to come up with a color strategy that works for your unique group. Shawnee Trail Elementary for example was drawn to “primary colors”— red, yellow & blue. But they also wanted to honor their school’s “wild west” past. The solution for them was to mute the primary colors to achieve the “western” feel they wanted, while still keeping it kid-friendly and clean feeling.
Use some fun tools
Now that you know the color basics, you can use fun tools like this one.
ColorPalettes.net starts with beautiful photos, and builds color palettes based on them. If you want your site to feel like fall, choose a fall photo, and try out the colors they recommend on your site. You can explore warm colors, cool colors, contrasting palettes, and more.
Time to get geeky! To use specific colors on your website, you will need to figure out it’s “hexadecimal” number— a number/letter code that websites use to display colors.
I can save the photo to my desktop, then upload it in ImageColorPicker.com to find those values. For the image above, I learned the 5 colors in hexadecimal values are:
#0B2035 #1C629E #B4E1F6 #EFF4F7 and #276452
Have fun testing your color combinations on your Membership Toolkit website!