HTML Colors

What is an HTML Colors?

HTML Colors is an element used to indicate colors of background, borders, text, etc.
There are different types of HTML Colors mode as shown below with examples.

Normal Mode

In normal mode, we can directly mention the color name of content.

Example


<p style="background-color:green;">The background color is GREEN.</p>

<p style="background-color:orange; color:white;">The BACKGROUND color is ORANGE and the TEXT color is WHITE.</p>

						<p style="border:5px solid blue;">The BORDER color is BLUE.</p>

Try It »

RGB & RGBA

An RGB color value indicates RED, GREEN & BLUE color source.
An RGBA color value is upgrade of RGB with Alpha value, which is used to indicates the opacity of colors.

Example


						<p style="background-color:rgba(244, 128, 36)";> The background is orange</p>

						<p style="background-color:rgba(244, 128, 36, 0.5)";> Alpha value is added in RGB, the opacity effect in the background color </p>

Try It »

HEX

HEX stand for hexadecimal color, it is define by color code such as #RRGGBB.

Example


						<p style="background-color:#f48024; color:#fff;">BACKGROUND color is orange and TEXT color is white. </p>

Try It »

HSL & HSLA

HSL stands for hue, saturation and lightness.
HSLA color value is upgrade of HSL with Alpha value, which is used to indicates the opacity of colors.

Example


						<p style="background-color:hsl(26, 90%, 54%);">BACKGROUND color is orange. </p>

						<p style="background-color:hsl(26, 90%, 54%, 0.5);">BACKGROUND color with opacity effect. </p>

Try It »