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.
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.
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.
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.
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.
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.
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.
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.
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
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.
Marianne 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?
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!!
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!
So excited you used my blog as an example 🙂
Wow, you are my new blogging hero!! Your blog is gorgeous and what great color inspiration!!