View Categories

HTML – Colors

Table of Contents

Colors in HTML play a significant role in web design, enhancing both visual appeal and user experience. They help in creating a user-friendly interface, highlighting key information, and even evoking specific emotions.

In HTML, colors can be applied to various elements like backgrounds, text, and borders to achieve different design goals.

HTML Color Coding Methods #

There are three primary ways to specify colors in HTML:

  1. Color Names: Use predefined color names like “red”, “green”, or “blue”.
  2. HEX Color Codes: Represent the amount of red, green, and blue using six-digit hexadecimal numbers (e.g., #ff5733).
  3. RGB Color Values: Specify the amount of red, green, and blue directly using the rgb() function (e.g., rgb(255, 87, 51)).

We’ll explore each of these methods with examples.

Setting Text Color #

To set the text color, we use the CSS color property, and we can define the value using any of the three methods mentioned.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Text Color Example</title>
</head>
<body>
    <h2 style="color: Blue;">Changing Text Color in HTML</h2>
    <p style="color: Green;">This paragraph's text is green.</p>
    <p style="color: #ff5733;">This paragraph uses a HEX color code for its text color.</p>
    <p style="color: rgb(123, 45, 67);">This paragraph uses an RGB color value.</p>
</body>
</html>

Output: You will see the headings and paragraphs in different colors based on the values specified.

Setting Background Color #

We can change the background color of any HTML element using the background-color CSS property. The value can be set using color names, HEX, or RGB codes.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Background Color Example</title>
</head>
<body>
    <h2 style="background-color: LightBlue;">Background Color for Header</h2>
    <p style="background-color: Yellow;">This paragraph has a yellow background.</p>
    <p style="background-color: #ffcc00;">This paragraph has a background color set using a HEX code.</p>
    <p style="background-color: rgb(200, 100, 150);">This paragraph uses an RGB value for its background color.</p>
</body>
</html>

Output: Each element will have different background colors as per the specified values.

Setting Border Color #

Borders can also have colors, which can be set using the border-color CSS property or by using the shorthand border property.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Border Color Example</title>
</head>
<body>
    <h2 style="border: 3px solid Red;">Header with Red Border</h2>
    <p style="border: 2px dashed Green; padding: 5px;">This paragraph has a dashed green border.</p>
    <p style="border: 2px dotted #33cc33; padding: 5px;">This paragraph uses a HEX value for its border color.</p>
    <p style="border: 3px double rgb(0, 128, 255); padding: 5px;">This paragraph uses an RGB value for its border color.</p>
</body>
</html>

Output: You will see different types of borders around the elements, with varying colors.

HTML Color Names #

HTML supports a wide range of color names that you can use to specify colors for different elements. Here’s an example of setting the background and text color using named colors.

Example:

<!DOCTYPE html>
<html>
<body style="background-color: LightGray;">
    <h1 style="color: DarkBlue;">Color Names in HTML</h1>
    <p>This paragraph uses the color name "DarkBlue" for its text.</p>
    <p style="background-color: Orange;">This paragraph has an orange background.</p>
</body>
</html>

Output: You will see a light gray background and text with different colors.

Browser-Safe Colors #

Browser-safe colors are a palette of 216 colors that are consistent across all platforms and devices. These colors are especially useful when designing for older devices or systems with limited color palettes.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Browser Safe Colors</title>
</head>
<body>
    <h2 style="color: #003366;">Browser-Safe Text Color</h2>
    <p style="background-color: #66cc99;">This paragraph uses a browser-safe color for the background.</p>
</body>
</html>

Output: The browser-safe colors will be displayed reliably across different devices.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment