HTML Colors

Understanding color values and formats in HTML

🎨 HTML Colors

HTML colors can be specified using color names, hex codes, RGB values, HSL values, and more. Colors make your web pages visually appealing and help convey information. 


<!-- Different ways to specify colors -->
<p style="color: red;">Red text using name</p>
<p style="color: #ff0000;">Red text using hex</p>
<p style="color: rgb(255, 0, 0);">Red text using RGB</p>

Color Formats

📝

Color Names

140 predefined color names 

<p style="color: blue;">Blue text</p>
#️⃣

Hex Colors

6-digit hexadecimal values 

<p style="color: #0066cc;">Hex blue</p>
🔢

RGB Colors

Red, Green, Blue values (0-255) 

<p style="color: rgb(0, 102, 204);">RGB blue</p>
🌈

HSL Colors

Hue, Saturation, Lightness 

<p style="color: hsl(210, 100%, 40%);">HSL blue</p>

🔹 Color Names

HTML supports 140 standard color names: 

<!-- Basic colors -->
<p style="color: red;">Red text</p>
<p style="color: green;">Green text</p>
<p style="color: blue;">Blue text</p>
<p style="color: orange;">Orange text</p>
<p style="color: purple;">Purple text</p>

<!-- Background colors -->
<div style="background-color: lightblue; padding: 10px;">
    Light blue background
</div>

Output:

Red text

Green text

Blue text

Orange text

Purple text

Light blue background

🔹 Hex Colors

Hex colors use a 6-digit code: #RRGGBB 

<!-- Hex color examples -->
<p style="color: #ff0000;">Red (#ff0000)</p>
<p style="color: #00ff00;">Green (#00ff00)</p>
<p style="color: #0000ff;">Blue (#0000ff)</p>
<p style="color: #ffff00;">Yellow (#ffff00)</p>
<p style="color: #ff00ff;">Magenta (#ff00ff)</p>

<!-- Short hex (3 digits) -->
<p style="color: #f00;">Red (#f00 = #ff0000)</p>
<p style="color: #0f0;">Green (#0f0 = #00ff00)</p>

Output:

Red (#ff0000)

Green (#00ff00)

Blue (#0000ff)

Yellow (#ffff00)

Magenta (#ff00ff)

Hex Color Format:

  • #RRGGBB: RR=Red, GG=Green, BB=Blue
  • Values: 00 (minimum) to FF (maximum)
  • Short form: #RGB expands to #RRGGBB
  • Example: #f0a = #ff00aa

🔹 RGB Colors

RGB colors specify red, green, and blue values (0-255): 

<!-- RGB color examples -->
<p style="color: rgb(255, 0, 0);">Red (255, 0, 0)</p>
<p style="color: rgb(0, 255, 0);">Green (0, 255, 0)</p>
<p style="color: rgb(0, 0, 255);">Blue (0, 0, 255)</p>
<p style="color: rgb(128, 128, 128);">Gray (128, 128, 128)</p>

<!-- RGBA with transparency -->
<div style="background-color: rgba(255, 0, 0, 0.3); padding: 10px;">
    Semi-transparent red background
</div>

Output:

Red (255, 0, 0)

Green (0, 255, 0)

Blue (0, 0, 255)

Gray (128, 128, 128)

Semi-transparent red background

🔹 HSL Colors

HSL uses Hue (0-360°), Saturation (0-100%), and Lightness (0-100%): 

<!-- HSL color examples -->
<p style="color: hsl(0, 100%, 50%);">Red (0°, 100%, 50%)</p>
<p style="color: hsl(120, 100%, 50%);">Green (120°, 100%, 50%)</p>
<p style="color: hsl(240, 100%, 50%);">Blue (240°, 100%, 50%)</p>
<p style="color: hsl(60, 100%, 50%);">Yellow (60°, 100%, 50%)</p>

<!-- Different lightness -->
<p style="color: hsl(240, 100%, 25%);">Dark blue (25% lightness)</p>
<p style="color: hsl(240, 100%, 75%);">Light blue (75% lightness)</p>

Output:

Red (0°, 100%, 50%)

Green (120°, 100%, 50%)

Blue (240°, 100%, 50%)

Yellow (60°, 100%, 50%)

Dark blue (25% lightness)

Light blue (75% lightness)

🔹 Popular Color Palette

Common colors used in web design:

#ff6b6b
Coral Red
#4ecdc4
Turquoise
#45b7d1
Sky Blue
#f9ca24
Golden Yellow
#6c5ce7
Purple
#a29bfe
Light Purple

🧠 Test Your Knowledge

What does the hex color #ff0000 represent?