HTML Color Codes: RGB & Hexadecimal

In this tutorial, you'll learn how to create colors in HTML using RGB and hexadecimal color codes. Afterward, I've provided a reference to the 140 predefined color codes and names available for you to use in your HTML code along with their RGB and hexadecimal values as a quick reference. Let's get started by exploring each method!

HTML Color Codes

HTML color codes are used to represent color in a format that a computer's display can interpret and understand. These values include RGB colors, hexadecimal values, color names, and more.

We'll go through a few of these different methods so you can get an understanding of how it all works!

RGB Color Codes

RGB color codes are defined a bit differently using three parameters in this format:

rgb(red, green, blue)

Each parameter above defines the intensity of the color using integers between 0 and 255, where 0 is the complete absence of color and 255 is the full presence of color.

With that in mind, the colors red, green, and blue can be defined using the following color codes:

rgb(255, 0, 0) - Red
rgb(0, 255, 0) - Green
rgb(0, 0, 255) - Blue

Changing the Opacity of RGB Colors

To expand on RGB color codes a step further, you can also change the opacity of your defined color using a different method rgba(), where the a means alpha, and can be defined by setting a decimal value between 0 and 1.

Here is an example that would show the color red at full opacity:

rgba(255, 0, 0, 1);

And here is an example that would show the color red at 50% opacity:

rgba(255, 0, 0, 0.5);

Hexadecimal Color Codes

The most popular method used to date is hexadecimal color codes. They're essentially three-byte hexadecimal numbers, meaning they consist of six digits. Each byte is a two-character code that represents the intensity of three colors: red, green, and blue. Here's a visual representation of how these character codes are organized:

#XXXXXX

Hexadecimal code values range from 00, the lowest color intensity, to FF, the highest color intensity. Respectively, #000000 represents black, or the full absence of color, and #FFFFFF represents white, or the full presence of color.

Using the visual representation for how hexadecimal color codes are defined above, we can now determine how to define the colors red, green, and blue:

#FF0000 - Red
#00FF00 - Green
#0000FF - Blue

Again, where 00 represents the absence of color and FF represents the presence of color. Once you get the hang of it, this makes it easier to determine color definition with hexadecimal codes on the fly.

HTML Color Code Chart

Modern browsers support the full spectrum of 24-bit color, meaning there are 16,777,216 different color possibilities to choose from. That's a lot of color choices! Too many for anyone to have time to sit down and sort through them all.

Luckily, you don't have to! HTML provides 140 unique color names that make filtering and choosing a lot easier. Here is the full list of color codes and names available, along with their associated RGB and hexadecimal values:

Conclusion

Thankfully, HTML makes it easy to choose a quick color on the fly with its predefined color names. However, you can get real crafty and explore the over 16.7 million color codes, picking the perfect color for your page elements.