Do’s, don’ts and everything in between
“Color is the place where our brain and the universe meet.”
— Paul Klee
Color on the web conjures strong feelings. People may have personal preferences rather than brand-centered ones, find color models & palette creation confusing, and be so overwhelmed by it all that they just give up.
It’s time to cut through the noise and get started on your web color journey.
Why is color important?
Let’s just get this out of the way: Color is hard. Designers spend years and years learning every nuance of color, often by trial and error, and even then becoming an expert is a career-long process. Knowing all that, give yourself a break and just begin exploring web color in baby steps.
Color can mean so many different things to different audiences. It can suggest action, represent your brand, reflect emotion or even subtly change website behaviors. Here are some technical color basics to start.
The Color Wheel
The color wheel was developed in 1666 by Sir Issac Newton and is made up of primary, secondary and tertiary colors.
- Primary colors (Red, blue & yellow) cannot be created by any other colors
- Combining primary colors yields secondary colors
- Mixing primary and secondary colors gives us tertiary colors
Color Harmony
The combination of colors to create a pleasing look is what’s called color harmony. You can explore this through several color “schemes”.
- Monochromatic: based on one color with various tones or shades
- Analogous: colors located right next to each other on the color wheel
- Complementary: colors placed in front of each other on the color wheel
- Triadic: three separate colors which are equidistant on the color wheel
Canva has an awesome resource that explains different color harmonies.
Color Models
There are also different color models to bear in mind.
- RGB (Red/Green/Blue) colors are used on screens. They will be represented as values between 0–255 like this: R:255/B: 72/G:120
- CMYK (Cyan/Magenta/Yellow/Black) colors are used in print to determine the combination of ink needed, and will look different on a screen than the values suggest. They will be represented as values between 0–100 like this: C:25 /M:43 /Y:5/K:100
- PMS (Pantone Matching System) is used to define a specific spot print color. These are colors you will find as swatches in Pantone books
- Hexadecimal colors are used in HTML, or web coding. They translate RGB colors as a series of 6 letters or numbers like: #000000, #FFFFFF, or #330048
If you want to go into greater depth about the various color models, Pantone does a great job explaining them on their website.
While it’s important to understand the basics for how color works, don’t let all this info drown you. You will likely find that starting with the simple applications of color on the web are more valuable than becoming a total pro right away in all these nuts and bolts as you start learning to use it effectively.
Web color considerations
Applying color to an online project brings with it a unique set of design issues. While the suggestions on this list obviously can’t cover everything, it’s a good starting point:
- On the web, color is used for consuming content, way-finding through a site and to identify actions (like buttons or links) so make sure you are using it consistently.
- Color plays a huge role in what we call visual hierarchy, which is how a design works (or doesn’t!) for its target audience.
- Designers often use color sparingly in a site design if there will be colorful images. This helps ensure that the interface won’t compete with the site content.
- Accessibility (specifically the contrast between foreground and background colors) should always be taken into account based on visual acuity concerns. This impacts colored backgrounds, text, buttons, and hyperlinks.
- Think about only using the colors in your logo for buttons or actions/links only so that the brand stands out. Color coding the whole site based on the logo will not help a user determine the visual hierarchy of page at a glance, especially if you want the logo/header to stand out
- Avoid using colored backgrounds with text on top because the contrast between the foreground/background might not be enough
- You should also avoid using colored body text as the contrast between the foreground/background varies greatly.
- Using color for headlines could be effective if the font size is large enough to be legible and it provides enough contrast between foreground/background
- Hyperlinks used to be a specific blue color and underlined but no longer. If you can, develop a unique link style/color that will stand out when people scan a paragraph of text so they know what text is clickable
- Think about the color of your buttons both how they appear on page load as well as when hovered over.
Creating your color story
Now that that you have a sense of how color works on the web, let’s think about what it’s saying for your project. Have you ever wondered why the coca cola website is red-forward? Or how an Instagram influencer always uses certain colors on images in their “grid”?
This is called a color story, and it sets the tone for your project. You can create this story though color palette development as well as how much of each color is used and where. Between buttons, color blocks/backgrounds, style treatments or photos, this is up to you! Remember that color means something when and where you use it, so consistency is important.
Some examples of different websites with unique color stories.
AirBnb
Sticker Mule
National Audubon Society
FedEx
How to select colors
This is where things get fun — choosing the colors you want to use, and why. While it can be tempting to select your personal favorite colors, make sure you’re picking ones that best represent your client, their brand and that are accessible in the ways you intend to use them.
Also remember that each color family represents a broad range. Turquoise and navy are both blues, and blush and magenta are both pinks, but they all produce very different feelings. When talking about color, make sure you’re specific so there is no confusion down the road.
There are several schools of thought to consider when selecting colors:
- You can limit yourself to pre-determined brand colors
- You can create a palette of colors
- You can select colors based on their meanings
- OR a mix of all the above
Let’s dig into each of these in order.
Brand Colors
If you are given a branding guide, it will likely provide all the color values (RGB, CMYK, PMS or Hexadecimal) for their logo as well as primary/secondary color palettes. For the web, let’s focus on the hex values.
However, what a banding guide will not tell you is how to apply these colors. It’s also possible that these colors are not accessible for use the web.
First you should plug the hex values (if provided) into a color contrast tester so you know what you’re working with. The AIM Contrast Checker website lets you input different colors for the foreground and background, showing if that text will provide enough visual contrast for a number of sizes and applications. If the colors pass AA or AAA accessibility, awesome! If they don’t, you can play with the color values or hues to see what it would take to pass, and even show you the contrast ratio.
Developing your own palette
When creating your own color palette, you can apply many of the techniques/schemes mentioned above or work from pre-defined brand colors. Just bear in mind that brand managers will often have both a primary and secondary palette, which suggests the importance or hierarchy of each.
When you’re getting started, we recommend you create one 3–5 color palette. This can cover both brand/logo colors as well as those that support your color story or actions you are hoping to encourage. Black and white don’t need to be included in this palette, but know they can be useful to support your colors. As you select your colors, keep where and how these colors could be used in the back of your mind.
There are a number of free (well, with ads!) online palette creation tools, but I think Coolors is one of the easiest. You can select from a trending palette, pick colors by RBG or Hex codes, and even “lock” colors in place while you select others. On top of that, you can find matching colors as easily as hitting your space bar.
Coolors also has an option to emulate your color palette as a number of different color blindness types. I suggest you do this to make sure there is enough contrast because your selected colors won’t look the same for people with different visual acuity issues. This will definitely impact how these users see your brand colors, but you should only be concerned about visibility and hierarchy here.
When you’re happy with your palette, you can screenshot or export to a number of file types.
Remember that creating a palette is just part of your color story. It will be up to you how to use these colors and in what amounts. Color for text vs color as graphic elements will make a difference in the tone.
Selecting colors based on what they mean
While different colors can mean different things, did you know the role that psychology plays in choosing them? You obviously want to create a mood through the colors used on your web site, but you also want to make sure that the colors you choose push people to behave in the ways you’re hoping for. The last thing you want is for a color to actually do the opposite of what you were designing the site to do.
Below are just a few colors and their meanings/potential usages. Remember, if you are designing an international site, these meanings could be different.
- Red: Power, passion, energy. Used often for donation buttons or to drive action on a site
- Blue: Reliable, calming, sincere. Used often for medical, financial and government sites
- Orange: Friendly, active, Confident. Used often to suggest movement or speed
- Yellow: Happy, fun, playful: Helps heighten emotions and comfort
- Green: Balance, stability, success. Used often for environmental or nature projects
- Purple: Elegance, mystery, spirituality: Used to promote luxury and very popular with women
- Beige: Earthy, dependable, humble. Used as a warm neutral to support & enhance other colors
Online color tools & articles
Here are few great online resources to help with your color exploration:
- Interactive color wheel
- Find hex codes from other color models
- Determining foreground/background color contrast for accessibility
- Creating color palettes
- Creating a color palette from a photo
- Eggradients
Plus some articles & online courses if you want to dig deeper into color
- Color theory for designers: a beginner’s guide
- The Best Website Color Palettes to Increase Engagement in 2022
- Web design color theory: how to create the right emotions with color in web design
- 9 inspiring color trends for 2022
- Color for design & art on LinkedIn learning
- Online color theory class
Overall, using color on the web should always support your brand, mission & drive users to action. If you start there, you’re already halfway there.
Need a hand with a web project? Eve Simon Creative can help. Schedule a free 15 minute consultation to explore your website pain points and learn a few things you can do right now to make a big difference. What are you waiting for? Get your free website consult today.
