HTML Colors

HTML colors are used to add color to text, backgrounds, borders, and other elements on a web page. Colors make websites more attractive, readable, and visually organized.

In modern HTML, colors are mainly controlled using CSS. HTML provides the structure of the page, while CSS properties such as color and background-color are used to define how elements appear.

In this tutorial, you will learn how to use HTML colors with color names, HEX values, RGB, RGBA, HSL, and HSLA values.

How Are Colors Used in HTML?

Colors can be applied to HTML elements using CSS.

For example:

<p style="color: blue;">This is blue text.</p>

Here, the color property changes the text color.

You can also change the background color:

<p style="background-color: yellow;">This has a yellow background.</p>

HTML Color Names

CSS provides many predefined color names that you can use directly.

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

Some common color names include:

Color	Example
Red	red
Blue	blue
Green	green
Yellow	yellow
Black	black
White	white
Orange	orange
Purple	purple
Gray	gray

Color names are easy to understand, but HEX, RGB, and HSL values provide more control.

HTML Colors with HEX Values

A HEX color value starts with # and contains six hexadecimal characters.

For example:

<p style=”color: #2196f3;”>Blue text</p>

A HEX color is commonly written as:

#RRGGBB

Here:

• RR represents red.
• GG represents green.
• BB represents blue.

For example:

#ff0000

represents red.

#00ff00

represents green.

#0000ff

represents blue.

HTML Colors with RGB

RGB stands for Red, Green, and Blue.

An RGB color is written using three values:

<p style="color: rgb(33, 150, 243);">
    Blue text
</p>

Each RGB value normally ranges from 0 to 255.

For example:

rgb(255, 0, 0)

represents red.

rgb(0, 0, 255)

represents blue.

HTML Colors with RGBA

RGBA is an extension of RGB that adds an alpha value for transparency.

<p style="color: rgba(33, 150, 243, 0.5);">
    Semi-transparent blue text
</p>

The alpha value ranges from 0 to 1.

• 0 = completely transparent
• 1 = completely opaque
• 0.5 = partially transparent

HTML Colors with HSL

HSL stands for Hue, Saturation, and Lightness.

<p style="color: hsl(207, 90%, 54%);">
    Blue text
</p>

HSL uses:

• Hue: The color type.
• Saturation: The intensity of the color.
• Lightness: How light or dark the color is.

Background Colors

The background-color property changes the background color of an HTML element.

<div style="background-color: #e8f3ff;">
    <p>Welcome to Web4Learners.</p>
</div>

You can apply background colors to many elements, including:

• <body>
• <div>
• <header>
• <section>
• <p>
• <button>

Text Colors

The CSS color property changes the text color.

<h1 style=”color: #2196f3;”>HTML Colors</h1>

For multiple elements, CSS is usually better than inline styles.

<h1>HTML Colors</h1>
<p>Learn how to use colors in HTML.</p>

h1 {
    color: #2196f3;
}

p {
    color: #333333;
}

HTML Colors Best Practices

Follow these practices when using colors:

• Use CSS to control colors.
• Choose colors that provide good text contrast.
• Keep your website’s color scheme consistent.
• Avoid using too many colors unnecessarily.
• Use HEX, RGB, or HSL when you need precise colors.
• Use meaningful color combinations for buttons and links.
• Do not rely only on color to communicate important information.

Complete HTML Colors Example

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Colors</title>

    <style>
        body {
            background-color: #f5f9ff;
        }

        h1 {
            color: #2196f3;
        }

        p {
            color: #333333;
        }

        .box {
            background-color: #e8f3ff;
            padding: 20px;
        }
    </style>
</head>

<body>

    <h1>HTML Colors</h1>

    <div class="box">
        <p>
            Colors can make web pages more attractive and easier to understand.
        </p>
    </div>

</body>

</html>

HTML Colors Cheat Sheet

Method	Example
Color name	red
HEX	#ff0000
RGB	rgb(255, 0, 0)
RGBA	rgba(255, 0, 0, 0.5)
HSL	hsl(0, 100%, 50%)
HSLA	hsla(0, 100%, 50%, 0.5)