• Skip to primary navigation
  • Skip to main content
  • Freebies
    • Pinterest Dashboard
    • Start a Blog Guide
    • Start Checklist
  • Planner
  • Blogging Tips
  • Pinterest Tips
  • Start a Blog
  • Login
  • Kristie Hill

Tools and tips for changing your blog’s colors.

March 31, 2015

Hello. One of the easiest ways to personalize your blog’s theme is to change the colors. Here are some of my favorite resources and tips for making adjustments to your blog design’s colors.

Tips and resources to help you change your theme's colors.

Deciding on the colors for your blog design

Inspiration from everyday life

Look all around you for color inspiration. My current blog design was inspired by this necklace. I didn’t end up liking the coral, so I made it a bit more red.

blog ambitions color scheme

Design Seeds

You’ve probably seen Jessica’s graphics everywhere on Pinterest. These images are one of my favorite place to turn to when I need color inspiration.

Design Seeds color inspiration

Pinterest

This one is kind of obvious, but Pinterest is a great starting point for finding color inspiration. You’ll probably see a lot of Design Seeds graphics there too.

Check out Pinterest for color inspiration

0to255

This one is my favorite. I use it every single time I make color adjustments. To use it, you put in your hex color and it brings up all of the shades in that color from white to black in your color. Once you’ve picked out a color it can look differently depending on where it is used within a theme.

For example this is my turquoise in regular font.

This is my turquoise in a content box.

The button was my original color, but the turquoise looked too light as a font. I used 0to255 to find a color slightly darker to use it as my links and heading tabs seen in this post.

How to find shades of your color.
Use 0to255.com to help you pick colors for your blog design.

 

Color Picker

I use Colorzilla for Firefox. It is also available for Chrome. If I am on a website or picture and I like the colors, I use Colorzilla to find out the HEX properties of the colors are. When  you select the color picker from your browser, you can hover anything on the page and find out what color it is.

Use color picker tool to see what a color is.

Making the CSS adjustments for new blog colors

CTRL F

I use CTRL F (Command F for apple) when searching my CSS file all the time.

Example. If the theme’s color was #95D4C3 and I wanted to use orange instead, I would use CTRL F to find #95D4C3 and replace all those instances with my orange, #E77A00

Developer tools

I use developer tools to help me find the code for a particular element that I want to change. Firebug is a popular add on for Firefox, but my favorite developer tools are the built in ones with Chrome.

To access, open your blog page in Chrome and then click hamburger icon in the top right corner > More tools > developer tools.

How to use Chrome developer tools

Use the search icon (or the arrow icon in firebug) to inspect elements on the website. Hovering over an element will briefly show you the code and clicking it will bring up the code and CSS.

Example: Say I wanted to find out what code I need to adjust to change the menu bar. By inspecting the element it showed that I need to change .nav-secondary and that the color is currently

Find a specific CSS element in a blog design

Need some help?

Still not feeling up to making color changes in your theme? I do custom colors to any Genesis child theme for $25. You can request a customization on my services page.

Turn your blog from ugly to lovely with this fabulous self-paced course in an eBookMarianne also has some great tips for designing your blog’s colors in her latest book: Blog Beautiful. She also covers many other areas of blog design.

Your turn: Where do you go for color inspiration?

FacebookTweetPin

Filed Under: CSS and HTML Tutorials Tagged With: blog design Conversation: 4 Comments

Save to Pinterest!

Reader Interactions

Comments

  1. Amy says

    April 3, 2015 at 8:06 pm

    It’s so funny I came across this post because I’m in the process of changing my colour scheme. I found a gorgeous picture and it had the perfect colours. I can’t wait until June when I’m relaunching my blog! Thank you for the tips!!

    Reply
    • Kristie Hill says

      April 4, 2015 at 3:16 pm

      Glad it was perfect timing and that you can pick up the colors from your picture for your new site design. Let me know when it goes live!

      Reply
  2. deonna says

    April 2, 2015 at 11:53 am

    So excited you used my blog as an example 🙂

    Reply
  3. Jen says

    April 2, 2015 at 8:43 am

    Wow, you are my new blogging hero!! Your blog is gorgeous and what great color inspiration!!

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Kristie Hill

Copyright © 2023 · Splendor Theme on Genesis Framework · WordPress · Log in