Loading

Colors

  • Cascading Style Sheets provide many ways to apply colour for styling web elements.

The different color of an element are:

  • Keyboard colors
  • RGB Format
  • RGBA Format
  • Hexadecimal Notation
  • HSL
  • HSLA

Colors used in CSS:


Keyboard colors: CSS provides a a set of predefined colors that are easy to remember.

  • red
  • blue
  • green
  • black
  • white
  • yellow
  • purple
  • grey

Syntax:

p {
color: yellow;
background-color: blue;
}

Example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS color property</title>
    <style>
        h1 {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>
        QUIPOIN
    </h1>
</body>
</html>

Output:

QUIPOIN


Hexadecimal Notation:

  •  Colors are represented by using hexadecimal values, which consist of a hash (#) followed by six characters (3 pairs of two) that represent the red, green, and blue (RGB) components of the color.

Example:

  • #FF0000:Indicates red.
  • #00FF00: Indicates green.
  • #0000FF: Indicates blue.

RGB Functional Notation:

  • Colors can be specified using the RGB()  notation, which allows you to define the red, green, and blue values as integers ranging from 0 to 255. 

Example:

  • rgb(255, 0, 0) : Indicates red.
  • rgb(0, 255, 0) :Indicates green.
  • rgb(0, 0, 255) : Indicates blue.

Key Points:

  • We can also use percentages for the RGB values, like RGB(100%, 0%, 0%) for red.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>CSS color property</title>
    <style>
        h1 {
            color: rgb(0, 153, 0);
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>
        Quipoin
    </h1>
</body>
</html>

Output:

Quipoin


RGBA Format:

  • It is similar to RGB() notation but includes an additional parameter for specifying the colour's opacity (alpha channel).
  • Alpha is a number between 0 and 1.
  • 0 indicates fully transparent and 1 indicates fully opaque.

Syntax:

h1 { 
 color:rgba(R, G, B, A);
}

Example:

<!DOCTYPE html>
<html>

<head>
       <title>CSS RGBA color property</title>
       <style>
        h1 {
            color: rgba(0, 153, 0, 0.5);
            text-align: center;
        }
    </style>
</head>

<body>
       <h1>
               QUIPOIN
       </h1>
</body>

</html>

Output:

                      Quipoin.com


HSL and HSLA Functional Notation:

  •  HSL represents for Hue, Saturation, and Lightness. 
  •  HSLA includes an alpha channel for opacity. These notations provide a more intuitive way to describe colors.

 Example:

  • hsl(0, 50%, 50%) represents pure red.
  • hsla(120, 100%, 50%, 0.5) represents semi-transparent green.
  • CSS also supports color names, like transparent for a completely transparent color.