HTML Color Codes: Hexadecimal & RGB

HTML color codes play a crucial role in web development, influencing the visual aesthetics and user experience of a website. They're essential for creating visually appealing and cohesive web pages.

In this tutorial, you'll learn how to work with colors in HTML using hexadecimal and RGB color codes. Afterward, I've provided a reference to the 140 predefined color codes and names available for you to use in your code along with their hexadecimal and RGB values.

Basics of HTML Color Codes

HTML color codes are alphanumeric representations of colors used in web design. They can be specified in various formats, but the most common ones are hexadecimal (hex) and RGB (Red, Green, Blue).

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

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.

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

RBGA Color Codes

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);

HTML Color Code Reference 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 hexadecimal and RGB values:

Conclusion

Understanding HTML color codes is fundamental for creating visually appealing and harmonious web designs. Whether you're using hex, RGB, named colors, or RGBA, the key is to experiment and find the color schemes that best suit your website's aesthetics. As you delve deeper into web development, mastering color codes will empower you to create engaging and user-friendly interfaces.