Hey y'all! I'm Skye and I believe in three things: living a simple life, running a savvy business, and having sound finances! I've been blogging and running my own business for over ten years now and I've gained a lot of knowledge that I am here to share with YOU. Learn how to perfect and balance these three aspects of your life and it will trickle out into every other area of your life, like your marriage, parenting skills, and relationships!

Learn More about my Mission

Five Day Money Makeover Challenge

Are you ready to give your finances a total makeover? Download my Five Day Money Makeover Challenge!

Download your Challenge Here!

{blogging basics: six-digit hex color grab tutorial}

i'm back with another blogging basics tutorial. i hope you are able to use what i have learned from redesiging my blog to add some flare and personalization to your blog! :) 

today, as i promised, i have a tutorial for you on how to coordinate your colors from a picture to microsoft publisher or word. it is really simple and i bet you will finds lots of ways to use it! :) i used this method to coordinate the graphic elements i created for my blog (read about the redesign here) to the ones i purchased from etsy.



find a graphic that you want to pull a color from. here i am using a mini scalloped edge circle graphic from pugly pixel. i want to use a color from the picture to color my font so that they coordinate.

{ps pugly pixel is a great resource for blogging graphics, tips and tutorials! she offers free graphics downloads or for $5/month you can become a premium member and download even more graphics. if you buy graphics off etsy, you will more than likely pay $5 for one set of pictures so it is really a great deal!}



upload your picture into flikr and then open it up in picnik for editing.

{for a full tutorial on uploading pictures into flikr and opening them in picnik click here}



click on create and then frames. you can use the little "paint brush" that shows up to choose a color for your frame on the given color palette or you can roll over any portion of the picture and it will "grab" that color for you.



here we have a lovely mauve color pulled from the center of a rose. look over at the color palette. do you see that combination of six letters and numbers in the box? that is the six-digit hex color code



i decided on a soft green to use. so i made note of that six-digit hex color code. make sure you write it down. you will need it in a minute!



open up a new tab in your browser and go to color-hex. in the box in the right hand corner type in your six-digit hex color code and then click on "get color info"

this will give you a wealth of information about this color, like its RGB code (which is what we will be using in a moment), its coordinating (or triadic) colors, colors pertaining to a monochromatic palette, its complementary colors, css codes, background examples, font examples... the list is quite exhaustive. scroll down and look at all of the examples it gives you and this will help determine if you like the color in all the different elements and if it is going to be useful for what you need it for.

for use in publisher, write down the three numbers in the RGB code.



go back to publisher (or word, whichever you might be using) highlight the text you want to change the color of and go to format (in the toolbar) > font > and color. from there choose "more colors"
{ps the font came from kevin and amanda - for free!}



click on the "custom" tab



using the RGB code you copied from earlier, put these numbers in their coordinating box. as far as i know they will always in the order of red, green, blue. in this case the code was 201, 201, 130. so this color is 201 parts red, 201 parts green and 130 parts blue. then click on ok.

for as long as you have this session opened that you are working in the color will be available to use in your colors without having to input the color code every time. meaning that when you close publisher or word you will have to do this process again to get the same color.



now you can see that the color of the font is now the color we chose from the picture! yay! pat yourself on the back!



if you go back to the color-hex picture above you will see several other available codes. if you want to use one of those instead you can click on the drop down box and choose the coordinating code type to input. you can also access pantone colors from here as well.
so there you have it! although there are a lot of steps involved, it is really a simple process!

next up, i am designing a couple of headers to surprise my friends so i will be showing you how to do the same in microsoft publisher! :) anything else you want to know? is there an easier method for this that i don't know of without using photoshop?


  1. You are so clever. I am so impressed with how knowledgable you are about all of this! Plus, my blog design rocks my face off, thanks to you!

  2. Thanks for sharing this! I will be saving it out and trying it out very, very soon!

    For the record, your brilliant! =D

  3. I was just about to tell you that it's so much quicker and easier in Photoshop and I then I saw where you said without Photoshop.

  4. Wow! This is super helpful - I'm so lost when it comes to this stuff!!


© Skye McLain - Simple Life, Sound Finances, & Savvy Business • Theme by Maira G.