Learn Java, Angular, SQL with Coding Exercises & Career Tips

Colors

Colors in HTML are used to enhance the look and feel of a webpage by changing the text, background and border colors of elements.
HTML supports color name like red, orange, blue, black etc. and also accepts code code ( like #ff5733, rgb(255, 255, 255) etc.).

Why Use Colors in HTML

To highlight important text
To create a visually appealing layout
To match your brand or theme
To make content easier to read

Types of Colors You Can Use

HTML allows you to use
Color names like red, blue, yellow
HEX codes like #ff5733, #00ff00
RGB values like rgb(255, 0, 0)

You can use any of these depending on what works best for you.

Text Color
Text color is applied using the color property in the style attribute.

Syntax:

<h2 style="color: blueviolet">This is heading text</h2>
<p style=color: "blue">This is paragraph text</p>

Example:

<!DOCTYPE html>
<html>
 <head>
  <title>Text Color Example</title>
 <head>
 <body>
  <h2 style="color:blueviiolet">Text Color Example 1</h2>
  <h3 style="color:yellow">Text Color Example 2</h3>
  <p style="color:blue">Text Color Example 3</p> 
 </body>
</html>

Output:

Background Color
Background color is applied using the background-color property, and it can be applied to the entire body or individual elements.

Syntax:

<body style="background-color:antiquewhite;">
 <h2 style="background-color:blueviolet">Heading with Background</h2>
</body>

Example:

<!DOCTYPE html>
<html>
 <head>
  <title>Background Color Example</title>
 </head>
 <body style="background-color:natiquewhite;">
  <h2 style="background-color:blueviolet">Background Color Example 1</h2>
  <h3 style="background-color:yellow">Background Color Example 2</h3>
  <p style="background-color:White">Background Color Example 3</p>
 </body>
</html>

Output:

Border Color
You can change the color of borders using the border property.

Syntax:

<h2 style="border:2px solid orange">Orange Border</h2>
<p style="border:2px solid black">Black Border</p>

Example:

<!DOCTYPE html>
<html>
 <head>
  <title>Border Color Example</title>
 </head>
 <body>
  <h2 style="border:2px solid orange">Border Color Example 1</h2>
  <h3 style="border:2px solid yellow">Border Color Example 2</h3>
  <p style="border:2px solid black">Border Color Example 3</p>
 </body>
</html>

Output:

Key Point

Color name are not case-sensitive.
You can also use HEX, RGB and HSL values.
Styling can be applied inline, internally (with <style>) or externally( with .css files).