View video tutorial

HTML Colors

HTML

HTML colors are used in elements to look attractive and colorful.

Select and convert your color code in RGB | HEX | HSL


HTML Color


Color can be defined in many different ways.

RGB, RGBA, HEX, HSL, HSLA are the common methods among many.

In HTML color can be displayed by standard color name also.

HTML color can be used in many ways in elements such as :background color, text color, border color etc.

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Learning with HTML Editor "Try it Now"

You can edit the HTML code and view the result using online editor.

Example

<!DOCTYPE html>
<html>

<head>
    <title>HTML Color Example</title>
</head>

<body>

    <h2>HTML Color Example</h2>

    <h2 style="background-color:Tomato;">Tomato</h2>
    <h2 style="background-color:Orange;">Orange</h2>
    <h2 style="background-color:DodgerBlue;">DodgerBlue</h2>
    <h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2>
    <h2 style="background-color:Gray;">Gray</h2>
    <h2 style="background-color:SlateBlue;">SlateBlue</h2>
    <h2 style="background-color:Violet;">Violet</h2>
    <h2 style="background-color:LightGray;">LightGray</h2>

</body>

</html>
Try it Now »

Click on the "See output" button to see how it works.


Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Sample Code

Copy each file contents and paste it to your project, run and see the final output when everything is OK.

Example

<!DOCTYPE html>
<html>

<head>
    <title>HTML Color Example</title>
</head>

<body>

    <h2>HTML Color Example</h2>

    <h2 style="background-color:Tomato;">Tomato</h2>
    <h2 style="background-color:DodgerBlue;">DodgerBlue</h2>
    <h2 style="background-color:MediumSeaGreen;">MediumSeaGreen</h2>

    <h3 style="background-color:Tomato;">Hello World</h3>

    <p style="background-color:DodgerBlue;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
        nibh euismod
        tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

    <p style="background-color:MediumSeaGreen;">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
        suscipit
        lobortis nisl ut aliquip ex ea commodo consequat.</p>

</body>

</html>
Try it Now »

Click on the "Try it Now" button to see how it works.