HTML Colors

Colors in HTML can be defined using predefined color names or by using values like RGB, HEX, HSL, RGBA, or HSLA.

Color Names

In HTML, you can specify a color using a color name, for example:

body {
    color: black;
}
h1 {
    color: orange;
}
p {
    color: red;
}

Here are some color name examples:

Background Color

You can define background colors for HTML elements by using the CSS background-color property.

<h1 style="background-color:blue;">Blue Heading</h1>
<p style="background-color:red;">This a red paragraph</p> 

Text Color

You can define font or text colors in HTML by using the CSS color property.

<h1 style="color:orange;">Orange Heading</h1>
<p style="color:green;">This is a green paragraph</p>
<p style="color:blue;">This is a blue paragraph</p> 

Border Color

You can define border colors for HTML elements in the CSS border property.

<h2 style="border:3px solid green;">Heading with Green Border</h2>
<h2 style="border:3px solid blue;">Heading with Blue Border</h2>
<h2 style="border:3px solid gray;">Heading with Gray Border</h1> 

Color Values

In HTML, colors can be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. For example, we have specified the background colors of the following three paragraphs using RGB, HEX, and HSL values:

<p style="background-color:rgb(255, 99, 71);">This is a paragraph.</p>
<p style="background-color:#ff6347;">This is a paragraph.</p>
<p style="background-color:hsl(9, 100%, 64%);">This is a paragraph.</p>

The colors for the following two paragraph elements are set using RGBA and HSLA values, which include an alpha channel for transparency (with 50% transparency in this case, 100% (1) is maximum):

<p style="color:rgba(255, 99, 71, 0.5);">This is a paragraph.</p>
<p style="color:hsla(9, 100%, 64%, 0.5);">This is a paragraph.</p>

Please read the next tutorials for more information about the usage of different types of HTML color values.