Colors in #CSS Day05/100
In CSS, colors can be defined in several different ways.
The easiest and the most intuitive way to set colors is by name. The most common being:
There is a list of special keywords that can be used to identify colors. The colors are set in CSS :
- Limited Choice
- Not possible to get shade combinations
RGB Color Model
Another way is by using decimal RGB values (Red, Green, Blue). An RGB value is set using the
rgb() property. The property takes 3 integer values from
255 or a percentage.
Example of colors using RGB values
Setting the value in CSS:
RGB Calculator can be used to get the desired color.
RGBA : A for Transparency
The RGBA (Red Green Blue Alpha) scheme complements RGB with another number factored for transparency. Its value can be specified from
0 (completely transparent) to
1 (complete opacity).
The previous color setting can be made semi-transparent by setting
color: rgba(255, 255, 255, 0.5);
HEX is mostly the same as RGB, but it is recorded in the hexadecimal notation. Each pair of characters means the same sequence of colors: red, green, and blue in the range from
Colors in HEX code:
A HEX code generator can be used to get the desired color.
HEX color value is set as
color: #FFFF00; The values are not case-sensitive.
The values can be shortened depending on color code
The color is defined by three parameters: Hue, Saturation, and Lightness.
Hue is an angle on the color wheel:
Color corresponds to a certain number of degrees without any units of measurements for a shade.
Saturation of the selected shade is indicated as a percentage in the range from
100% . The closer the value is to
100% , the more saturated the color looks.
Lightness is measured as a percentage. The closer the value is to
100% , the lighter the color is.
Setting the value looks like this:
background-color: hsl(0, 100%, 50%);
“A” stands for alpha channel, which determines the opacity of the color, between
background-color: hsla(0, 100%, 50%, 0.5);
I hope you all enjoyed the mini-color session, until tomorrow... 👋