Tools for Finding the Right HTML Hex Colors: Color Codes, Charts, Wheels, & Wizards

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!