Color values (hex, rgba, color names)
An overview of the 3 common ways colors are represented on the web: Color names, Hex codes, and RGBA.
Sometimes, using a color picker can be all you need to choose a color to work with. However, if you need precision, you want to get more specific.
Colors are represented in three common ways on the web:
- Color names
- Hex codes
HTML color names are the common color names for 140 colors that are supported by modern browsers.
It’s easier to remember and use “Blue” instead of #0000FF. Still, most of these names are somewhat arbitrary LawnGreen, PeachPuff, BlanchedAlmond, etc.
Also, HTML color name lists aren’t a full representation of what's entirely possible with web colors. So, to have more color choices to choose from, you can use one of the other formats.
Hex codes are usually six-digit codes that correspond with a precise color output.
They are also called hex triplets because they are made up of three sets of two digits. Red, green, and blue. The same three colors that make up each pixel in a display.
As you increase the value of a particular color, the more of that color you get in your output. You can play with the red, green, and blue to get virtually any color you can think of.
The value for each color is written using the hexadecimal or hex, a base-16 numbering system. The hexadecimal numbers start from 0 to 9 and then add the letters a through f before switching to 10.
Shorthand hex is a representation of a 6-digit hex in only 3 digits.
You can use shorthand hex if you’re working with a color that has repeating digits in all three of the color values. Like AA-BB-CC or 44-11-EE. You can simply omit the second digit for each color, making it ABC or 41E.
For example white is #FFFFFF and can be written in short as #FFF.
On the other hand, RGBA values are represented with the base-10 number system you are familiar with.
RGBA uses the values 0 through 255 to represent each color. Red, green, and blue. That’s 256 levels of red including zero.
The A is for Alpha transparency. So, with RGBA, you can also control the opacity from completely transparent (i.e, 0) to fully opaque (i.e., 1). The lower the alpha, the more transparent the color. The higher the alpha, the more opaque.