CSS Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (text color) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.

Note:- The color property normally inherits the color value from their parent element, except the case of anchor(<a>) elements. For example, if we specify color for the body element it will automatically be passed down to the headings, paragraphs, etc.


Setting Color Property

The color property defines the text color (foreground color) of an element. For instance, the color property specified in the body selector defines the default text color for the whole page.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
    color: #999999;
}

Output:-


Defining Color Values

Colors in CSS most often specified in the following formats:

  • a color keyword – like “green”, “red”, “blue”, “transparent”, etc.
  • a HEX value – like “#ff0000”, “#00ff00”, etc.
  • an RGB value – like “rgb(255, 0, 0)”

CSS3 has introduced several other color formats such as HSL, HSLA and RGBA that also support alpha transparency.


Built-in Color

CSS defines the few color keywords which lets us specify color values in an easy way.

These basic color keywords are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are case-insensitive.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
    color: teal;
}

Output:-

Modern web browsers however practically support many more color names than what are defined in the CSS standard, but to be on the safer side we should use hex color values instead.


HEX Color

Hex represent colors using a six-digit code, preceded by a hash character, like #rrggbb, in which rr, gg, and bb represents the red, green and blue component of the color respectively.

The value of each component can vary from 00 (no color) and FF (full color) in hexadecimal notation, or 0 and 255 in decimal equivalent notation. Thus #ffffff represents white color and #000000 represents black color. It is by far the most commonly used method of defining color on the web.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
    color: #000000;
}


Output:-

Tip:- If hexadecimal code of a color has value pairs, it can also be written in shorthand notation to avoid extra typing with only 3 values after hash, for example, the hex color value #ffffff can be also be written as #fff, #000000 as #000, #00ff00 as #0f0, #ffcc00 as #fc0, and so on.


RGB Color

Colors can be defined in the RGB model (Red, Green, and Blue) using the rgb() functional notation.

The rgb() function accepts three comma-separated values, which specify the amount of red, green, and blue component of the color. These values are commonly specified as integers between 0 to 255, where 0 represent no color and 255 represent full or maximum color.

This property is not supported in all browsers; that’s why it is not recommended to use it.

Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
    color: rgb(255, 165, 0);
}

Output:-


RGBA Color

It is almost similar to RGB format except that RGBA contains A (Alpha) that specifies the element’s transparency. The value of alpha is in the range 0.0 to 1.0, in which 0 is for fully transparent, and 1 is for not transparent.

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

HSL Color

It is a short form of Hue, Saturation, and Lightness.

  • Hue: It can be defined as the degree on the color wheel from 0 to 360. 0 represents red, 120 represents green, 240 represents blue.
  • Saturation: It takes value in percentage in which 100% represents fully saturated, i.e., no shades of gray, 50% represent 50% gray, but the color is still visible, and 0% represents fully unsaturated, i.e., completely gray, and the color is invisible.
  • Lightness: The lightness of the color can be defined as the light that we want to provide the color in which 0% represents black (there is no light), 50% represents neither dark nor light, and 100% represents white (full lightness).
Input:-

Index.html	
<body>
	 <p> Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</body>

Style.css

body {
    color: hsl(0, 100%, 50%);
}

Output:-


HSLA Color

It is entirely similar to HSL property, except that it contains A (alpha) that specifies the element’s transparency. The value of alpha is in the range 0.0 to 1.0, in which 0 indicates fully transparent, and 1 indicates not transparent.