HTML Colors - Detailed Overview

Introduction to HTML Colors

In HTML, colors can be applied to text, backgrounds, borders, and other elements using various methods. The most common ways to specify colors in HTML are:

• Color Names
• Hexadecimal Color Codes
• RGB Color Codes
• RGBA Color Codes
• HSL Color Codes
• HSLA Color Codes

Color Names

HTML supports 140 named colors. For example:

<p style="color: red;">This text is red.</p>

Hexadecimal Color Codes

Hexadecimal color codes are 6-digit codes representing colors. They start with a hash (#) followed by three pairs of hex digits. For example:

<p style="color: #ff0000;">This text is red.</p>

Here is a color box showing the hexadecimal color:

RGB Color Codes

RGB color codes use the RGB color model with values for red, green, and blue. The format is rgb(red, green, blue). For example:

<p style="color: rgb(0, 255, 0);">This text is green.</p>

Here is a color box showing the RGB color:

RGBA Color Codes

RGBA color codes are similar to RGB but include an alpha (opacity) value. The format is rgba(red, green, blue, alpha). For example:

<p style="color: rgba(0, 0, 255, 0.5);">This text is semi-transparent blue.</p>

Here is a color box showing the RGBA color:

HSL Color Codes

HSL color codes use the HSL color model with values for hue, saturation, and lightness. The format is hsl(hue, saturation%, lightness%). For example:

<p style="color: hsl(120, 100%, 50%);">This text is green.</p>

Here is a color box showing the HSL color:

HSLA Color Codes

HSLA color codes are similar to HSL but include an alpha (opacity) value. The format is hsla(hue, saturation%, lightness%, alpha). For example:

<p style="color: hsla(240, 100%, 50%, 0.3);">This text is semi-transparent blue.</p>

Here is a color box showing the HSLA color: