Jess Mitchell
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.
If you would like to follow along with this article, you will need:
#rrggbbaa
hex color notation.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.
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.
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:
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.
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:
#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:
#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.
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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
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 ).
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 ).