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;

Run

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;

Run

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

Run

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

Run

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%);

Run

HSLA

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

Run

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
  1. Text
  2. Background
  3. 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

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK