Introduction to HTML Colors
Colors make websites visually appealing and help convey information.
In HTML, colors can be applied to text, backgrounds, borders, and other elements using the style attribute or CSS.
HTML itself doesn’t have a “color tag”—colors are applied through attributes or CSS.
Ways to Specify Colors in HTML
There are 3 main ways to define colors:
1️⃣ By Color Name
HTML supports 147 standard color names like red, blue, green, orange, etc.
Example:
<p style="color: red;">This is red text</p>
2️⃣ By Hexadecimal Code
Hex codes define colors using six digits/letters representing red, green, and blue (RGB).
Format: #RRGGBB
Example:
<p style="color: #ff0000;">This is red text using hex code</p> <p style="background-color: #00ff00;">Green background</p>
💡 #000000 = black, #ffffff = white
3️⃣ By RGB Function
You can also define colors using RGB values:
Format: rgb(red, green, blue) (0–255 each)
Example:
<p style="color: rgb(255, 0, 0);">Red Text using RGB</p> <p style="background-color: rgb(0, 255, 0);">Green Background</p>
4️⃣ By HSL Function (Optional Advanced)
HSL = Hue, Saturation, Lightness
<p style="color: hsl(0, 100%, 50%);">Red Text using HSL</p> <p style="color: hsl(120, 100%, 50%);">Green Text using HSL</p>
Common Use Cases
1️⃣ Text Color
<p style="color: blue;">This text is blue</p>
2️⃣ Background Color
<p style="background-color: yellow;">This paragraph has a yellow background</p>
3️⃣ Border Color
<div style="border: 2px solid red; padding:10px;">
This div has a red border
</div>
CSS vs HTML Attribute
Old HTML allowed a bgcolor or color attribute:
<p bgcolor="yellow" color="blue">Old HTML way</p>
✅ Modern Best Practice: Use CSS instead of old HTML attributes.
Tips for Using Colors
- Use readable contrast between text and background
- Avoid too many bright colors on one page
- Stick to a consistent color palette for your website
- Use online tools like Coolors or Adobe Color for palettes
- Use CSS variables for maintainable colors:
:root {
--main-color: #3498db;
}
p {
color: var(--main-color);
}
Practice Code Example
Create a webpage demonstrating:
- Text with color
- Background color
- Colored border
- Hex, RGB, and named colors
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Colors Practice</title>
</head>
<body>
<h1 style="color: #ff5733;">Hex Color Example</h1>
<p style="color: rgb(0, 128, 0);">RGB Color Example: Green text</p>
<p style="color: blue;">Named Color Example: Blue text</p>
<div style="background-color: yellow; padding: 10px; border: 2px solid red;">
This div has a yellow background and a red border.
</div>
</body>
</html>