HTML Colors

Web browsers are capable of displaying colors on the screen that are written in our HTML document.

Better color combinations of texts and backgrounds can enhance the overall look and feel of the web page.

In HTML, the simplest way to specify a color in our code is to write it with its name.

There are other options, too, for specifying colors. We can define them with RGB, HEX, HSL, RGBA, or HSLA values.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Colors Example</title>
</head>

<body>

<h1 style="background-color:red;">Background Color by Name</h1>

<h1 style="background-color:rgb(255,0,0);">Background Color by RGB Value</h1>

<h1 style="background-color:rgba(255,0,0,1);">Background Color by RGBA Value</h1>

<h1 style="background-color:#FF0000;">Background Color by HEX Value</h1>

<h1 style="background-color:hsl(0,100%,50%);">Background Color by HSL Value</h1>

<h1 style="background-color:hsla(0,100%,50%,1);">Background Color by HSLA Value</h1>

</body>

</html>

Result on Editor

Let's do an in-depth discussion on HTML colors with examples.

Colors by Name

As we said earlier in the chapter, colors in HTML can be specified with predefined names.

Modern browsers can identify a total of 140 colors by their names.

The list of all 140 HTML colors can be found here.

Below are some famous colors with their names.

LightSalmon

LightPink

Plum

LightSeaGreen

Turquoise

LightSkyBlue

RosyBrown

Gray

Let's view these HTML colors in examples.

Example

<!DOCTYPE html>

<html>

<head>

<title>HTML Colors Example</title>
</head>

<body>

<h1 style="background-color:LightSalmon;">This is LightSalmon color.</h1>

<h1 style="background-color:LightPink;">This is LightPink color.</h1>

<h1 style="background-color:Plum;">This is Plum color.</h1>

<h1 style="background-color:LightSeaGreen;">This is LightSeaGreen color.</h1>

<h1 style="background-color:Turquoise;">This is Turquoise color.</h1>

<h1 style="background-color:LightSkyBlue;">This is LightSkyBlue color.</h1>

<h1 style="background-color:RosyBrown;">This is RosyBrown color.</h1>

<h1 style="background-color:Gray;">This is Gray color.</h1>

</body>

</html>

Result on Editor

Change Font Color

The default color of the text can be changed by specifying the color name in the style attribute.

Example

<!DOCTYPE html>

<html>

<head>

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

<body>

<h1 style="color:red;">The heading is in red color.</h1>

<p style="color:blue;">The font of this paragraph is blue color. The value in the color property is set to 'blue'.</p>

</body>

</html>

Result on Editor

Change Border Color

HTML elements' border color can be changed by using the style attribute.

The name of the color is specified in the value of the CSS border property.

See the example below. Always check the result of the code by clicking on the 'Result on Editor' button.

Example

<!DOCTYPE html>

<html>

<head>

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

<body>

<h1 style="border:3px solid Crimson;;">Crimson color is used for the heading border.</h1>

<p style="border:3px solid DarkSlateBlue;">DarkSlateBlue color is used for the paragraph border.</p>

</body>

</html>

Result on Editor

Change Background Color

The background color of an HTML element can be defined in the style attribute with the CSS property as 'background-color' and value as 'color name'.

Syntax

<tag style="background-color:color_name">content</tag>

Example

<!DOCTYPE html>

<html>

<head>

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

<body>

<h1 style="background-color:Aquamarine;;">Background Color of The Heading is Aquamarine.</h1>

<p style="background-color:Coral;">Background Color of the paragrah is Coral. Setting background color of an element is easy with color names.</p>

</body>

</html>