HTML Tutorials
HTML Colors

HTML Colors (Named Colors, Hex, RGB)

Colors play a vital role in web design, making websites visually appealing and easy to navigate. In HTML, you can define colors using different formats, including named colors, hex codes, and RGB values. In this article, we will explore these color formats and learn how to use them effectively in HTML and CSS.

1. Named Colors

HTML provides a set of predefined color names that you can use directly. These colors have names like red, blue, green, yellow, and many more.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Named Colors</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: darkblue;
        }
        p {
            color: tomato;
        }
    </style>
</head>
<body>
    <h1>Named Colors Example</h1>
    <p>This paragraph uses a named color.</p>
</body>
</html>

Common Named Colors:

  • Primary Colors: red, blue, yellow
  • Secondary Colors: green, orange, purple
  • Shades: black, white, gray, lightgray, darkgray
  • Other Colors: pink, brown, violet, cyan, magenta

For a complete list, check the W3C named colors.

2. Hexadecimal Color Codes

Hex color codes use a six-digit combination of numbers and letters preceded by a # symbol. Each pair of digits represents the intensity of red, green, and blue.

Format:

#RRGGBB
  • RR (Red), GG (Green), BB (Blue) values range from 00 (lowest) to FF (highest).

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Hex Colors</title>
    <style>
        body {
            background-color: #ffebcd;
        }
        h1 {
            color: #8a2be2;
        }
        p {
            color: #ff4500;
        }
    </style>
</head>
<body>
    <h1>Hex Colors Example</h1>
    <p>This paragraph uses a hex color code.</p>
</body>
</html>

Common Hex Codes:

  • Black: #000000
  • White: #FFFFFF
  • Red: #FF0000
  • Green: #008000
  • Blue: #0000FF

For more details on hex colors, visit MDN Web Docs.

3. RGB Color Model

The RGB model defines colors using three values (Red, Green, Blue), each ranging from 0 to 255.

Format:

rgb(red, green, blue)

Example:

<!DOCTYPE html>
<html>
<head>
    <title>RGB Colors</title>
    <style>
        body {
            background-color: rgb(240, 248, 255);
        }
        h1 {
            color: rgb(75, 0, 130);
        }
        p {
            color: rgb(255, 99, 71);
        }
    </style>
</head>
<body>
    <h1>RGB Colors Example</h1>
    <p>This paragraph uses an RGB color value.</p>
</body>
</html>

Common RGB Values:

  • Black: rgb(0, 0, 0)
  • White: rgb(255, 255, 255)
  • Red: rgb(255, 0, 0)
  • Green: rgb(0, 128, 0)
  • Blue: rgb(0, 0, 255)

4. Choosing the Right Color Format

  • Named Colors: Simple and easy to remember but limited in variety.
  • Hex Codes: Widely used and compact, ideal for web design.
  • RGB Values: Useful for color manipulation and opacity control.

Conclusion

Understanding HTML colors is essential for designing attractive web pages. Whether using named colors, hex codes, or RGB values, each format offers flexibility for styling elements. Try experimenting with different colors to enhance the look of your website!

Further Reading

HTML Entities and SymbolsHTML Attributes