Alpha

In CSS, there are several formats for colors that can be used. Common ones include RGB, RGBA, hex codes, and HSL. Here we’ll review hex (hexadecimal) color codes and specifically look at changing the transparency of the color by introducing an alpha value too.

What Is a Hexadecimal Number?

Before we get to the CSS-specific tips, let’s first review what a hexadecimal value means.

The word “hexadecimal” refers to a numerical value that uses 16 as a base instead of 10. Using a base of 10 is what most people are used to; after 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 comes 10. In others words, a single digit only has 10 possible values (0 to 9), and after that it must increase to two digits (10).

A hexadecimal value can have 16 values for each digit in a number:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

In effect, it means numbers with multiple digits have many more possible combinations. A two digit value in base 10 can have 100 possible combinations (00, 01, 02… 66, 67, 68… 98, 99).

However, using a two-digit hexadecimal value has many more possible combinations. Since each digit can have 16 possible values, the total possible combinations for a two-digit number is 16 x 16 or 256 possible values.

For example, these are all valid hexadecimal values:

00, 01, 1D, 9D, F5, 99, E4, CC

We’ll leave it at that for the math portion. Let’s move on to the CSS.

Using Hexadecimal Values in CSS

When styling an element in CSS, we’ll often need to update the colors related to it. That could include font color, background-color, border-color, etc.

To create custom colors, we can use combinations of the hexadecimal numbers described above to create hex codes, which represent specific colors.

CSS hex codes are not case-sensitive, so you can use upper- or lowercase values. Often there will be a preference in a codebase for consistency.

But First, Named Colors in CSS

The simplest way to set the color is to just use named colors. Named colors in CSS are valid color names that can be used directly in your CSS styles. For example, if we wanted our header text to be red, we could literally just write red like so:

h1 {
    color: red;
}

There are about 140 named colors in CSS (like red, blue, lavender, etc.) that can be used to avoid figuring out things like the hex codes.

So, why use hex codes? Simply, there are many more options if you want to really customize your app’s color palette! Plus, you can change the transparency more easily.

Hex (Hexadecimal) Codes in CSS with No Alpha Value

The format of the CSS hex code is #RRGGBB. The letters refer to red (RR), green (GG), and blue (BB) so you can think of the 6-character value as being three two-digit hexadecimal numbers; one for each of the three colors.

Don’t forget: in CSS, you need to use the pound/hash symbol (#) before your hex code for it to be valid.

Now that we know our format (#RRGGBB), let’s look at some examples of CSS colors in their hexadecimal format.

Each color you pick will be a combination of a red, green, and blue value. The lowest value (00) will be the darkest version of the color (closest to black), and the highest value (FF) will be closest to white. If we want to only have one of those colors represented in our hex code, we can set the other ones to the lowest value (00).

Let’s say we wanted the brightest red with no green or blue in it. We can set our red (RR) value to the highest possible value (FF). Since we don’t want any green or blue in it, we can set the green (GG) and blue (BB) values each to 00 (the lowest value).

h1 {
    color: #FF0000; // bright red
}

This will look like:

Since hexadecimal numbers are in base 16, the lowest value for a two-digit number is 00 and highest value is FF. The lowest value will have the most black in it.

Similarly, we could say we want no color, which in this case would make the color black.

h1 {
    color: #000000; // black
}

If we put all the colors at their highest value, we get white.

h1 {
    color: #FFFFFF; // white
}

From there, any other combination will give you an entire spectrum of color options.

Don’t worry about learning how to pick the hexadecimal values yourself. There are tons of resources for picking colors that will do the hexadecimal conversion for you!

Adding an Alpha Value to Your Hex Codes

Now that we know what hex codes are, let’s look at changing the transparency of our colors.

Let’s say we want a blue color that is fairly transparent. We can first select our color of blue:

h1 {
    color: #0080FF; // cornflower blue
}

This color will look like this:

Now, let’s say we want our text to be semi-transparent, we can change the transparency by adding two more numbers to our hexadecimal value (also known as the alpha value).

h1 {
    color: #0080FF80; // transparent blue
}

Now our color will look like this:

Wait, what?

So, what’s going on here? Let’s break it down.

Using an alpha value to update a color’s transparency will change the hex code format from #RRGGBB to #RRGGBBAA (red, green, blue, alpha). The first six values (the red, green, and blue ones) stay the exact same. The only difference is the last two values (the AA).

The AA value in #RRGGBBAA can range from the lowest value possible (00) to the highest value possible (FF). The lowest will make the color fully transparent, which means you won’t see it anymore. The highest value will make it completely opaque, which is the default for hex codes anyway.

The alpha value in the hexadecimal format can be a little confusing because it’s hard to conceptualize what a base 16 value for transparency will actually look like. However, the benefit is if you’re already using hex codes in your codebase, now you can update them to change the transparency too! No color format changes required.

Comparing Hex Code+Alpha Format to RGBA

If you’ve had to set the transparency of a color before, you may know there are a few different options. The RGBA color format, for example, is one option instead of hex codes with an alpha value. The RGBA format looks like this:

h1 {
    color: rgba(256, 0, 0, 0.5); // transparent red
}

Each color value (red, green, blue) in the RGBA (Red, Green, Blue, Alpha) format can range from 0 to 256. Unlike hex codes, though, only base 10 numbers are valid (0, 1, 2…255, 256). For the alpha value, any number from 0 to 1 is valid. Think of it as a transparency percentage: 0.5 is 50% transparent, 0.75 is 75% transparent, etc. The closer the number is to 1, the more opaque the color will be.

If number 256 looks familiar here, remember there are 256 valid values for each two-digit hexadecimal number (16 x 16). The RGBA format also accepts 256 valid numbers (plus 0) for each of the red, green, and blue values. That makes hex codes and RGB/RGBA values easily convertible!

Color formats can already be confusing enough before adding the alpha value too. One quick tip for seeing your colors in different formats is with the Chrome DevTools.

Once your DevTools panel is open, look for the color your checking in the styles section. Once you find it, you can click the box to the left of the color to play around with it directly. You can also hold SHIFT and click on the box to toggle through your various format options with the values correctly converted.

(The example above is inspecting a Google search result page.)

CSS Color Resources

Here’s a great tool for converting colors to all the different formats. If you’re curious what the hex codes for CSS named colors are, check them out here.

Browser Compatibility

The browser support for #RRGGBBAA hex codes is great. IE doesn’t support it but otherwise you should be covered. Check Can I Use for details if you’re curious.