How To Use CSS Hex Code Colors With Alpha Values - DigitalOcean

Introduction

In CSS, there are several formats for colors that can be used. Common ones include hex (hexadecimal) codes, RGB (red, green, blue), RGBA (red, green, blue, alpha), and HSL (hue, saturation, lightness).

In this article, you will review hex color codes and explore using alpha values for transparency.

Prerequisites

If you would like to follow along with this article, you will need:

• Some familiarity with CSS is required. You may benefit from How To Build a Website With CSS tutorial series if you need a refresher.
• A modern web browser that supports #rrggbbaa hex color notation.

Using Color Keywords

First, CSS supports color keywords. Most browsers and devices can render these named colors into color values.

There are about 140 named colors in CSS (like red, blue, lavender, etc.).

For example, if you wanted your text to have red color, you could use the keyword red:

div { color: red; }

Different value formats, like hex codes, will allow you to customize beyond 140 colors.

Understanding Hexadecimal Values

You are probably most used to counting with decimal values (or base 10):

0, 1, 2, 3, 4, 5, 6, 7, 8, 9

In others words, a single-digit only has 10 possible values (0 to 9), and after that, it must increase to two digits (10).

Hexadecimal values are base 16 instead of base 10:

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

It uses the letters A, B, C, D, E, and F to represent the additional values.

For example, these are all valid hexadecimal values:

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

Next, learn how to use hexadecimal values in CSS styles.

Using Hexadecimal Values in CSS

When styling an element with CSS, you will often be changing the color values for properties like font color, background-color, border-color, etc.

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

CSS hex codes must begin with a “number sign” (#) (also known as a pound sign or a hash symbol). Then, six digits of hexadecimal values. Each pair of two digits represents red, green, and blue. The pattern looks like #RRGGBB (where red is R, green is G, and blue is B).

Colors are represented by a combination of red, green, and blue values. The lowest value (00) will be the darkest version of the color (closest to black), and the highest value (FF) will be the lightest version of the color (closest to white).

Setting all three pairs to the lowest value (00) will produce a solid black color:

div { color: #000000; }

Setting all three pairs to the highest value (FF) will produce a solid white color:

div { color: #FFFFFF; }

Let’s say you wanted the heading text color to be a bright red. To achieve this, you can set the red (RR) value to the highest possible value (FF). Since you do not want any green or blue, you can set the green (GG) and blue (BB) values each to the lowest possible value (00).

div { color: #FF0000; }

This code will render as:

Red Text

By changing the amount of red, blue, and green, you can produce a variety of colors. #DC143C has a large amount of red (DC) - this will produce a “Crimson” color. #EE82EE has large amounts of red (EE) and blue (EE) - this will produce a “Violet” color. #40E0D0 has large amounts of green (E0) and blue (D0) - this will produce a “Turquoise” color.

Note: CSS hex codes are not case-sensitive. This means the alphabetic characters can be upper or lowercase - #ff0000 is equivalent to #FF0000. CSS also supports shorthand values. This means that #F00 is equivalent to #FF0000.

The approach you adopt should adhere to the coding standards used by your project.

Next, learn how to use alpha values with CSS hex codes.

Adding an Alpha Value to CSS Hex Codes

Using an alpha value to update a color’s transparency will change the hex code format from #RRGGBB to #RRGGBBAA (where alpha is A). The first six values (the red, green, and blue ones) remain the same.

The AA value in #RRGGBBAA can range from the lowest value possible (00) to the highest value possible (FF). Lowering the value will cause the visibility to become fainter and fainter until it becomes transparent. Raising the value will cause the visibility to become more and more opaque.

Let’s say you want a blue color that is fairly transparent.

First, start with the hex code for the blue color:

div { background-color: #0080FF; }

This code will render as:

Background Color #0080FF

Next, you can change the transparency by adding two more values to the hex code. In this example, the alpha value is set to 80:

div { background-color: #0080FF80; }

This code will render as:

Background Color #0080FF80

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.

Using Chrome DevTools Tip for Picking Colors

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 adjust the values directly. You can also hold SHIFT and click on the box to toggle through your various format options with the values correctly converted.

This example adjusts the alpha value and color value. Then toggles between hex code format, RGBA format, and HSLA format.

Learn more about the Chrome DevTools Color Picker.

Conclusion

In this article, you reviewed hex color codes and explored using alpha values for transparency.

The browser support for #RRGGBBAA hex codes requires modern browsers. It is not available in older versions of Internet Explorer. Reference Can I Use #rrggbbaa hex color notation to see if this format is suited for the target audience of your project.

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.