Colors in CSS

CSS Colors

Colors are fundamental elements in the design of a web page, as they can convey emotions, highlight important content and make the user experience more pleasant. In CSS, there are several ways to define colors, either through keywords, numerical values ​​or hexadecimal codes.

Keywords

Keywords are the simplest way to define colors in CSS. They are representations of common colors such as "red", "blue" and "green". In addition, there are also keywords that represent shades of gray, such as "gray" and "silver".

See an example:

  
    h1 {
      color: red;
    }
  

In this case, the page title will be displayed in red.

Numeric Values

Numeric values ​​are another way to define colors in CSS. They are represented by three numbers ranging from 0 to 255, which correspond to the intensities of red, green and blue, respectively. This technique is known as RGB (Red, Green, Blue).

See an example:

  
    h1 {
      color: rgb(255, 0, 0);
    }
  

In this case, the title of the page will also be displayed in red.

Hex codes

Hex codes are the most accurate way to define colors in CSS. They are represented by six alphanumeric characters ranging from 0 to F, which correspond to the intensities of red, green and blue, respectively. This technique is known as HEX (Hexadecimal).

See an example:

  
    h1 {
      color: #FF0000;
    }
  

In this case, the title of the page will also be displayed in red, but with a more precise hexadecimal code.

Transparency

In addition to defining the colors, it is also possible to define the transparency of an element in CSS. This is done through the "opacity" property, which varies from 0 to 1, with 0 being completely transparent and 1 being completely opaque.

See an example:

  
    h1 {
      color: rgba(255, 0, 0, 0.5);
    }
  

In this case, the title of the page will be displayed in red with a transparency of 50%.

Conclusion

In summary, colors are essential elements in the design of a web page and in CSS there are several ways to define them. Whether through keywords, numerical values ​​or hexadecimal codes, the important thing is to choose the right color for each element and convey the desired message.

Next page of the Free Ebook:

9Gradients in CSS

3 minutes