WordPress-HS-2024-series

Everything you need to know about migrating your website from WordPress to HubSpot.

This step-by-step visual guide will walk you through the process and help get your website all set up on HubSpot.

 

Download Now

    web-creation-series-mega-menu-2024

    Everything you need to get started with HubSpot's CMS and build your CLEAN website.

    No developer is needed.  This complete 3-part series includes a step-by-step guide to high-fives all around the office.

     

    Download the Guides

       
      The CLEAN Theme

      Take full advantage of the new and improved HubSpot CMS experience with the CLEAN theme.

      Theme Support & Reference

      Have a question and looking for an answer? I've likely got a video for that or an article that covers it.

      Built for Speed, Performance, AND an awesome UX.

      Google PageSpeed Insights is the gold standard in analyzing the speed and performance of a website. Here is how CLEAN Pro ranks. Not too shabby for a media-rich page.

      page-speed-3-7-23

      Report generated: Tues, March 7, 2023, based on Home Page - Opt 1.

        3 min read

        How to quickly create the perfect color palette

        How to quickly create the perfect color palette

        Table of Contents

        Time for a website redesign? You’ve got an exciting opportunity to rethink some of your branding elements. But with a whole rainbow of options out there, where do you start?

         

        monty-python

         

        The good news is there isn’t a wrong answer here. But there are a few things you’ll want to consider to help your brand put its best foot forward. You’re about to learn:

         

        How to pick your primary color (Plus a little on psychology)

        Colors evoke emotion, so ask yourself: how do you want your website visitors to feel? What do you represent? If you’re a fun, friendly brand, warm colors like orange are a great fit (oh hey, HelpfulHero!). Orange, yellow, and red can also induce hunger (think McDonald’s, Burger King, Sonic, or any fast food restaurant).

        Cool colors like blue feel reliable and trustworthy (think Dell or IBM), while earthy tones like green or brown represent health and work for natural brands (like Whole Foods or John Deere).  

        Here’s an image to help you visualize different colors and their associations:

         

        color-emotion

         

        And, if you want to get into the nitty-gritty of your brand’s identity, check out our brand canvas.  

         

        Tools to help you create your brand palette

        Got a color picked out? Sweet. Here are some tools to help you build an eye-catching palette.

         
        Canva

        Canva’s color wheel is easy to use. Just plug in your primary color hex code and play around with a few different looks:

        Complimentary colors

        Complementary colors are two opposite colors on the spectrum (like purple and green, for example). They provide a good amount of contrast: perfect for CTAs and other elements that need to pop. 

         

        Screen Shot 2022-02-11 at 8.26.31 AM

         

        Monochromatic colors 

        A monochromatic palette is a little more subtle since it includes three shades, tones, or tints of one base color.  

         

        Screen Shot 2022-02-11 at 8.27.02 AM

         

        Analogous colors

        An analogous palette contains three colors within the same family (found side-by-side on the color wheel). If you go this route, use proportions wisely so that the combination doesn’t become visually overwhelming. We’ll get into the how-tos of this in a minute.

         

        Screen Shot 2022-02-11 at 8.27.35 AM

         

        Triadic colors

        A triadic palette contains colors that are evenly spaced on the color wheel. The third color adds a little more balance and versatility to this palette while still providing a good amount of contrast.

         

        Screen Shot 2022-02-11 at 8.28.05 AM

         

        Tetradic colors

        Similarly, a tetradic palette has four evenly spaced colors on the color wheel. To avoid searing the retinas of your website visitors, you’ll still want to choose one dominant color and use the other three as accents.

         

        Screen Shot 2022-02-11 at 8.28.36 AM

         

         
        Coolors

        If you’ve already got a mood board or general idea for your brand’s look and feel, Coolors is a tool that can give you a great starting point. Just plug in a photo, and Coolors will highlight its colors, hex codes, and all. You can hover over the image and move your mouse around until you see a color palette that feels right.  

        If you’re not into their suggestions, head to their trending color palette page and check out the options there. You’re bound to find something.

         

        The key to using your brand colors 

        So how do you apply all of this to your website or marketing materials? Meet your new guide: color hierarchy. 

        Here’s where you’re going to decide how much of each color to use to create a balanced and engaging look. But what percentages should you use?

        You’re in luck because your work is already done for you in this handy Photoshop template.

         

        Screen Shot 2022-02-11 at 8.50.19 AM

         

        Go ahead, open it up. You’ll see five colors in the example (taken from this trending Coolors palette). The dominant light color (largest rectangle) will take up more website real estate (like your site background). The second-largest rectangle on the right could be a great highlight color (for CTAs, etc.). Your dark tone (a good choice for text in contrast to the light background) would be the third-largest, and any remaining colors would be used minimally and have the least amount of visual weight.

        Make a copy of the template and edit those colors to your heart’s delight.  

         

        And there you go: 

        A quick overview with tools to help you get started on your new brand color palette. There’s a whole lot more down the branding and color rabbit hole, but at the end of the day, remember to have fun! Stay true to you, and your authentic brand will shine through.

        5 Things to Ask Before Creating Your Website

        5 Things to Ask Before Creating Your Website

        Ready for your big and exciting new website design? Before diving into the fun of drag-and-drop editors and page layouts, make sure you’re building...

        Read More
        How to Boost Website Performance Like a Pro

        How to Boost Website Performance Like a Pro

        Are you struggling to keep up with your customers' expectations these days? Do you want to improve your sales, get a better ranking on Google, and...

        Read More
        10 Steps to Redesigning Your Website Like a Pro

        10 Steps to Redesigning Your Website Like a Pro

        Taking on a website redesign project can be both terrifying and thrilling at the same time. In this article I'm going to break down the ten key steps...

        Read More