Skip to main content

HTML Colors

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

note

It is recommended to use hex values than html color names because it occupies less space.

HTML Examples​

Color Names​

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

<!DOCTYPE html>
<html>
	<body>
		<h1 style="background-color:Tomato;">Tomato</h1>
		<h1 style="background-color:Orange;">Orange</h1>
		<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
		<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
		<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:LightGray;">LightGray</h1>
	</body>
</html>

Output:

Color names example

Background Color​

You can set the background color for HTML elements:

<!DOCTYPE html>
<html>
	<body>
		<h1 style="background-color:DodgerBlue;">Hello World</h1>
		<p style="background-color:Tomato;">
		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.
		</p>
	</body>
</html>

Output:

Background Color example

Text Color​

You can set the color of text:

<!DOCTYPE html>
<html>
	<body>
		<h3 style="color:Tomato;">Hello World</h3>
		<p style="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="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>

Output:

Text Color example

Border Color​

You can set the color of borders:

<!DOCTYPE html>
<html>
	<body>
		<h1 style="border: 2px solid Tomato;">Hello World</h1>
		<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
		<h1 style="border: 2px solid Violet;">Hello World</h1>
	</body>
</html>

Output:

Border Color example

Color Values​

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:

<!DOCTYPE html>
<html>
	<body>
		<p>Same as color name "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>Same as color name "Tomato", but 50% 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>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.</p>
	</body>
</html>

Border Color example

HTML RGB Colors​

In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example:

  • rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.
  • rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.
  • rgb(0, 0, 0) is displayed as black
  • rgb(255, 255, 255) is displayed as white

HTML RGBA Colors​

RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color.

An RGBA color value is specified with:

rgba(red, green, blue, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all):

HTML HEX Colors​

In HTML, a color can be specified using a hexadecimal value in the form:

#RRGGBB

Where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example:

  • #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.
  • #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.
  • #000000 is displayed as black
  • #ffffff is displayed as white

HTML HSL Colors​

In HTML, a color can be specified using hue, saturation, and lightness (HSL) in the form:

hsl(hue,  saturation,  lightness)

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color.

Lightness is also a percentage value, 0% is black, and 100% is white.

Saturation​

Saturation can be described as the intensity of a color.

For example:

  • 100% is pure color, no shades of gray
  • 50% is 50% gray, but you can still see the color.
  • 0% is completely gray, you can no longer see the color.

Lightness​

The lightness of a color can be described as how much light you want to give the color, where 0% means no light (black), 50% means 50% light (neither dark nor light) 100% means full lightness (white).

HTML HSLA Colors​

HSLA color values are an extension of HSL color values with an Alpha channel - which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue,  saturation,  lightness, alpha)

The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

Table of Contents