Colors in #CSS Day05/100

In CSS, colors can be defined in several different ways.

Color Names

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 : color:red;

Cons:

• 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 0 to 255 or a percentage.

Example of colors using RGB values

Setting the value in CSS: color: rgb(255,255,255)

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

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 00 to FF

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

HSL

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 0% to 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%);

HSLA

“A” stands for alpha channel, which determines the opacity of the color, between 0 to 1

background-color: hsla(0, 100%, 50%, 0.5);

I hope you all enjoyed the mini-color session, until tomorrow... 👋