CSS Colors

The color property in CSS is used to set the color of HTML elements. Typically, this property is used to set the background color or the font color of an element.

In CSS, we use color values for specifying the color. We can also use this property for the border-color and other decorative effects.

We can define the color of an element by using the following ways:

RGB format.
RGBA format.
Hexadecimal notation.
HSL.
HSLA.
Built-in color.

Let's understand the syntax and description of the above ways in detail.

RGB Format

RGB format is the short form of 'RED GREEN and BLUE' that is used for defining the color of an HTML element simply by specifying the values of R, G, B that are in the range of 0 to 255.

The color values in this format are specified by using the rgb() property. This property allows three values that can either be in percentage or integer (range from 0 to 255).

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

Syntax

RGBA Format

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.0 is for fully transparent, and 1.0 is for not transparent.

Syntax

Hexadecimal notation

Hexadecimal can be defined as a six-digit color representation. This notation starts with the # symbol followed by six characters ranges from 0 to F. In hexadecimal notation, the first two digits represent the red (RR) color value, the next two digits represent the green (GG) color value, and the last two digits represent the blue (BB) color value.

The black color notation in hexadecimal is #000000, and the white color notation in hexadecimal is #FFFFFF. Some of the codes in hexadecimal notation are #FF0000, #00FF00, #0000FF, #FFFF00, and many more.

Syntax

Short Hex codes

It is a short form of hexadecimal notation in which every digit is recreated to arrive at an equivalent hexadecimal value.

For example, #7B6 becomes #77BB66 in hexadecimal.

The black color notation in short hex is #000, and the white color notation in short hex is #FFF. Some of the codes in short hex are #F00, #0F0, #0FF, #FF0, and many more.

HSL

It is a short form of Hue, Saturation, and Lightness. Let's understand them individually.

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).

Let's see the syntax of HSL in color property.

Syntax

HSLA

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.0 indicates fully transparent, and 1.0 indicates not transparent.

Syntax

Built-in Color

As its name implies, built-in color means the collection of previously defined colors that are used by using a name such as red, blue, green, etc.

Syntax

Let's see the list of built-in colors along with their decimal and hexadecimal values.

S.no.	Color name	Hexadecimal Value	Decimal Value or rgb() value
1.	Red	#FF0000	rgb(255,0,0)
2.	Orange	#FFA500	rgb(255,165,0)
3.	Yellow	#FFFF00	rgb(255,255,0)
4.	Pink	#FFC0CB	rgb(255,192,203)
5.	Green	#008000	rgb(0,128,0)
6.	Violet	#EE82EE	rgb(238,130,238)
7.	Blue	#0000FF	rgb(0,0,255)
8.	Aqua	#00FFFF	rgb(0,255,255)
9.	Brown	#A52A2A	rgb(165,42,42)
10.	White	#FFFFFF	rgb(255,255,255)
11.	Gray	#808080	rgb(128,128,128)
12.	Black	#000000	rgb(0,0,0)

The illustration of CSS colors, which includes the above properties, is given below.

Example

<html> 
    <head> 
        <title>CSS hsl color property</title> 
        <style> 
            h1{ 
                text-align:center; 
            } 
            #rgb{
              color:rgb(255,0,0);
            }
            #rgba{
              color:rgba(255,0,0,0.5);
            }
            #hex{
              color:#EE82EE;
            }
            #short{
              color: #E8E;
            }
            #hsl{
              color:hsl(0,50%,50%);
            }
            #hsla{              
              color:hsla(0,50%,50%,0.5);
            }
            #built{
              color:green;
            }
        </style> 
    </head> 
    <body> 
        <h1 id="rgb"> 
             Hello World. This is RGB format.
        </h1> 
        <h1 id="rgba"> 
          Hello World. This is RGBA format.
     </h1> 
     <h1 id="hex"> 
      Hello World. This is Hexadecimal format.
 </h1> 
 <h1 id="short"> 
  Hello World. This is Short-hexadecimal format.
</h1> 
 <h1 id="hsl"> 
  Hello World. This is HSL format.
</h1> 
<h1 id="hsla"> 
  Hello World. This is HSLA format.
</h1> 
<h1 id="built"> 
  Hello World. This is Built-in color format.
</h1> 
    </body> 
</html>

Test it Now

Next TopicCSS Hover

← prev next →