HTML Colors

HTML colors are used to color text, backgrounds, and other elements.

Color Names

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

RGB Colors

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

RGBA Colors

<p style="color: rgba(255, 0, 0, 0.5);">Transparent red</p>
<p style="background-color: rgba(0, 0, 0, 0.3);">Transparent background</p>

HEX Colors

<p style="color: #ff0000;">Red</p>
<p style="color: #00ff00;">Green</p>
<p style="color: #0000ff;">Blue</p>
<p style="color: #333;">Dark gray</p>

HSL Colors

<p style="color: hsl(0, 100%, 50%);">Red</p>
<p style="color: hsl(120, 100%, 50%);">Green</p>
<p style="color: hsl(240, 100%, 50%);">Blue</p>

Case Study: Campus Website with Colors

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Website</title>
    <style>
        :root {
            --primary: #1e3a8a;
            --secondary: #f59e0b;
            --accent: #10b981;
            --text: #1f2937;
            --bg: #f9fafb;
        }

        body {
            color: var(--text);
            background-color: var(--bg);
        }

        .header {
            background-color: var(--primary);
            color: white;
        }

        .btn {
            background-color: var(--secondary);
            color: white;
        }

        .success {
            color: var(--accent);
        }
    </style>
</head>
<body>
    <header class="header">
        <h1>Technology University</h1>
    </header>

    <main>
        <h2>Welcome</h2>
        <p class="success">Registration successful!</p>
        <button class="btn">Register Now</button>
    </main>
</body>
</html>

Everyday Case Study

Case: A developer needs to define a color scheme.

<!-- Campus Color Scheme -->
<style>
    :root {
        --campus-blue: #1e40af;
        --campus-gold: #f59e0b;
        --campus-green: #059669;
        --campus-red: #dc2626;
        --campus-gray: #6b7280;
    }

    .header { background: var(--campus-blue); }
    .highlight { background: var(--campus-gold); }
    .success { color: var(--campus-green); }
    .error { color: var(--campus-red); }
</style>

Color Palette

Primary:    #1e40af (Blue)
Secondary:  #f59e0b (Gold)
Accent:     #059669 (Green)
Error:      #dc2626 (Red)
Neutral:    #6b7280 (Gray)
Background: #f9fafb (Off-white)

Best Practices

1. Use CSS variables: For color consistency
2. Sufficient contrast: For accessibility
3. Don't overdo it: Maximum 3-4 colors
4. Use a color palette: For consistent design
5. Test accessibility: Use a contrast checker tool

Summary

HTML colors create attractive designs. Use CSS variables for color consistency across the whole website.