Colors

Colors

The CSS data type colour represents a colour. A colour may additionally have an alpha-channel transparency value, which specifies how the colour should blend with its surroundings.

Any of the following methods can be used to define a colour:

  • Making use of a keyword (such as blue or transparent). In the sRGB colour space, all existing keywords define a colour.
  • The RGB cubic-coordinate system (through #-hexadecimal or the rgb() and rgba() functional notations) is used. These always use the sRGB colour space to identify a colour.
  • The hsl() and hsla() functional notations are used to implement the HSL cylindrical-coordinate system. These always use the sRGB colour space to identify a colour.
  • The lch() functional notation is used to represent the LCH cylindrical coordinate system. Any visible colour can be specified using this.
  • Using the lab() functional notation and the Lab coordinate system. Any visible colour can be specified using this.
  • To specify a colour in a variety of predefined or custom colour spaces, use the colour() functional notation.

Background Color

  • Used to color the background of the webpage.

Text Color

  • Used to color the text on the webpage.

Border Color

  • Used to apply border color to the elements on the webpage.

Color Values

  • Multiple ways can be used to specify a particular color.

Color keywords

Color keywords, such as red, blue, black, or lightseagreen, are case-insensitive identifiers that denote a certain colour. Despite the fact that the names more or less define their respective colours, they are essentially contrived and lack a strict reason.

When utilising colour keywords, there are a few things to keep in mind:

  • HTML only recognises the 16 basic colour keywords provided in CSS1, and unrecognised values are converted using a specified technique (often to completely different colors). Only CSS and SVG should utilise the other colour keywords.
  • CSS, unlike HTML, will ignore all unknown keywords.
  • The colour keywords all refer to solid colours that are not transparent.
  • A number of keywords are aliases for one another.
  • Despite the fact that several keywords have been adopted from X11, their RGB values may differ from the equivalent colour on X11 systems due to manufacturers' customising X11 colours to their individual hardware.

Example No.1:

<html> <body> <h1 style="background-color:DodgerBlue;">Knowledge2life</h1> <p style="background-color:Tomato;"> Top Learning website online easily </p> </body> </html>

OUTPUT:

Knowledge2life

Top Learning website online easily

Example No.2:

<html> <body> <h1 style="background-color:Green;">Knowledge2life</h1> <p style="background-color:pink;"> Top Learning website online easily </p> </body> </html>

OUTPUT:

Knowledge2life

Top Learning website online easily