Obviously, color is an extremely important aspect of web design and style. Figuring out the right colors to use is not easy for a lot of people. I put together a bunch of helpful resources to make it a bit easier to find colors and different color schemes. In addition, I explain to those who are unfamiliar how exactly to use the colors you find to change the look of your website.

Color Resources

4096 Color Wheel

The 4096 Color Wheel is where I go when all I need is the Hex code for certain colors. The site is very simple to navigate; just click a color on the wheel that is close to one you want to use, then use the palette next to it to find the perfect shade. Once you click on the shad you like, you’ll see it show up on the leftmost color chart.

The Color Wizard

Looking for a site that makes color matching easy? Check out The Color Wizard This site makes picking out color themes for a website a piece of cake! Use the color sliders to pick a color that works for you, and the site will find color variations of similar Hue, Saturation, Tint, & Shade. Once you’ve found the color you’re happy with, go to the bottom right corner of the site and you’ll see SUGGESTED COLOR SCHEMES. These are generated from the color you’ve chosen, and you can look at different choices of schemes including: Monocromatic, Analugus, Triadic, Tetradic, Complimentary, and Split Complimentary. Personally, I think the Monocromatic palettes are the best. This is my favorite of the bunch!

Color Scheme Chooser

The Color Scheme Chooser is a site I found recently. This site does almost exactly what the Color Wizard does, so there is no need for me to repeat myself. I suppose people might pick one over the other, but it would be soley for personal preference.

Color Theory Lessons

The final resource I thought worth mentioning is a site devoted to Color Theory Lessons. If you’re interested in learning more about color and color theory, this site has a great tutorial that walks you through everything you want to know. Explore things concepts including complementary colors, color & contrast, shades & tints, and much more.

How to Use Hex Colors in HTML

If you’re interested in web design or simply jazzing up your blog, you will need to know how to tell your computer what color you want to use. As a result, you will likely need to use something called hex colors. Put simply, hex color codes represent different colors that we can see. They are codes that make it easy for a computer to understand what color you’re referencing.

Without them, we’d need words to describe every color in the spectrum. They simplify things. I’m not going to go into too much detail here, but I’ll give an example that demonstrate the use of these codes:

If you wanted to change the color of text to a color of your choice, all you need to do is use the font tag and place a hex color code in it.
e.g. <font color=”#ff0044″>Text Here</font> will make your text a strawberry red. As you can see it is very simple to do once you understand what you’re doing. You can change background colors, table colors, and much more using these hex codes. For more info on different HTML tags, visit this site.

9/24/08 Update: We forgot to add a resource for Triple Hex Color Codes at the time of writing, but the link will take you to a great resource to help with that.

1/30/10 Update: I just learned about another cool color tool called ColorRotate.com. Check it out!

Blogging is esentially easy. Formatting your blog posts so they have some style and flavor is a bit more difficult. One of the more important elements in blog posts are graphics or images. These serve to both break up the text, and to add interest to your articles. I thought it was important to write a post covering how to place images in your blog posts to help out all those people who have been having trouble doing so (see disclaimer at end of post). This tutorial will focus on WordPress blogs, but it will have alternatives for other blog software as well.

When Should I Use Images in my Posts?

I find that the best use of images are when they are directly related to what you’re writing (e.g. if you’re writing about flowers, then use images of flowers), or when they are somehow metaphorically related (e.g. I wrote an article Are Alexa And DMOZ Down For The Count? and used the image of a boxer to go with it). This is not to say that you can’t use images otherwise, but when these situations come up, I think it is a given that you should.

I discovered a blog a few months ago called DoshDosh that uses images with every post. Maki’s use of manga images keeps his blog colorful and interesting (not to mention his articles are extremly well written and thorough). In this case, placing themed images with all his posts works to build some interest and break up the monotony of the page.

How to Add Images to Your Blog Articles

There are a few ways to add images to your articles using WordPress.

I. Use Image Hosting Services to Host Your Blog’s Images

The first way to add an image to your post is to use some kind of image hosting service. Nirmal T V wrote a great post the other day where he shared the Top 5 Image Hosting Services and gave detailed explanations of each. Any of the ones he listed, including: Flickr, Photobucket, Picasa, Imageshack, and Yahoo Photos, or any other online image hosting service will work for you.
How to Add an Image to Your Articles with Free Hosting Services

