HTML Color Specification: Names, Hex Codes, RGB, and HSL

Learn the various ways to specify colors in HTML: using predefined color names, hexadecimal codes (#RRGGBB), RGB values (rgb(r,g,b)), and HSL values (hsl(h,s,l)). This guide clarifies the different methods and helps you choose the best approach for your web design needs.

Specifying Colors in HTML

Using Color Names

HTML supports specifying colors using predefined color names. This is a simple and easy-to-understand way to add color to your HTML elements, but the range of colors is very limited compared to other methods. These names are case-insensitive.

<p style="color:blue;">Blue text</p>
<p style="background-color:red;">Red background</p>

HTML provides approximately 140 standard color names.

Specifying Colors with RGB, HEX, HSL, RGBA, HSLA

For more precise color control, you can use these color value systems:

• RGB (Red, Green, Blue): Specifies a color using its red, green, and blue components (e.g., rgb(255, 0, 0) for red).
• HEX (Hexadecimal): Represents a color using a six-digit hexadecimal code (e.g., #ff0000 for red).
• HSL (Hue, Saturation, Lightness): Specifies a color using its hue, saturation, and lightness (e.g., hsl(0, 100%, 50%) for red).
• RGBA (Red, Green, Blue, Alpha): Similar to RGB, but includes an alpha channel specifying transparency (e.g., rgba(255, 0, 0, 0.5) for a 50% transparent red).
• HSLA (Hue, Saturation, Lightness, Alpha): Similar to HSL, but includes an alpha channel for transparency.

<p style="background-color:rgb(255, 99, 71);">RGB</p>
<p style="background-color:#ff6347;">HEX</p>
<p style="background-color:hsl(9, 100%, 64%);">HSL</p>
<p style="background-color:rgba(255, 99, 71, 0.5);">RGBA</p>
<p style="background-color:hsla(9, 100%, 64%, 0.5);">HSLA</p>