How to add HTML Color

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML Color</title>
        <style>
            .color{
                width: 100px;
                height: 100px;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="color"></div>    
    </body>
    </html>

Colors Name

In HTML, a color can be specified by using a color name:

Red

Green

Blue

Orange

Dodgerblue

pink

Black

Gray

Violet

Background Color

You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, nostrum distinctio eveniet ullam modi rerum dicta aperiam suscipit dolorum. Fuga modi quo eos maiores? Distinctio cum asperiores obcaecati delectus iste?

    <h2 style="background: tomato;padding:20px;margin-top:20px;">Hello World</h2>
    <p style="background: dodgerblue;padding:10px;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, nostrum distinctio eveniet ullam modi rerum dicta aperiam suscipit dolorum. Fuga modi quo eos maiores? Distinctio cum asperiores obcaecati delectus iste?</p>

Border Color

You can set the color border

Hello world

<h1 style="border: 1px solid red;">Hello world</h1>
<h1 style="border: 1px solid green;">Hello world</h1>
<h1 style="border: 1px solid blue;">Hello world</h1>

Color Value

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three < div > elements have their background color set with RGB, HEX, and HSL values:

rgb(29,00,300)

#220055

hsl(100,50%,50%)