The color property sets the text color (foreground color) of an element.
For example, the color property defined in the body selector sets the default text color for the entire page. Let's check out the following example to see how it works:
body {
color: #ff5722;
}Note: The color property typically inherits the color value from its parent element, except for anchor elements. For instance, if you set the color for the body element, it will automatically apply to headings, paragraphs, and other text elements.
Colors in CSS are commonly specified in the following formats:
CSS3 has introduced additional color formats such as HSL, HSLA, and RGBA that support alpha transparency. We'll cover these in more detail in the CSS3 color chapter.
For now, let's focus on the basic methods of defining color values:
CSS defines several color keywords that allow you to specify color values easily.
The fundamental color keywords consist of aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are case-insensitive.
h1 {
color: red;
}
p {
color: purple;
}Modern web browsers support many more color names than those defined in the CSS standard, but to be on the safe side, you should use hex color values instead.
Refer to the CSS color names reference for a complete list of possible color names.
Hex (short for Hexadecimal) is the most commonly used method of defining color on the web.
Hex represents colors using a six-digit code, preceded by a hash character, like #rrggbb, where rr, gg, and bb represent the red, green, and blue components of the color respectively.
The value of each component can range from 00 (no color) to FF (full color) in hexadecimal notation, or from 0 to 255 in decimal notation. Thus #ffffff represents white color and #000000 represents black color. Let's look at the following example:
h1 {
color: #ffa500;
}
p {
color: #00ff00;
}Note: Hexadecimal or Hex refers to a numbering scheme that uses 16 characters as its base. It uses the numbers 0 through 9 and the letters A, B, C, D, E, and F, which correspond to the decimal numbers 10, 11, 12, 13, 14, and 15 respectively.
Tip: If a hexadecimal code of a color has repeated pairs, it can be written in shorthand notation to save time. For example, the hex color value #ffffff can be written as #fff, #000000 as #000, #00ff00 as #0f0, and #ffcc00 as #fc0.
Colors can be specified in the RGB model (Red, Green, and Blue) using the rgb() function.
The rgb() function takes three values separated by commas, indicating the levels of red, green, and blue. These values are usually given as integers from 0 to 255, where 0 means no color and 255 means full color.
The example below shows how to specify the same color using RGB notation.
h1 {
color: rgb(255, 165, 0);
}
p {
color: rgb(0, 255, 0);
}Note: You can also specify RGB values in percentages inside the rgb() function, where 100% means full color, and 0% (not just 0) means no color. For example, you can set the red color as rgb(255, 0, 0) or rgb(100%, 0%, 0%).
Tip: If you set R, G, and B all to 255, like rgb(255, 255, 255), the color will be white. Similarly, if all are set to 0, like rgb(0, 0, 0), the color will be black. Experiment with the RGB values below to see how they work.
The color property applies not just to text, but to any element that uses a color value in the foreground. For example, if you haven't explicitly set the border-color or outline-color for an element, it will use the color value instead. Let's see an example:
p.one {
color: #0000ff;
border: 2px solid;
}
p.two {
color: #00ff00;
outline: 2px solid;
}