The preferred way to set colors on your Web pages is via CSS or CSS3 and hex digits. Learn more about how to color your online world.
The most obvious place to use hex digits is with colors. If you were to write out the RGB color values for white, as an example, the numbers would be written as 255,255,255, but in hexadecimal code, this would be written as #FFFFFF. The first two digits represent red, the second two digits represent green and the last two digits represent blue.
The codes for the colors are not exactly intuitive, so please refer to this chart.
As to how the hex code would appear on a web page, this is how it would be written:
Red rgb(255,0,0)
Green rgb(0,255,0)
Blue rgb(0,0,255) Taken further, if you wanted to use this code within a web page, here’s an example of how it would be used with blocks of color:
Listing 1. CSS Hex RGB
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
div {height:100px;width:100%;}
</style>
<body>
<div style="background-color:rgb(255,0,0)"></div>
<div style="background-color:rgb(0,255,0)"></div>
<div style="background-color:rgb(0,0,255)"></div>
</body>
</html> 
Fig. 1: Here’s what it would look like in a browser.
CSS3 and Hex Digits
In CSS3, there is an added dimension — opacity, so instead of RGB, it is now written as RGBA where “A” stands for “alpha.” This controls the opacity of a color. The code would be written this way: rgba (red, green, blue, alpha). The alpha parameter goes from 0.0 (completely transparent) to 1.0 (completely opaque).
Listing 2. CSS3 Hex Digits with Opacity
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
#p1 {background-color:rgba(255,0,0,1.0);}
#p2 {background-color:rgba(0,255,0,0.6);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p id="p1">RED</p>
<p id="p2">GREEN</p>
<p id="p3">BLUE</p>
</body>
</html>
Fig. 2: RGBA CSS3 Hex codes with opacity.
In addition to what you see here, CSS3 supports HSL colors and HSLA colors.
The alpha channel offers a lot of flexibility. No longer are you limited to just solid colors. You can use colored backgrounds and text in variety of combinations and you could even use that to make transparent images.
And if that’s not enough, CSS3 allows you to create gradients. You can save a lot of time this way and conserve on bandwidth because you can create everything you need using code.
CSS3 hex digits allow you to define gradients in two ways:
- Linear gradients (which go up/down/left/right/diagonal)
- Radial gradients (these are gradients which are defined by a center point)
In addition to being able to create gradients, you can make use of the alpha channel and create gradients with transparency. Being able to work in this way eliminates the need for image editing programs.
Related Resources
- Hex Code Chart
- How To Change Text Color Using HTML and CSS
- How to Code Background Colors in HTML Email Newsletters
About the Author
Nathan Segal has been working as a freelance writer for 18 years. In that time he has published more than 1,000 articles and has written 9 books. You can learn more about him at http://NathanSegal.org.
