/    /  CSS Colors

CSS Colors

 

The color property in CSS is allowed us to set the color of HTML elements. This property is used to set the background color or the font color of an element(text).

 

Predefined color names:

 

  • RGB format.
  • RGBA format.
  • Hexadecimal notation.
  • HSL
  • HSLA
  • Built-in color

 

RGB Format:

 

RGB format is – ‘RED GREEN and BLUE’  and it is used for defining the color of an HTML element. The values of R, G, B are in the range of 0 to 255.

 

Syntax:

 

color: rgb(R, G, B);

 

RGBA Format:

 

It is almost similar to RGB format except that RGBA contains A (Alpha) the element’s transparency. The value of alpha is in the range of 0.0(fully transparent) to 1.0(not transparent),

 

Syntax:

 

color:rgba(R, G, B, A);

 

Hexadecimal notation:

 

It can be defined as a six-digit color representation and it starts with the # symbol. Six characters range from 0 to F. In hexadecimal notation, the first two digits are the red (RR) color value, the next two digits are the green (GG) color value, and the last two digits are the blue (BB) color value.

Black color- #000000, and white color – #FFFFFF

 

Syntax:

 

color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);

 

Short Hex codes:


It is nothing but a hexadecimal notation in which each digit is recreated to arrive at an equivalent hexadecimal value.

Example, #7B6 becomes #77BB66 in hexadecimal.

 

HSL:

 

HSL full form is – Hue, Saturation, and Lightness.

Hue: The colors wheel from 0 to 360.

  • 0 represents red
  • 120 represents green
  • 240 represents blue

Saturation: It takes value in percentage in which 100% represents fully saturated, i.e., no shades of gray, 50% represent 50% gray.But the color is still visible, and 0% represents fully unsaturated, i.e., completely gray, and the color is invisible.

Lightness: We want to provide the color in which 0% represents black (no light), 50% represents neither dark nor light, and 100% represents white (full lightness).

 

Syntax:

 

color:hsl(H, S, L);

 

HSLA:

 

It is entirely similar to the HSL property, except that it contains A (alpha) and the element’s transparency. The value of alpha is in the range 0.0(fully transparent) to 1.0(not transparent.).

 

Syntax:

 

color:hsla(H, S, L, A);

 

Built-in Color:

 

Syntax:

 

color: color-name;

CSS Colors