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.

Now answer the exercise about the content:

_What is the most accurate way to define colors in CSS?

You are right! Congratulations, now go to the next page

You missed! Try again.

Article image Gradients in CSS 9

Next page of the Free Ebook:

Gradients in CSS

Estimated reading time: 3 minutes

Download the app to earn free Certification and listen to the courses in the background, even with the screen off.

+ 9 million
students

Free and Valid
Certificate

60 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video and ebooks