CSS Color

    CSS has a property called colour which is used to specify the rendering colour of the HTML element. By default, the colour for all textual data is black and background is white, but it can be changed using the color property. The color property can also change the colour of elements borders and provide a decorative effect. There are many CSS properties which are associated with colour, for example, we have a color property for textual data colour, background-colour property for background colour and so on. For every colour specific CSS property, we can use similar value formats. And there are four formats we can use to set the colour value for any colour related to CSS property.

    • Hex Code value (#RRGGBB)
    • Short Hex Code value (#RGB)
    • RGB % value (rgb(rrr,ggg,bbb))
    • keyword (colour name)

    CSS Colour Property Hex Code Value

    Hex code values stand for hexadecimal values, represented by # character followed by six digits. Every hex code number represent a color value for example #000000 represents black, #FF0000 represents Red, #00FF00 represents blue and so on.

    Syntax: 

    {color: #RRGGBB;}

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
    p {
      /*Red value in Hex code*/
      color : #FF0000;
    }
  </style>
</head>
<body>
<p>Welcome to TechGeekbuzz</p>
</body>
</html>

    Output 

    Welcome To TechGeekbuzz

    CSS Colour Property with Short Hex Code Value

    It is similar to the Hex code value but here instead of using 6 digits for a colour we use only three-digit code to represent. In short Hex code, we get less number of colours as compared to Hex code. Similar to the Hex code the short hex code starts from # symbol and followed by only three digits.

    Syntax 

    {color: #RGB}

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
    p {
      /*Red value in short Hex code*/
      color : #F00;
    }
  </style>
</head>
<body>
<p>Welcome To TechGeekbuzz</p>
</body>
</html>

    Output 

    Welcome To TechGeekbuzz

    CSS Colour Property with Short Hex Code Value

    The rgb() stands for red green and blue function, it can accept 3 integers between 0 and 255 or percentage values to represent the amount of red, green and blue colour in an element data. All the browser does not support this function so it is highly recommended not to use it often.

    Syntax 

    {

color : rgb(rrr%,ggg%,bbb%);

}

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
    p {
      /*Red value in rgb*/
      color : rgb(255,0,0);
    }
  </style>
</head>
<body>
<p>Welcome To TechGeekbuzz</p>
</body>
</html>

    Output 

    Welcome To TechGeekbuzz

    CSS Colour Property with colour name or keyword Value:

    For simple colours, we can simply specify the colour name as a value to the color associated properties. Every browser supports 140 standard colour names. The colour name or keyword values are the simplest way of passing a colour value to a color property.

    Syntax 

    {color : colour_name;}

    Example 

    <!DOCTYPE html>
<html>
<head>
<title></title>
 <style type="text/css">
    p {
      /*Red value using colour name*/
      color : red;
    }
  </style>

</head>
<body>
<p>Welcome To TechGeekbuzz</p>
</body>
</html>javascript:void(0)

    Output 

    Welcome To TechGeekbuzz

    Summary

    • CSS has many colours associated properties such as color, background-color, border-color, etc.
    • For each colour property, we can use four different formats to represent a value.
    • Hex code value format provides the maximum number of colour combinations.
    • Short hex code uses only three digits to describe a colour value.
    • There are only 140 keywords or colour names.
    Previous Tutorial Next Tutorial