HTML Colors


In HTML, you can pick colors using preset names, or by using values like RGB, HEX, HSL, RGBA, or HSLA.


Color Names

In HTML, you can indicate a color by using its name:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Background Color

You can set the background color for HTML elements:

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.


Text Color

You can set the color of text:

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.


Border Color

You can also set the color of borders:

Hello World


Color Values

In HTML, you can describe colors using RGB, HEX, HSL, RGBA, and HSLA values.

These three <div> elements each have a background color set using RGB, HEX, and HSL values.

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

The two <div> sections below use RGBA and HSLA values to set their background colors. These values include an Alpha channel, providing 50% transparency in this case.

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)

Learn more about Color Values

You will learn more about RGB, HEX and HSL in the next chapters.


HTML RGB and RGBA Colors

An RGB color value stands for the combination of red, green, and blue lights.

An RGBA color value is like RGB, but with an extra channel called Alpha, which controls opacity.


RGB Color Values

In HTML, you can define a color using an RGB value, which follows this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) Specifies color strength using a value from 0 to 255.

This indicates that there are 16,777,216 potential colors, achieved by multiplying 256 by itself three times (256 x 256 x 256).

Consider the color code "rgb(255, 0, 0)." It appears as red because the red part is at its maximum (255), while the green and blue parts are at the minimum (0).


HTML HEX Colors

In a straightforward manner, a hexadecimal color is defined using: #RRGGBB. Here, RR stands for red, GG represents green, and BB signifies blue. These are hexadecimal numbers that determine the color's parts.


HEX Color Values

In HTML, you can define a color using a hexadecimal value like this:

#rrggbb

In this 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.