Predefined color names or RGB, HEX, HSL, RGBA, or HSLA values are used to
specify colors in HTML.

Color Names

A color name can be used to specify a color in HTML:

Example :

<!DOCTYPE html>
<html>
<body>

    <h1 style=“background-color:Gray;”>Gray</h1>
    <h1 style=“background-color:SlateBlue;”>SlateBlue</h1>
    <h1 style=“background-color:Violet;”>Violet</h1>
    <h1 style=“background-color:Tomato;”>Tomato</h1>
    <h1 style=“background-color:Orange;”>Orange</h1>
    <h1 style=“background-color:MediumSeaGreen;”>MediumSeaGreen</h1>
    <h1 style=“background-color:LightGray;”>LightGray</h1>
    <h1 style=“background-color:DodgerBlue;”>DodgerBlue</h1>

</body>
</html>

Result :

Colors Example Result

Background Color in HTML

For HTML elements, you can choose the background color by:

Example:

<!DOCTYPE html>
<html>
<body>

    <h1 style=“background-color:DodgerBlue;”>Hello World</h1>

    <p style=“background-color:Tomato;”>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>

</body>
</html>


Result:

Background Color

HTML Border Color

You can customize the border color:


Example:

<!DOCTYPE html>
<html>
<body>

    <h1 style=“border: 2px solid Violet;”>Hello World</h1>
    <h1 style=“border: 2px solid Tomato;”>Hello World</h1>
    <h1 style=“border: 2px solid DodgerBlue;”>Hello World</h1>


</body>
</html>

Result:

Border Color



Color Values in HTML


Additionally, RGB, HEX, HSL, RGBA, and HSLA values can be used in HTML to
specify colors.

The backgrounds of the following three <div> elements are set with
RGB, HEX, and HSL values:

Result Color

The background colors of the next two <div> elements are RGBA and
HSLA values, which add an Alpha channel (here, 50% transparency) to the
color.

Result Color another

Colors can also be defined using RGB, HEX, HSL, or even transparent
colors using RGBA or HSLA color values, in addition to the
established color names.

Example:

<!DOCTYPE html>
<html>
<body>

    <p>Identical to the colour “Tomato”:</p>

    <h1 style=“background-color:rgb(255, 99, 71);”>rgb(255, 99, 71)</h1>
    <h1 style=“background-color:#ff6347;”>#ff6347</h1>
    <h1 style=“background-color:hsl(9, 100%, 64%);”>hsl(9, 100%, 64%)</h1>

    <p>Similar to the hue “Tomato,” but 50% more transparent:</p>
    <h1 style=“background-color:rgba(255, 99, 71, 0.5);”>rgba(255, 99, 71, 0.5)</h1>
    <h1 style=“background-color:hsla(9, 100%, 64%, 0.5);”>hsla(9, 100%, 64%, 0.5)</h1>

    <p>Colors can also be defined using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values, in addition to the established color names.</p>

</body>
</html>


Project Download (download)                   
                 
Effect Download (download)

Rate this post

Categorized in: