HTML Colors Explained - HEX, RGB, and HSL in Detail

Colors are what make a site beautiful instead of boring. In HTML you can set the color of any element in four different ways. Each method has its own uses and advantages - and you will learn them all here.

Where are colors used in HTML? In the style attribute directly on elements (we will learn CSS later for full control). For example: <p style="color: red;"> or <div style="background-color: #1e90ff;">

Method 1: Color Names

HTML supports more than 140 standard color names. You can use them directly without memorizing codes.

<p style="color: red;">Red text</p>
<p style="color: DodgerBlue;">Blue text</p>
<p style="background-color: Tomato; color: white;">Tomato background!</p>
<p style="color: MediumSeaGreen;">Medium green text</p>

Some common colors by name:

Method 2: HEX Values - The Most Common

HEX stands for Hexadecimal. It is the most common method among web developers. It starts with # followed by 6 digits or letters (0-9 and A-F).

<!-- Format: #RRGGBB
     RR = red amount (00-FF)
     GG = green amount (00-FF)
     BB = blue amount (00-FF) -->

<p style="color: #ff0000;">Pure red</p>
<p style="color: #00ff00;">Pure green</p>
<p style="color: #0000ff;">Pure blue</p>
<p style="color: #000000;">Black</p>
<p style="color: #ffffff; background: #333;">White</p>
<p style="color: #ff6347;">Tomato color in HEX</p>

00 means none of that color, and FF means the maximum value. For example, #ff0000 = full red + no green + no blue = pure red.

HEX shorthand: If each pair repeats, it can be shortened:

<!-- #ff0000 = #f00 (same result) -->
<!-- #ffffff = #fff -->
<!-- #000000 = #000 -->

Method 3: RGB Values

Based on mixing three primary colors: red, green, and blue. Each value ranges from 0 (none) to 255 (max).

<!-- Format: rgb(red, green, blue) -->

<p style="color: rgb(255, 0, 0);">Pure red</p>
<p style="color: rgb(0, 128, 0);">Green</p>
<p style="color: rgb(100, 149, 237);">Cornflower blue</p>
<p style="color: rgb(128, 128, 128);">Gray (equal values = grayscale)</p>

Transparency - RGBA

Adding the letter A (Alpha) lets you control transparency. The value is between 0 (fully transparent) and 1 (fully opaque).

<!-- Format: rgba(red, green, blue, alpha) -->
<p style="background-color: rgba(255, 0, 0, 1.0);">100% opaque red</p>
<p style="background-color: rgba(255, 0, 0, 0.5);">50% transparent red</p>
<p style="background-color: rgba(255, 0, 0, 0.1);">10% transparent red</p>

Method 4: HSL Values - The Most Human-Friendly

HSL stands for Hue, Saturation, Lightness. It is closest to how humans see colors in nature.

• Hue: from 0 to 360 - color wheel (0=red, 120=green, 240=blue)
• Saturation: from 0% (gray) to 100% (vivid color)
• Lightness: from 0% (black) to 100% (white), 50% = normal color

<!-- Format: hsl(hue, saturation%, lightness%) -->
<p style="color: hsl(0, 100%, 50%);">Red (0)</p>
<p style="color: hsl(120, 100%, 40%);">Green (120)</p>
<p style="color: hsl(240, 100%, 50%);">Blue (240)</p>

<!-- Shades of the same color by changing only lightness -->
<p style="color: hsl(240, 100%, 20%);">Very dark blue</p>
<p style="color: hsl(240, 100%, 50%);">Normal blue</p>
<p style="color: hsl(240, 100%, 80%);">Very light blue</p>

Transparency - HSLA

<!-- Format: hsla(hue, saturation%, lightness%, alpha) -->
<p style="background-color: hsla(9, 100%, 64%, 0.5);">50% transparent tomato red</p>

Complete Comparison of Color Systems

Frequently Asked Questions - FAQ

Which color system should I choose?

At the beginning, use color names for learning. In real projects, use HEX for fixed colors. Use RGBA when you need transparency. Use HSL when building a color palette and you need lighter or darker shades of the same color.

How do I get the HEX code for a specific color?

Use a Color Picker tool on any site such as coolors.co or color.adobe.com. Or open DevTools in your browser (F12) and look for the color picker. You can also use the Color Picker in VS Code.

What do #000 and #fff mean?

#000 is shorthand for #000000 = pure black (all colors at 0). #fff is shorthand for #ffffff = pure white (all colors at max).