CSS Colors

Colors are used to color a specific element.
Colors can be expressed using different formats, including named colors, hexadecimal notation, RGB values, RGBA values, HSL values, HSLA values, and more.

Example

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Colors Example</title>
        <style>
            p {
                color: #ffa500;
            }
        </style>
    </head>
    <body>
        <p>Green color Paragraph</p>
    </body>
</html>

Run

Foramt

Description

Example

Named Colors

These are predefined color names like red, green, blue, etc. They are easy to use but somewhat limited in number.
Syntax: color: green;

Hexadecimal

Hex values use a combination of six characters (0-9 and A-F) to represent colors. The first two characters represent red, the next two green, and the last two blue.
Syntax: color: #FFA500;

RGB

RGB uses integers from 0 to 255 to specify the intensity of red, green, and blue respectively. It offers a wide range of colors.
Syntax: color: rgb(255, 0, 0);

RGBA

Similar to RGB, RGBA includes an alpha channel for transparency. The alpha value ranges from 0 (completely transparent) to 1 (fully opaque).
Syntax: color: rgba(0, 128, 0, 0.5);

HSL

Hue (0-360), Saturation (0-100%), and Lightness (0-100%) are used to define colors. HSL is often intuitive for designers.
Syntax: color: hsl(240, 100%, 50%);

HSLA

Just like HSL, HSLA adds an alpha value for transparency.
Syntax: color: hsla(120, 100%, 50%, 0.7);

Note: The above color format are applicable to any color property used in css.

Usage of colors

Colors are used in different aspects in html using css. Let's see some of them

Text
Background
Borders

Text Color

Example

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Colors Example</title>
        <style>
            p {
                color: green;
            }
        </style>
    </head>
    <body>
        <p>Green color Paragraph</p>
    </body>
</html>

Run

Background Color

Example

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Colors Example</title>
        <style>
            p {
                 background-color: green;
            }
        </style>
    </head>
    <body>
        <p>Green color Paragraph</p>
    </body>
</html>

Run

Border Color

Example

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Colors Example</title>
        <style>
            p {
                border: 2px solid green;
            }
        </style>
    </head>
    <body>
        <p>Green color Paragraph</p>
    </body>
</html>

Run

Quick Recap - Topics Covered

CSS Colors

Usage of colors

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example JS

Quiz