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

{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.

one



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!}

two



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}

three



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.

four



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

five



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!

six



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.

seven



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!}

eight



click on the "custom" tab

nine



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.

ten



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!

eleven



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?