Choose Your Brand Colors Like A Pro

choose brand colors with paint samples all over a desk

If you’re not a designer, all the color psychology and strategy in the world might not help you narrow down a solid color combo to create your personal branding.

Once you answer the question, “what colors do I want to use,” you then have to answer, “what hues of which colors should I use?” Then you will probably have to narrow it down with, “how many colors should I use?”

I’m going to attempt to give you a simple, practical guide to choose your brand colors like a pro.

This is part of the Blog Design Essentials series. Check out the rest of the posts by clicking here.

How many colors should I use?

If you were to go and visit the top blogs in the world, specifically looking at the colors they incorporate, you would start to see a trend. Most big brands are using two or three colors in their design. The most well executed brands will have two primary colors and one accent color that pops against the other two. So here’s the formula:

2 + 1 = optimal color palette

When it comes to blog design and creating your personal brand colors, it’s best to use a maximum of three colors. Two primary colors and one accent color should be the basis for your color palette. You can use as few as 2 colors, but never exceed 4-5 colors in your design. Keep it simple, keep it specific.

Take my site for example: when you look at dustinstout.com (or even dustn.co) you’ll notice 3 primary colors– red, black, and grey. I chose to stick with two neutral colors and one accent color. I kept it super simple for my personal brand because it’s easier to stay consistent, and simplicity makes a longer lasting brand impression.

Now, if I’m being honest, technically I have 6 colors in my palette. I know– what a hypocrite! But hang on before you throw me to the lions! When I come up with the primary colors in a design, I will choose either a slightly lighter version, or a slightly darker version to use as highlights/lowlights within elements. This makes for great gradients so that the colors aren’t always flat– they have some depth to them. I know that sounds really confusing, so let me show you exactly what I mean:

Base color palette:

base-color-pallet

Color palette with highlights/lowlights:

base-color-pallet-extended

The “dustn” part of my logo is red to emphasize and draw attention. I needed to do this because I wanted to make sure people remembered the unique spelling. It’s d-u-s-t-n; dustin without the ‘i’. Using a bold, attention-getting color makes it more likely for a visitor to see that it is spelled differently. At least that’s the hope. Plus, red is just my favorite color– so of course I had to use it in my logo.

To give the logo a bit of depth, I used 2 shades of red to create a gradient (one color transitioning into another). I also use red for the color of links throughout the site. Aside from navigation links, any text links on this site are red to draw your attention. I use a slightly lighter black color for my navigation elements, and post titles. It has the highest contrast and plays nicely against my background color. It’s a bit lighter pure black to, again, add a bit more visual depth.

For my background color I use a very light grey. It is only a smidgen (technical measurement) darker than white. I did this because grey gives a slick, modern feel and can be partnered with white as a hue without complicating the palette too much. So you see, there are two primary colors plus one accent color that I stick to, with a variation of each that will allow me to add a bit more depth to the design elements.

Make sense? Good. Now how in the world do you make your own palette? Good question, I’m glad you asked it.

Tools to Help You Choose Colors Like a Pro

I wish it was as easy as just thinking up your favorite colors and putting them together. Unfortunately, good design takes a bit of an eye for color coordination. Luckily there are tools out there that will help you find the perfect color palette for your blog design project. Here are the two I use regularly:

ColourLovers.com

colour-lovers

This is my first choice when I’m looking for color combo ideas. This is a user curated database of all sorts of beautiful color palettes.

Using what I’ve outlined in this post, you should be able to search through ColourLovers.com and find a palette that fits exactly what you’re trying to do. With ColourLovers.com you can search through the thousands of palettes by keyword, hue, hex code, and a few other specifications. You can even search through popular brand colors!

Kuler.Adobe.com

kuler

This is also a great tool for looking up user created color palettes. It’s not quite as user-friendly, but still a great tool to use.

Let’s recap

Since bullet points are highly effective and more actionable, here’s the three sentence, bullet-point version that would have probably saved you 4 minutes of reading time:

  • Decide on two primary colors and one accent color.
  • Find a perfect color palette using one of the two websites mentioned above.
  • Stick to these colors only when designing your blog.

