The colors you use to represent your company are one of the strongest branding weapons you have. Think about large corporations such as Ford Motor Company with their blue oval or Coco-Cola with its red and white color scheme. We associate those colors with those brands because the companies use them over and over on their products and in their communications.
The colors you use in your designs have a psychological impact on users. Use color to reach different cultures, create an emotion or grab attention. Don’t be afraid to take your brand color palette and then add a contrasting pop of color to your calls to action (CTAs). You’ll find so many ways to use color in your site design. Here, we’ll look at eight potential methods of incorporating brand color and a few examples of how other brands achieve a specific look.
1. Choose One Strong Color
One method of using color in your designs is choosing one bold color for your brand and using it everyone — your logo, website, social media pages, advertising and so on. If you base your color palette around a single color, you need to make sure this color is bold and defines you as a brand. Red might indicate excitement, pink may represent girly products and dark blue resonates with seriousness for endeavors such as finances.
Home Depot is a prime example of a brand with a single, bold color it uses everywhere — especially on its website. The orange reminds viewers of construction and building, so it fits perfectly with a home improvement brand. The logo is an orange box with cutout white letters with the brand name. Orange accents are used throughout the site, repeating in lines, bars, CTAs and even in some of the graphics, such as the stars.
2. Use Color in Photos
An interesting way of incorporating your brand’s color palette into your website design is reflecting main colors within the images you choose. You’ve likely seen this technique used with photos that seem to almost blend with the rest of the elements on the page. Achieve this through careful editing or by choosing color in the pictures you take. You may need to make some tweaks to the saturation and color levels to get the look to match up perfectly, but you can achieve the color through any professional photo editing program.
3. Use Color As Background
Another option for incorporating your brand colors into a website is using the colors as part of the background. A solid colored background doesn’t distract from other images on the page, allowing you to share photos of your work in action or highlight products without pulling away attention.
Many different methods are available for adding color to the background. You can go with a white background and add a band of color. Or, use a gradient that incorporates all of your brand colors and shifts slowly from one to the next. You might also simply add color borders around other images or add color to the background of a navigation bar or header.
SITECH West does a wonderful job incorporating its brand colors into its overall design. The site relies heavily on the brand’s main dark blue colo and adds in some white and darker blue to highlight the top navigation bar and information. Further, some of the site’s CTA buttons and small underlines underneath page headings feature a splash of the logo’s yellow. The effect is subtle but incorporates its brand image nicely.
4. Add Color to Typography
Any strong website design features beautiful typography. Whether you use type for your landing page headline or simply have a font hierarchy, think about the colors you want to use and how they highlight your brand colors. You can use color for body text, but make sure there is a notable contrast between the background and the text color. Also, don’t forget about issues such as accessibility and how colorblind people might view different colors on your page.
Look for opportunities to incorporate a splash of color, such as underlining a headline in a color from your palette or adding an accent shadow to text.
5. Play with Your Name
If your brand has a color in its name, you can have fun with your website color palette. Or, if people associate your business with a color such as green for money or red for food, you can play on that association as well. Think about how to highlight that color best. If you want to use yellow, you might put it on a black background so that it pops. Or, if your brand is Dark Blue Gadgets, you might place a dark blue color over white.
Gold Bar Whiskey is the perfect example of playing on the title of a brand to come up with an eye-catching website that draws users in. The site utilizes a black background so that the color gold pops on the page. Then the creators added the brand’s gold coin logo, gold icons, gold type at the top and a gold line. The larger gold typography lays over a darkened image, so the color still pops. The result is a beautiful and striking website that exudes class.
6. Go Outside Your Color Palette
Maybe your color palette doesn’t translate well online. Don’t be afraid to make a few minor adjustments. If your color palette features pastel blue and yellow, go with a bolder blue and yellow. Add an accent shade that complements the colors you’re already associated with. If your logo also doesn’t look good on a screen, ask your designer to provide a black and white style or change the colors to something bolder. While your color palette is an integral part of your branding, don’t be afraid to change it as needed if it just doesn’t look right.
7. Add Animation
The web hosts around 1.7 billion sites, a number that changes constantly. You have a lot of competition out there clamoring for consumer attention. Anything you can do to make your site stand out helps. Adding some animation and incorporating your color palette into this animation draws user attention and helps highlight your brand. Either add animated graphics in brand colors or add color to text and animate the flash of color.
Mellow Mushroom has a sort of psychedelic-looking animation that grabs user attention from the moment they land on the page. Note how the color yellow pops behind the letters and flashes a bit, giving it a living look. Animated graphics of pizza slices and globs appear in the background’s yellow swirl, which is reminiscent of the universe.
8. Reverse the Colors
Do you typically use bright red with a small splash of white? What if you turned that around and used white with a dash of red for your website? The color palette remains the same, but the central shade and highlight colors change. This still gives users a sense of who you are and associates those colors with your company, but it allows you to use hues which are easier to read on electronic devices.
Incorporating Colors Online
Figuring out the best use of colors without sacrificing online readability is challenging. With a little creativity, you can make even tricky color palettes memorable enough for users to come back to your site in the future. Put the aesthetics and usability of your design over just using specific colors — but stay as close to your true branding as possible — and you can’t go wrong.
Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.