Using Color The Right Way – Blog Design Color Tips

Blog Design Color Tips - angiemakes.com
This is part 2 in a little series called “How to Design a Blog Header That Will Make People Like You.” See the first post here.

My husband and I recently purchased our first home. We looked at a BUNCH of houses with color schemes, painted walls, and unsightly decor noticing a pretty common thread. Decorating with color the right way is hard.

Color Lovers can tend to get carried away painting with too bold, too many, and too clashing colors. Gulp. I may have been guilty of this a time or two.

Friends don’t let friends go color-overboard. Read on!

Oh, And we’re not actually talking about painting houses. Good design principles apply to all things. In this case to your blogs and fancy shmancy blog headers.


Picking colors for your blog header is important as these colors will be repeated throughout your blog design. So where to start? With these awesome blog design color tips of course.

1. Choose 1-3 colors to be your MAIN blog / header colors.

Any other colors you choose for a more colorful effect will serve as accent colors only. (BONUS TIP- Using the same colors repeatedly helps create cohesion on your blog and establish brand recognition.) Winning.

Here’s a great example of choosing 1-2 main colors, neutral colors, & accent colors well. Brought to you by A Beautiful Mess. 

Blog Design Color Tips - angiemakes.com

Let’s dissect those colors a bit.

Blog Design Color Tips - angiemakes.com

The accent colors are used sparingly to draw attention to important text / elements. The neutral colors of black and gray are used throughout the site for basic text and other elements.


2. Choose 1-2 neutral colors for text and other elements.

Why? Because a girl needs some friendly, goes-with-everything colors like she needs a perfect pair of black / brown flats. They match. They’re easy on the eyes. It’s impossible to go wrong with them.


3. Vary your hues.

In order to avoid a BLAH type of blog design, you can use your 1-3 colors frequently, but vary their shade & hue. What do I mean by that exactly? You’ve seen em… paint strips that look like this:

Exif JPEG

Each paint strip is the same color per say, but contains different hues. Vary your blog design to include a handful of color variations as this creates interest.

Here’s my favorite way to find various hues in photoshop based off of the same color. I use the color picker to select the base color I want some hue variations of. Then, drag the color circle up and down to select lighter / darker hues of the same shade.

colorpicker

Or, select the pantone color libraries for some other hue variations.

colorpicker2

For web use, you’ll want to grab the HEX code for your various site colors. It will look like this: #909090… a number sign followed by 6 numerical digits.


3. Use bolder colors for important elements.

As seen in the blog design example above, the bolder accent colors are used for some heading elements, links, and other important areas of the site. This draws attention to text / important elements.

This means for your header you can sort of go crazy with some pops of color as your header is pretty important.


4. And now the hard part… actually picking your colors.

Here are just a few things to consider when picking a color scheme for your blog header and blog design.

1. What’s your favorite color? Start there!
2. Choose tertiary colors ie. Not boring primary ones. Use mint instead of green. Use teal instead of blue. Use mustard instead of yellow. You get me…
3. Get some color inspiration. Helloooo Pinterest. And Design Seeds is my jam.
4. Use some color tools like Color Scheme Designer or Kuler for some perfect palettes.

What about you? Any color design tips to add?

23 thoughts on “Using Color The Right Way – Blog Design Color Tips

  1. Right now my header is black text only. Which is fine because I’m going for more of a simplistic look but I think it could use some sprucing! Time to find my colors!

  2. I love that you’re doing this series but I think it’s going to make my brain hurt. I know I love yellow and pink and watercolour and have two of your premade templates narrowed down but don’t know how to incorporate “me” into them. I’m changing from blogger to WordPress so starting over completely design wise.

    1. Alinta,

      Oh hooray for you for diving into WordPress. :) I hope you love using it! Do you already have hosting set up, etc? I think yellow + pink is a great choice. It can get overwhelming if you try to do too much. Have you thought about starting a mood board to get a feel for what is “You?”

      http://angiemakes.com/web-design-mood-boards-pinterest-inspiration/

      I’d love to see a link to your site as well. I may be able to provide a few pointers!

  3. I’ve still go my blog on blogger because I don’t want to change until I know what I’m doing with the design. I already have a Pinterest board https://www.pinterest.com/alinta/final-blog-inspiration-pictures/
    I’m thinking the Lisabeth template is probably what I’ll go with. I love the asymmetry of it. I don’t think the lace reflects me though and don’t know how to incorporate the yellow, pink and watercolour idea more. My blog is http://www.polishandpaws.com.au someone actually copied my blog name so I want to make sure the blog looks like me now that the name isn’t unique.

    1. Oooh! I just love the ideas you’ve pinned. I think those could go really well with the theme. It would be super easy to add any of those watercolor splash circles to replace the default lisabeth circle. As for the lace on top…. what if you replaced it with some sort of watercolory border? I have a few here… I’m sure there are others!

      http://angiemakes.com/product/watercolor-borders/

      https://creativemarket.com/abaldelomar/7777-Watercolor-Lace-Clip-Art

      https://creativemarket.com/swiejko/30015-Watercolor-Elements-Stripes

      Just some ideas! Oh, and bummer about your blog name. :/

      1. Thank you. I hadn’t thought about a watercolour border but that might be the way to go. I’ll have to go find one that suites now :) thanks for your help, I really appreciate it.

    2. Sir plz tel me 1 thng “is it possible to clear ias wth 1yr preparatn.i ve completd my prelims syllabus.Prsntly in b.com ll.m vry hard wrkng.maintaing 70% agg in st.xvr and regular practicing bankng sylabus .PLZ REPLY

    3. Los Libros de la Catarata es una buena editorial. Y, sobre el leit motiv de la entrada, ¿qué podemos esperar de un país donde los cargos públicos siguen teniendo una Biblia y un crucifijo en la mesa en la que juran o prometen el cargo?

Leave a Reply

Your email address will not be published. Required fields are marked *