1. Pick a hosting service and register or log in
2. Find the Upload button or link
3. Click the browse button which will allow you to search your computer for images and click on the name of the image you want to upload.
4. Add details about the image as asked by the website.
5. Voila! Your image is now hosted.
6. Click on the image with the right button (or for your Mac users do it while holding control down) and select “Copy Image Location.” Your image’s location will now be in your computer’s memory.
7. Go to your blog post, and where you want to add your image (be sure you’re not using a WSIWYG editor. In wordpress, this means click on the CODE Tab if you’re writing our post with the VISUAL tab active),
   

   enter the following, replacing “PASTE IMAGE LOCATION HERE” with the actual location (use control-v or in your browser’s menu options go to edit, then paste):
   
   <img src=”PASTE IMAGE LOCATION HERE”>

8. Congrats! You now have an image in your article. Click “Save and Continue Editing” at the bottom of the text box where you write your blog entries, and you’ll be able to see your image in the preview window as you scroll to the bottom of your browser window.

II. Using Wordpress to Add Images

Wordpress makes it very easy to add images to your website.

1. Decide where in your post you want your image to appear and click there.
2. Find the following area of your wordpress control panel (while writing or editing a post):
   

3. Click the browse button which will allow you to search your computer for images and click on the name of the image you want to upload.
4. Once you’ve clicked on the file, you’ll want to click the OPEN button in the pop-up window. You’ll see something similar to:
   
   

5. Fill out the title and description boxes and then click on the UPLOAD button. Your browser will upload the image and you’ll see the following:
   
   

6. Click on the button options that you’d like, then click on SEND TO EDITOR
7. The source code for the image will now be set and you’ll have an image. Save and preview your post and you’ll see your image!

Stay tuned for additional posts in the Images & Blogging Series:
Part II - Photo Formatting & Advanced Photo Layouts
Part III - Where to Find Images & Proper Use

Disclaimer: This post is dedicated to my friend Charles Feldman who has been asking me to teach him this for a long time now. Hope this helps!

In a guest assignment for Darren Rowse’s ProBlogger, Alister Cameron writes an incredible post detailing how Google Blogsearch ranks your blog posts. Using the Google Blogsearch patent application, Alister reveals some incredible information about the data Google uses to determine the quality of a blog or blog post.

He mentions how it looks like Big Brother, and it really does. It appears as though Google is taking data from not only their search results, but from blogrolls, from the qualit of a site lnking to you, from feed subscriptions on the Google Feed Reader, from chats on GTalk, from emails on Gmail, etc. They then use their fancy algorithms to determine weight and ranking. I’m not sure about you, but it looks to me like we have to worry less about the government spying on us then we do Google. Orwell was somewhat correct, but in the real future, it is big business, not governments that are truly to be feared (thanks Charles).

That said, there is much to learn from examining the article on Problogger, as the insight it provides is invaluable. If you haven’t done so already, be sure to bookmark the site, as it is one of the top blogs out there about the “sport” of blogging.

I figured that there is no more fitting way to kick off this site, Time For Blogging, then to share with you my favorite Webmaster & SEO Tools. Every webmaster has his own toolbox and these are some of my favorites:

Color Wizard
What better way to design your website then to color coordinate it. The color wizard will suggest tints, shades, and color schemes based on an initial color of your choosing.

Convert Hostname to IP Address
Returns IP address of any given site. Useful when you’re figuring out referrals from your log files.

CopyScape
Find out if someone is plagiarizing your site’s content. If this happens to you, contact their host and notify them of the copyright infringement. They should handle it for you fairly quickly.

CrazyEgg
Lets you evaluate what your users are clicking on when visiting your site. Creates a really cool heatmap showing a visual overlay of where people click most on your site.

DynamicDrive’s Favicon Generator
Turns any image or logo into a favicon.

Keyword Optimization Test
Rank and makes recommendations on how well your site is optimized for yoru keywords.

Overture Keyword Suggestion Tool
Reveals the number of times certain keywords are searched; also suggests additional relevant keywords.

SEO Strength Tool
According to SEOmoz, creator of the tool, “The tool is designed to satisfy the curiosity of webmasters, surfers and web marketing professionals seeking a better metric to quickly assess a site/page’s relative importance and visibility.” There is debate in the SEO community how useful the tool actually is, but it is a good start to find how relevant your site is.

Scrutinize This
171 different tools covering SEO, design, validation, accessability, and more.

Site Report Card
Creates website analysis, optimization and promotion reports.

Whois
Find out who the owner of a website is. Very useful when someone is stealing your site’s content. Use this information to find the site’s host and report them.