Integral components in the language of web designers and developers, it’s easy to gain a topical understanding of hex codes and RGB colors, and then move on. However, even if you know how color codes work, it’s worth looking closer at the science and history behind them.
How color codes work
Color codes communicate the precise levels of red, green and blue that pixels display in order to produce any given color.
RGB color codes use three numerals of up to three digits. The hexadecimal or hex value uses three pairs of characters preceded by a hash. In markup, you’ll see RGB color codes written like this:
And hex values like this:
When we see a color digitally, it’s a combination of red, green and blue light transmitted from pixels on the screen. With displays today capable of higher and higher resolutions, a truly staggering range of colors is available to the web designers and developers.
The difference between hex and RGB
Hex colors are expressed as six-digit combinations of numbers and letters. These color codes are basically shorthand for RGB values. They serve the same function, with a little bit of math conversion thrown in for good measure.
Instead of letters, RGB color values use three sets of three numbers with a range between 0 and 255. For example, let’s take a look at the color teal:
- Hex code — #008080
- RBG — rgb(0, 128, 128)
These element values may appear different at first glance, but the color will be identical when added to your markup.
Recognizing hex colors on sight
But how do you look at the jumble of letters and numbers that is a hex value, and recognize a color? It requires a little mental arithmetic.
To make them shorter, hex values substitute letters when a value reaches two digits — greater than nine — with A being 11. F, the highest value, is 15.
- Multiply the first character by 16 and the second by 1.
- Add the two totals together.
- Repeat this for each of the values for red, green or blue.
- From there, it’s straightforward recognizing how the colors combine.
Adding transparency with an RGBA value
Dive into the CSS for an image with color overlay added, and you’ll likely see something like this:
The last value is the alpha channel, which represents opacity. A value of 0.0 is fully transparent, while 1.0 is fully opaque. Today, most browsers support markup using RGBA.
Finding color codes on a page with Google Developer Tools
While free browser extensions are widely available to let you sample colors on a web page, your browser’s developer tools already include everything you need.
- To get started in Chrome or Firefox, open dev tools with COMMAND-OPTION-I.
- For Edge, hit F12.
- From the Safari menu, go to Preferences, click Advanced, and then select “Show Develop menu in menu bar.”
Let’s do this in Chrome.
- In the filter field, type “color” to find a color in the CSS.
- In the CSS for any color, click the box that displays left of the hash. This opens the color-picker window.
- Click the eye-dropper icon to ensure it’s enabled, not grayed out.
You can click anywhere on the page to get that color’s hex and RGBA values.
Color codes throughout history
The RGB color code dates back to the mid-1800s, when red, green and blue filters were used to produce the first color photos. This idea arrived thanks to the Young–Helmholtz theory of trichromatic color vision, developed by Thomas Young and Hermann von Helmholtz.
By 1938, we had the world’s first color broadcast.
Fast-forward to 1981, when IBM introduced a limited color system for computing. And by 1987, we had the video graphics array (VGA) that allowed monitors to render RGB color.
Little more than a decade later, HTML 3.0 included 16 colors supported by the VGA palette. Around that time, the NCSA Mosaic and Netscape Navigator became the first browsers to render RGB color.
In that era, designers were limited to a mere 256 “web-safe” colors.
However, by the 2000s that was dropped in favor of 24-bit TrueColor — a direct ancestor of the 48-bit system that today can render more than 280 trillion colors.
Start taking back your day
We built the Hub by GoDaddy Pro to save you time. Lots of time. Our members report saving an average three hours each month for every uclient website they maintain. Are you ready to take back that kind of time?
