CSS Colors
One of the hallmarks of building a web page is styling it with colors! 🎨
In CSS, colors can be used for a lot of things, from highlighting text to applying cool backgrounds!
To add color to text, we use the color property.
One of the most common ways to assign colors in CSS is by naming them with English words:
p {
color: red;
}Browsers usually support 140 colors names as listed in this page.
RGB
Besides setting colors by name, there are other ways to customize colors.
RGB, perhaps the most popular one, represents the intensity of the red-ness, green-ness, and blue-ness of the color(s) that we assign to a given element.
The rgb() function accepts three integers ranging from 0 to 255 (0 has no intensity and 255 has maximum intensity), and is assigned to the color property:
color: rgb(255, 0, 0); /* Red */
color: rgb(0, 255, 0); /* Green */
color: rgb(0, 0, 255); /* Blue */HexaDecimal Colours
This can alternatively be expressed with hexadecimals that begin with a hashtag #, followed by a combination of numbers (0-9) and letters (a-f):
color: #ff0000; /* Red */
color: #008000; /* Green */
color: #0000ff; /* Blue */The letters in hexadecimals can either be lowercase or uppercase.
Note: While mixing cases is possible, we strongly recommend using either all lowercase or all uppercase in your hexadecimals.