HTML Colors

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