Categories
CSS Tutorials

CSS colors

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

Rainbow colors look very pretty. It gives a good look to the sky. Likewise colors give a good look to a webpage. We can add color to text, background, border etc. 

The simplest ways are to use one of the:

  • predefined color names 
  • or to use a decimal 
  • or hexadecimal value for each of the red, green, and blue components. 

Decimal values are separated by a comma, and hex values are usually prefixed with #—such as #ffffff, which represents white. 

Color of an element can be defined in the following ways:

  • Built-In Color
  • RGB Format
  • RGBA Format
  • Hexadecimal Notation
  • HSL
  • HSLA

You can see some of the predefined names for colors and their decimal and hex equivalents in the following table:

There are a lot of new shades defined by the extended colors, including slight variations on the colors in the basic list.

Specifying More Complex Colors

Color names and simple hex values aren’t the only way you can specify colors. There are a number of functions that allow you to select a color. The following table describes each of the functions available.

Built-in colors

There are some predefined colors which are directly used in CSS. Like white, blue, green, red, etc.

Syntax:

p{
  color:  blue;
}

Example:

<html>
    <head>
        <title>CSS color property</title>
        <style>
            h1 {
                color:blue;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
          Edupoly Training and Development
        </h1>
    </body>
</html>

Output:

RGB format

The RGB(Red, Green, Blue) format is used to define the color of an HTML element by specifying the R, G, B values range between 0 to 255. For example: RGB value of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0, 255) etc.

Syntax:

h1{
  color : rgb( R G B);
}

Example:

<html>
    <head>
        <title>CSS color property</title>
        <style>
            h1{
                color: rgb(0,0,255);
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
    		Edupoly Training and Development
        </h1>
    </body>
</html>

Output:

Hexadecimal format

The hexadecimal notation begins with # symbol followed by 6 characters each range from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF etc.

Syntax:

h1 {
    color : #(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}

Example:

<html>
    <head>
        <title>CSS hex property</title>
        <style>
            h1{
           		color: #0000FF;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            Edupoly Training and Development
        </h1>
    </body>
</html>

Output:

HSL format

HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system.

  • Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color.
  • Saturation: It takes percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray).
  • Lightness: It takes percentage value, where 100% represents white, while 0% represents black.

Syntax:

h1 {
  color:hsl(H, S, L);
}

Example:

<html>
    <head>
        <title>CSS hsl color property</title>
        <style>
            h1{
                color:hsl(240, 100%, 50%);
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            Edupoly Training and Development
        </h1>
    </body>
</html>

Output:

HSLA format

The HSLA color property is similar to HSL property, but the difference is HSLA contains A (Alpha) which specify the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents fully opaque.

Syntax:

h1 {
  color:hsla(H, S, L, A);
}

Example:

<html>
    <head>
        <title>CSS hsla color property</title>
        <style>
            h1 {
                color:hsla(225, 100%, 50%, 0.5);
                text-align:center;
            }
        </style>
    </head>
    <body>
        <h1>
            Edupoly Training and Development 
        </h1>
    </body>
</html>

Output: