CSS tutorial series: Colors

Up until this point, in our previous tutorials we have used built-in color names like green, red, yellow, and so on. You can checkout color names that are supported by all browsers Here

These well-known color values are extremely limited and insufficient to create the kinds of designs you see on the internet today.Let's look at the various ways that colors can be defined in CSS.

RGB Colors

rgb(red, green, blue) is a way used to define colors. Each parameter's value ranges from 0 to 255, where 255 denotes the color's highest possible intensity and zero denoting no intensity at all. A lighter color will result from a higher number of red, green, and blue. Red, for instance, would be represented as 'rgb(255,0,0)'.
White will result from setting the red, green, and blue parameter to the highest value rgb(255, 255, 255).

RGBA

RGBA color values are an extended version of RGB color values; they operate similarly but include an additional channel called alpha channel that denotes the opacity of a color. rgba(red, green, blue, alpha).
The alpha parameter is a value between 0.0 (complete transparency) and 1.0 (no transparency):

.container {
  background-color: rgba(255, 0, 0, 0.5); //50% transparency
}

Hexadecimal Colors

Hexadecimal colors, also known as Hex color codes, are values that specify a color's intensity. Hex colors are represented by the special code #RRGGBB, where each two letters red, green, and blue range from 0 to FF.

For values between 1 and 9, numbers are used. When the value exceeds 9, letters are used.
A represents 10, B represents 11 and so on up until F which is 15.

.container {
  background-color: #FF0000;
}

#FF0000 will appears red, due to the red value being set to its highest value, FF, and the other values being set to 0.

HSL Colors

HSL is an acronym for hue, saturation, and lightness.

source: StackOverflow

On the color wheel, hue ranges from 0 to 360 degrees. Red is 0, green is 120, and blue is 240.

Saturation is expressed as a percentage.100% is the full color, while 0% represents a particular grayscale. One way to think of saturation is as a color's intensity. For instance, 50% is gray, but the color is still notable.

Similarly, lightness has a percentage value. A color's lightness can be explained as the amount of light you want to add to the color, where 0% indicates no light (black), 50% a color that is neither completely dark nor completely light, and 100% a color that is completely light.

Here's an example of HSL

.container {
  background-color: hsl(0, 80%, 50%);
}

Similar to RGB, HSL also has an alpha channel that represents the opacity of the color and functions in the same manner hsla. This parameter is a number between 0.0, which indicates complete transparency, and 1.0, which indicates no transparency.

.container {
  background-color: hsla(195, 74%, 59%, 0.5);
}