HTML Colors
Working with colors in HTML and CSS
🌈 What are HTML Colors?
HTML colors are used to add visual appeal to web pages. You can specify colors using color names, hex codes, RGB values, or HSL values.
<p style="color: red;">Red text</p>
<p style="color: #0066cc;">Blue text using hex</p>
<p style="background-color: yellow;">Yellow background</p>
<p style="color: rgb(255, 0, 255);">Magenta using RGB</p>
Output:
Red text
Blue text using hex
Yellow background
Magenta using RGB
Color Methods
Color Names
Use predefined color names
color: red;Hex Codes
Six-digit hexadecimal values
color: #ff0000;RGB Values
Red, Green, Blue values
color: rgb(255, 0, 0);HSL Values
Hue, Saturation, Lightness
color: hsl(0, 100%, 50%);🔹 Color Names
HTML supports 140 standard color names:
<p style="color: red;">Red</p>
<p style="color: blue;">Blue</p>
<p style="color: green;">Green</p>
<p style="color: orange;">Orange</p>
<p style="color: purple;">Purple</p>
<p style="color: brown;">Brown</p>Output:
Red
Blue
Green
Orange
Purple
Brown
🔹 Hex Color Codes
Hex codes use # followed by 6 characters (0-9, A-F):
<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>
<p style="color: #00ffff;">Cyan (#00ffff)</p>Output:
Red (#ff0000)
Green (#00ff00)
Blue (#0000ff)
Yellow (#ffff00)
Magenta (#ff00ff)
Cyan (#00ffff)
🔹 RGB Color Values
RGB uses red, green, and blue values from 0 to 255:
<p style="color: rgb(255, 0, 0);">Red RGB</p>
<p style="color: rgb(0, 255, 0);">Green RGB</p>
<p style="color: rgb(0, 0, 255);">Blue RGB</p>
<p style="color: rgb(255, 165, 0);">Orange RGB</p>
<p style="color: rgb(128, 0, 128);">Purple RGB</p>Output:
Red RGB
Green RGB
Blue RGB
Orange RGB
Purple RGB
🔹 Background Colors
Apply colors to backgrounds of elements:
<div style="background-color: lightblue; padding: 10px; color: ivory; margin: 5px 0;">Light blue background</div>
<div style="background-color: #ffcccc; padding: 10px; color: ivory;">Pink background</div>
<div style="background-color: rgb(144, 238, 144); padding: 10px; color: ivory;">Light green background</div>Output:
🔹 Color Combinations
Combine text and background colors effectively:
<p style="color: white; background-color: black; padding: 10px;">White text on black</p>
<p style="color: yellow; background-color: blue; padding: 10px;">Yellow text on blue</p>
<p style="color: #333; background-color: #f0f0f0; padding: 10px;">Dark gray on light gray</p>Output:
White text on black
Yellow text on blue
Dark gray on light gray