HTML Colors

Colors in HTML are used to enhance the visual appeal of your webpage. They can be applied to text, backgrounds, borders, and other elements using CSS or inline styles.

Ways to Specify Colors in HTML

  1. Named Colors
    HTML provides predefined color names, such as red, blue, green, etc.
    Example:

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

    Try It Now

  2. HEX Codes
    Colors are represented in hexadecimal format, starting with # and followed by 6 characters (e.g., #RRGGBB).
    Example:

    <p style="color: #ff5733;">This text has a custom color.</p>

    Try It Now

  3. RGB (Red, Green, Blue)
    Define colors by specifying red, green, and blue values in the range of 0–255.
    Example:

    <p style="color: rgb(255, 87, 51);">This text uses RGB colors.</p>

    Try It Now

  4. RGBA (RGB + Alpha)
    Adds an alpha value for transparency (0 for fully transparent, 1 for fully opaque).
    Example:

    <p style="color: rgba(255, 87, 51, 0.5);">This text is semi-transparent.</p>

    Try It Now

  5. HSL (Hue, Saturation, Lightness)
    Colors are defined using hue (angle 0–360), saturation (%), and lightness (%).
    Example:

    <p style="color: hsl(16, 100%, 60%);">This text uses HSL colors.</p>

    Try It Now

  6. HSLA (HSL + Alpha)
    Adds transparency to HSL colors.
    Example:

    <p style="color: hsla(16, 100%, 60%, 0.5);">This text is semi-transparent using HSLA.</p>

    Try It Now

Applying Colors

  1. Text Color Use the color property.
    Example:

    <h1 style="color: blue;">This is a blue heading.</h1>

    Try It Now

  2. Background Color Use the background-color property.
    Example:

    <div style="background-color: lightblue; padding: 20px;">
  This div has a light blue background.
</div>

    Try It Now

  3. Border Color Use the border property.
    Example:

    <p style="border: 2px solid green;">This paragraph has a green border.</p>

    Try It Now

Examples of Common Color Codes

Color Name HEX Code RGB Value
Red #FF0000 rgb(255, 0, 0)
Green #00FF00 rgb(0, 255, 0)
Blue #0000FF rgb(0, 0, 255)
White #FFFFFF rgb(255, 255, 255)
Black #000000 rgb(0, 0, 0)
Gray #808080 rgb(128, 128, 128)
Yellow #FFFF00 rgb(255, 255, 0)

 

Example: Colorful Webpage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Colors Example</title>
  <style>
    body {
      background-color: #f0f8ff; /* AliceBlue */
    }
    h1 {
      color: #ff4500; /* OrangeRed */
    }
    p {
      color: rgb(34, 139, 34); /* ForestGreen */
    }
    .highlight {
      background-color: yellow;
      color: black;
      padding: 5px;
    }
  </style>
</head>
<body>
  <h1>Welcome to the Colorful Webpage!</h1>
  <p>HTML allows you to use a variety of colors to style your webpage.</p>
  <p class="highlight">This is a highlighted paragraph.</p>
</body>
</html>

Try It Now

Color Gradients

Using CSS, you can create gradients for backgrounds.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Gradient Example</title>
  <style>
    body {
      background: linear-gradient(to right, red, yellow, green);
      height: 100vh;
    }
  </style>
</head>
<body>
</body>
</html>

Try It Now

Tools for Choosing Colors

  1. HTML Color Picker: Online tools to select HEX, RGB, or HSL colors (e.g., Color Picker).
  2. Browser Developer Tools: Inspect elements and experiment with different color codes in real-time.

Practice Exercise

Create a webpage using these requirements:

  • Background with a gradient of your choice.
  • A heading with a custom color.
  • Two paragraphs: one with an opaque background and one with a semi-transparent background.

HTML colors help enhance your webpage’s design and readability. By combining color codes and CSS, you can create visually appealing websites. Would you like to explore advanced color