All original content is created in Ukrainian. Not all content has been translated yet. Some posts may only be available in Ukrainian.Learn more

How to use hex color codes in CSS with alpha values?

This content has been automatically translated from Ukrainian.
In CSS, there are several ways to represent colors that can be used. Common formats include RGB (red, green, blue), RGBA (red, green, blue, alpha channel), HSL (hue, saturation, lightness). The most popular is the hexadecimal (HEX) code.
CSS supports named colors. Most modern browsers can read and interpret them. There are currently 147 such colors. All of them are written in English (red, yellow, yellowgreen, etc.)
CSS representation looks as follows:

div {
	
  color: blue;

}
The hexadecimal numbering system consists of the digits 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 and the letters A, B, C, D, E, F. Using HEX (hexadecimal), you can represent almost any color in CSS.
Using HEX color in CSS
The HEX color code is used in CSS as a value for properties (e.g., color, background-color, etc.)
Β 
The structure is as follows:
Β 
object, opening curly brace ({)
property name, colon (:), value, semicolon (
closing curly brace (})
Β 
 div {
   color: #HEX-code;
 }
Β 
Β A hash sign (#) must precede the HEX code. After it, the HEX value of the desired color should be written in the format #RRGGBB.
Β 
Β The pairs RR correspond to red (Red), GG to green (Green), and BB to blue (Blue).
Β 
Β You can also use a shorthand notation for some colors - #RGB
Using hexadecimal color with alpha channel
HEX with alpha channel (Alpha) is written as HEXA.
HEX ALPHA is written in CSS as #RRGGBBAA where AA is the alpha channel value. AA is also a hexadecimal value, but this hexadecimal code represents the transparency level of the color.
A 100% transparency level has the value FF. That is, any color with a 100% transparency value in the alpha channel is a completely transparent hexadecimal code (color).
For example #F2F2F2FF
The term hexadecimal transparency code is not very accurate. A more accurate term would be the transparency level of the hexadecimal color code, or the alpha channel of the hex code.
Hexadecimal transparency codes for the alpha channel of HEX color:
100% β€” FF - full transparency.
99% β€” FC
98% β€” FA
97% β€” F7
96% β€” F5
95% β€” F2
94% β€” F0
93% β€” ED
92% β€” EB
91% β€” E8
90% β€” E6
89% β€” E3
88% β€” E0
87% β€” DE
86% β€” DB
85% β€” D9
84% β€” D6
83% β€” D4
82% β€” D1
81% β€” CF
80% β€” CC
79% β€” C9
78% β€” C7
77% β€” C4
76% β€” C2
75% β€” BF
74% β€” BD
73% β€” BA
72% β€” B8
71% β€” B5
70% β€” B3
69% β€” B0
68% β€” AD
67% β€” AB
66% β€” A8
65% β€” A6
64% β€” A3
63% β€” A1
62% β€” 9E
61% β€” 9C
60% β€” 99
59% β€” 96
58% β€” 94
57% β€” 91
56% β€” 8F
55% β€” 8C
54% β€” 8A
53% β€” 87
52% β€” 85
51% β€” 82
50% β€” 80 - semi-transparent
49% β€” 7D
48% β€” 7A
47% β€” 78
46% β€” 75
45% β€” 73
44% β€” 70
43% β€” 6E
42% β€” 6B
41% β€” 69
40% β€” 66
39% β€” 63
38% β€” 61
37% β€” 5E
36% β€” 5C
35% β€” 59
34% β€” 57
33% β€” 54
32% β€” 52
31% β€” 4F
30% β€” 4D
29% β€” 4A
28% β€” 47
27% β€” 45
26% β€” 42
25% β€” 40
24% β€” 3D
23% β€” 3B
22% β€” 38
21% β€” 36
20% β€” 33
19% β€” 30
18% β€” 2E
17% β€” 2B
16% β€” 29
15% β€” 26
14% β€” 24
13% β€” 21
12% β€” 1F
11% β€” 1C
10% β€” 1A
9% β€” 17
8% β€” 14
7% β€” 12
6% β€” 0F
5% β€” 0D
4% β€” 0A
3% β€” 08
2% β€” 05
1% β€” 03
0% β€” 00 - full opacity
The alpha channel level ranges from 0 to 100 percent. A completely opaque hexadecimal color will have 00 at the end of the HEXA format #RRGGBBAA.
For example #F2F2F200
Semi-transparency is an alpha channel that will have a transparency level of 50% (80). That is, a semi-transparent color in CSS will have 80 at the end of the HEXA format #RRGGBBAA.
For example #F2F2F280
A semi-transparent text color in CSS:
p {
  color: #F2F2F280;
}
A semi-transparent background color in CSS:
div {
  background-color: #F2F2F280;
}

This post doesn't have any additions from the author yet.

03 May 17:46

What to do if the webcam is not working on macOS?

meme code
meme code@memecode
03 May 18:48

How to get a random logical value true or false in Ruby?

meme code
meme code@memecode
06 May 09:19

How to disable File Upload in the Trix editor?

meme code
meme code@memecode
16 May 20:02

What is Origin in Git?

meme code
meme code@memecode
16 May 22:17

How to remove the space between inline and inline-block elements?

meme code
meme code@memecode
17 May 18:52

What is a loop in Javascript? How do for and while loops work in Javascript?

meme code
meme code@memecode
22 May 16:26

What is the difference between <%, <%=, <%# and -%> in ERB templates (Ruby on Rails)?

meme code
meme code@memecode
23 May 06:57

What is debugging?

meme code
meme code@memecode
23 May 07:41

What are attr_accessor, attr_reader, and attr_writer in Ruby? What are they used for?

meme code
meme code@memecode