Using Hex Colors to Improve Your Website Design

Choosing colors for your websiteOn the internet, colors are defined by numbers–“hex” numbers to be exact. For instance, #000000 is black and #FF0000 is red, and #66FFFF is baby blue.

There are more than 16 million colors that you can define using hex numbers.

When creating a website, your color options are almost limitless. You can choose font colors, banner colors, background colors and much more and all these colors will be defined by hex numbers. By understanding how hex colors work, you can easily improve the design and color of you site by making sure your colors are both well chosen and consistent.  After-all, if you know what the hex number is for your favorite shade of green, you don’t have to try and match that color on your site, all you have to do is type in the 6 digit code.

The HostBaby Color Picker

When you’re working in the Theme Editor of your HostBaby site and you click on a color option, you’ll see a color picker just like the one on the left. You can use the color picker and simply drag your mouse around the color-scape until you find what you like, or if you know the exact hex number of the color you want, you can simply type it in.

While I love the HostBaby color picker, and use it all the time, I also find that using a few additional color tools to discover colors, can also be helpful.

You can use a simple online tool like this to figure out hex numbers:

http://www.w3schools.com/tags/ref_colorpicker.asp

Or you can use a super cool feature like the “color scheme designer” to pick out a whole color scheme.

http://colorschemedesigner.com/

Just remember to save those hex codes and then you can enter them directly into the Theme Editor when you are working on your website editor.

But what if you’ve uploaded a picture, logo, or photograph and you want to match your colors to that?

In this case you need a way of matching colors to an image that’s already been created. You’ll need something like an ‘eye dropper’ tool to capture the hex code of the color you want. There are probably hundreds of ways of determining hex colors from an image or web page. Most image editing programs such as Photoshop will allow you to get the hex color from any area of an image.

I usually use a browser plugin, so the color-picker is always just a click away. Both the Chrome and Firefox browser’s have very handy plugins for determine the hex color of something on the web. All you have to do is click on an image or a photo and you’ll get the hex color of the pixel you clicked on. Pretty neat!

For Firefox, I’d recommend this free plugin: Colorzilla https://addons.mozilla.org/en-US/firefox/addon/colorzilla/

For Chrome, I’d recomend: Colorpicker 9 https://chrome.google.com/webstore/search/colorpicker

How do you choose colors for your website? Do you have any cool tools to recomend? Let us know in the comments below!

Build a colorful website with HostBaby today!