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.