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% β FC98% β FA97% β F796% β F595% β F294% β F093% β ED92% β EB91% β E890% β E689% β E388% β E087% β DE86% β DB85% β D984% β D683% β D482% β D181% β CF80% β CC79% β C978% β C777% β C476% β C275% β BF74% β BD73% β BA72% β B871% β B570% β B369% β B068% β AD67% β AB66% β A865% β A664% β A363% β A162% β 9E61% β 9C60% β 9959% β 9658% β 9457% β 9156% β 8F55% β 8C54% β 8A53% β 8752% β 8551% β 8250% β 80 - semi-transparent49% β 7D48% β 7A47% β 7846% β 7545% β 7344% β 7043% β 6E42% β 6B41% β 6940% β 6639% β 6338% β 6137% β 5E36% β 5C35% β 5934% β 5733% β 5432% β 5231% β 4F30% β 4D29% β 4A28% β 4727% β 4526% β 4225% β 4024% β 3D23% β 3B22% β 3821% β 3620% β 3319% β 3018% β 2E17% β 2B16% β 2915% β 2614% β 2413% β 2112% β 1F11% β 1C10% β 1A9% β 178% β 147% β 126% β 0F5% β 0D4% β 0A3% β 082% β 051% β 030% β 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.