Once you find the palette that works for you, save the values somewhere they’ll be safe and easily accessible. Now you can really begin your blog design implementation. Use your new branding colors, and only these colors, throughout your blog design and you will have created a professional grade branding palette.

So what two or three colors are you working into your personal branding palette? You can leave a comment by clicking here.

Dustin W. Stout Avatar

20 responses to “Choose Your Brand Colors Like A Pro”

  1. Dustin W. Stout Avatar

    You’re welcome, Adelina.

  2. Adelina Adell Avatar

    As I know, we can use a maximum of 3 colors for a logo. This is the best practice. I like your idea. Thanks for sharing your idea.

  3. Dustin W. Stout Avatar

    You’re free to do what you want. As with most artistic teaching, there’s always exceptions to the “rules”. Just know that the more colors you add, the more complex and potentially more difficult it becomes to execute in a seamless manner.

  4. Rebi Avatar
    Rebi

    Hi, what if there are two colors in a logo? is iti okay to use two colors throughtout the whole page?Is it okay to use the secondary color as the button color? I just feel like I want to use the secondary color because it looks better, but the first color is used on other things which messes up the design.

  5. Kaitlin Avatar
    Kaitlin

    I have a Health / Fitness / Wellness website & I’m deciding between the primary color being either a rich navy, a specific shade of green, or a rich deep purple… I love bold rich crisp clean colors/looks….not sure which to go with and how to put it together!

  6. Dustin W. Stout Avatar

    Thanks for the feedback Michael. The design choices I made were all intentional to create the most optimal and comfortable reading experience possible. I’ve yet to blog about this specific design update (I really need to) but I have talked previously about optimal reading experience and the method to my madness. So it’s not really about what’s “in” as much as what’s most visually pleasing across a wide range of devices.

  7. michael Avatar
    michael

    Speaking of design, I know big friendly design elements are “in”, but the way this site is designed makes me feel like I’m holding the computer screen inches away from my face. Maybe introduce a little micro in your macro. Thanks for the post!

  8. Steven Buehler Avatar
    Steven Buehler

    I was fortunate in that the default SharePoint design is already made of the colors I’m interested in, and all I needed to do was add some font code so Mac readers wouldn’t get stuck with Tahoma while Windows readers got to see the much nicer-looking Segoe.

  9. Dustin W. Stout Avatar

    Beautiful colors Kaci! I love them!

  10. Kaci O'Dell Avatar
    Kaci O’Dell

    5A6D82, 779899, F0F0F0
    …so a muted blue, soft green, and ivory 🙂

  11. Josh ewin Avatar
    Josh ewin

    Starting it tonight. Should be done in a week.

  12. Dustin W. Stout Avatar

    My pleasure Josh! Where’s the new landing page?

  13. Dustin W. Stout Avatar

    The second shade of red is used for gradients or other “hover” effects. It’s not necessarily incorporated into the logo itself, but for other use cases, such as the hover effect on links. See how they get darker when you put your mouse over them?

  14. Josh Ewin Avatar
    Josh Ewin

    I’m putting together a new landing page layout tonight and need a new palette. I had used http://www.colourlovers.com/ about 2 years ago and forgot the URL. h/t for the reminder of this great site and about keeping it simple. Thanks Dustin.

  15. Pandu Poluan Avatar
    Pandu Poluan

    You said you use two shades of red in the “dustn” part of the logo, but I certainly can’t see the second shade. Are you using the second shade as the letters’ outline?

  16. Dustin W. Stout Avatar

    I see… hmm. Maybe a custom child theme is in order for all my subscribers…? 😉

  17. Joseph Lalonde Avatar

    I have but I still find a struggle implementing a color scheme on the blog. There’s colors that I like but have no idea on how to blend them properly For logos, accents, etc…

  18. Dustin W. Stout Avatar

    Did you check out ColourLovers.com?

  19. Joseph Lalonde Avatar

    This is where I really fail. I looked at colors and just see a jumbled mess, unable to pick out colors that go well together. This post helps a bit but still seems so far over my head it drives me nuts!

Leave a Reply