HTML Hex Color Codes Guide

As you probably know, the color system in HTML is a little different than what we might expect. Instead of using easy-to-remember names for our colors, we have to memorize what are called "Hex" codes.

Each code is made up of 6 digits preceded by a "#" sign. For example, the code to make your site's body background color white in hex is...

<body bgcolor="#FFFFFF">

Now, why is this? Why couldn't we have just typed "white" into our code? Well, we could very easily have typed "white" and it would have worked too. For simple color names like "white" or "blue" or even "aqua," typing them out will most likely work in most browsers.

The difficulty comes when we try to use more sophisticated colors - because there are literally thousands of different gradients! Can you imagine typing out "kind-of-light-teal" as a web color? This is where Hex comes in.

In Hex, every single color imaginable is represented as a combination of red, green, or blue. After our "#" symbol, we see six digits. The first two of these digits represent the amount of red we want in our color, the second two represent the amount of green, and the final two represent the amount of blue. Of course...

Memorizing all the different ways red, green, and blue combine is a little tedious. That's why you should just have a reference area to quickly find the colors you need. Enter this page!

To find your perfect color, simply click on any box below and it will output your color in its handy text field.

I hope you enjoy! Even though it might seem intimidating to memorize Hex names, frequent use will quickly burrow them into your memory.