HTML Color Names - Bharatadesam

HTML color names are predefined names for colors that are recognized by browsers. These names are straightforward to use because they don’t require any numeric or hex codes.

1. Basic Color Names

Here are a few basic HTML color names and their visual output when applied to text.

Example 1: Using Basic Color Names

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML Color Names</title>
</head>
<body>
    <h1 style="color: red;">This heading is red.</h1>
    <p style="color: blue;">This paragraph is blue.</p>
    <p style="color: green;">This text is green.</p>
    <p style="color: yellow;">This text is yellow.</p>
</body>
</html>

Expected Output:

The h1 heading will be red.
The first p paragraph will be blue.
The second p paragraph will be green.
The third p paragraph will be yellow.

2. Extended Color Names

HTML supports a wide range of color names. These include colors for both bright and muted tones, such as indigo, orange, pink, and violet. Let’s see a few more examples.

Example 2: Using Extended Color Names

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Extended HTML Color Names</title>
</head>
<body>
    <h1 style="color: orange;">This heading is orange.</h1>
    <p style="color: indigo;">This text is indigo.</p>
    <p style="color: purple;">This text is purple.</p>
    <p style="color: pink;">This text is pink.</p>
    <p style="color: violet;">This text is violet.</p>
</body>
</html>

Expected Output:

The h1 heading will be orange.
The first p paragraph will be indigo.
The second p paragraph will be purple.
The third p paragraph will be pink.
The fourth p paragraph will be violet.

3. Neutral and Pastel Colors

Neutral and pastel colors are commonly used for backgrounds, subtle highlights, and softer contrasts. Examples include gray, beige, ivory, and linen.

Example 3: Using Neutral and Pastel Color Names

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neutral and Pastel HTML Color Names</title>
</head>
<body>
    <h1 style="color: gray;">This heading is gray.</h1>
    <p style="color: beige;">This paragraph is beige.</p>
    <p style="color: ivory;">This text is ivory.</p>
    <p style="color: linen;">This text is linen-colored.</p>
</body>
</html>

Expected Output:

The h1 heading will be gray.
The first p paragraph will be beige.
The second p paragraph will be ivory.
The third p paragraph will be linen.

4. Shades of Brown

Brown shades such as brown, chocolate, and sienna are often used in designs to create warm, earthy tones.

Example 4: Using Brown Color Names

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brown Color Names</title>
</head>
<body>
    <h1 style="color: brown;">This heading is brown.</h1>
    <p style="color: chocolate;">This paragraph is chocolate.</p>
    <p style="color: sienna;">This text is sienna.</p>
</body>
</html>

Expected Output:

The h1 heading will be brown.
The first p paragraph will be chocolate.
The second p paragraph will be sienna.

5. Dark and Light Tones

Some colors are available in both dark and light versions, such as darkblue, lightgreen, lightyellow, and darkgray.

Example 5: Using Dark and Light Color Names

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark and Light HTML Color Names</title>
</head>
<body>
    <h1 style="color: darkblue;">This heading is dark blue.</h1>
    <p style="color: lightgreen;">This paragraph is light green.</p>
    <p style="color: lightyellow;">This text is light yellow.</p>
    <p style="color: darkgray;">This text is dark gray.</p>
</body>
</html>

Expected Output:

The h1 heading will be dark blue.
The first p paragraph will be light green.
The second p paragraph will be light yellow.
The third p paragraph will be dark gray.

6. Bright Colors

Bright and vibrant colors like aqua, lime, fuchsia, and orange can really pop and are often used for highlights or accents.

Example 6: Using Bright Color Names

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bright HTML Color Names</title>
</head>
<body>
    <h1 style="color: aqua;">This heading is aqua.</h1>
    <p style="color: lime;">This paragraph is lime green.</p>
    <p style="color: fuchsia;">This text is fuchsia.</p>
    <p style="color: orange;">This text is orange.</p>
</body>
</html>

Expected Output:

The h1 heading will be aqua.
The first p paragraph will be lime green.
The second p paragraph will be fuchsia.
The third p paragraph will be orange.

Conclusion

HTML provides a wide range of color names that you can use to style text, backgrounds, and other elements on your webpage. Here’s a summary of the color names used in the examples:

Basic Color Names: red, blue, green, yellow
Extended Colors: orange, indigo, purple, pink, violet
Neutral and Pastel: gray, beige, ivory, linen
Brown Shades: brown, chocolate, sienna
Dark and Light Versions: darkblue, lightgreen, lightyellow, darkgray
Bright Colors: aqua, lime, fuchsia, orange

By using these color names, you can easily apply colors to your webpage without needing to deal with hex codes or RGB values.