HTML Font Color

With the help of some tool of HTML, we can design and style our web content. Text formatting is one of the ways of web designing. With the help of HTML, we can provide a different look for the text of the web content. In that way, font color is one of the most important approaches to changing the look of the text. The basic syntax for using the font color is as follows.

Syntax:

<element style="color: color_value;">
  Text content goes here
</element> 

In the above code:

The <element> tag represents all the HTML elements such as <h1>, <p>, or <span>.
style="color: color_value;" is the inline property of the CSS in which we can provide the font color to the text of the web content. We can use the color name in the form of color names, hexadecimal color codes, RGB values, or HSL values.

Let us discuss all the methods available for the font color property.

Using Color Names

In HTML, with the help of a color name, we can define the color property for the font color. This property is very easy to remember the name. Here are some examples.

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

Let us take a program and discuss elaborately the color property.

Example 1:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Wider Rainbow with Different Shapes</title>
 <style>
  .rainbow {
   width: 400px; /* Increased container width */
   height: 80px; /* Increased container height */
   position: relative;
   overflow: hidden;
  }

  .rainbow div {
   height: 100%;
   position: absolute;
  }

  .red { background-color: red; border-radius: 50% 50% 0 0; }
  .orange { background-color: orange; }
  .yellow { background-color: yellow; }
  .green { background-color: green; }
  .blue { background-color: blue; }
  .indigo { background-color: indigo; }
  .violet { background-color: violet; border-radius: 0 0 50% 50%; }
 </style>
</head>
<body>
 <div class="rainbow">
  <div class="red" style="width: 100%;"></div>
  <div class="orange" style="width: 85%;"></div>
  <div class="yellow" style="width: 70%;"></div>
  <div class="green" style="width: 55%;"></div>
  <div class="blue" style="width: 40%;"></div>
  <div class="indigo" style="width: 25%;"></div>
  <div class="violet" style="width: 10%;"></div>
 </div>
</body>
</html>

Output:

Explanation:

In the above code, we have created the seven div elements with different background colors using color names (red, orange, yellow, green, blue, indigo, and violet). We use the border-radius property to make the div elements circular and give them a rainbow-like appearance. The display inline-block style ensures that the rainbow colors are displayed next to each other horizontally.

Hexadecimal Color Codes

Providing the font color with the help of hexadecimal value is very popular among developers. Each hexa decimal color will be represented with the help of a # value along with a six-digit hexadecimal code. The hexadecimal code will provide a huge range of color collections. Below are some examples.

<p style="color: #FF5733;">This text is a shade of orange.</p>
<p style="color: #3498DB;">This text is a shade of blue.</p>
<p style="color: #27AE60;">This text is a shade of green.</p>

Example 2:

Let us take a program and discuss elaborately the color property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  body {
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h1 {
    font-size: 3rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
 <h1>Welcome to the JavaTpoint!</h1>
</body>
</html>

Output:

Explanation:

In the above code, we have used the linear-gradient property for the background of the body element. The to-right direction specifies that the gradient should go from left to right, creating a horizontal rainbow effect. We specify seven hexadecimal color codes, one for each rainbow color (red, orange, yellow, green, blue, indigo, and violet).

RGB and RGBA Values

We can also use the color property with the help of RGB and RGBA values. We can use RGB (Red, Green, Blue) values or RGBA (Red, Green, Blue, Alpha) values for transparency. RGB consists of three integers, which represent the intensity of red, green, and blue, respectively, within the range of 0 to 255. Similarly, the RGBA value consists of a similar integer but includes an additional alpha value, which controls the opacity of the color (0 for fully transparent, 1 for fully opaque). Here are some examples.

<p style="color: rgb(255, 0, 0);">This text is red.</p>
<p style="color: rgba(0, 128, 255, 0.5);">This text is semi-transparent blue.</p>

Example 3:

It is an example of the implementation of RGB color.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .colored-box {
    width: 200px;
    height: 200px;
    background-color: rgb(255, 0, 0); /* Red color using RGB values */
  }
</style>
</head>
<body>
 <div class="colored-box"></div>
 
</body>
</html>

Output:

Explanation:

In the above code, we have created an HTML <div> element with the class-colored box. Then, in the CSS, we define the .colored-box class and use the background-color property to set the background color to red using RGB values. The RGB value rgb(255, 0, 0) represents red, with maximum red intensity (255), no green (0), and no blue (0). In the output, we get the 200x200 pixel square with a red background color.

Example 4:

It is an example of the implementation of RGBA color.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .semi-transparent-box {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 255, 0.5); /* Blue color with 50% transparency */
  }
</style>
</head>
<body>
 <div class="semi-transparent-box"></div>
 
</body>
</html>

Output:

Explanation:

In the above code, we have an HTML <div> element with the class semi-transparent box. After that, we define the .semi-transparent-box class and use the background-color property to set the background color to blue using rgba(0, 0, 255, 0.5). In that, RGBA values rgba(0, 0, 255, 0.5) represent blue with full intensity in the red and blue channels (0), no green (0), and a transparency level of 50% (0.5).

HSL and HSLA Values

It provides different methods to provide the font color on our web page. HSL represents the color itself, saturation controls the intensity, and lightness controls the brightness. HSLA values include an additional alpha value for transparency. Here are some examples.

<p style="color: hsl(0, 100%, 50%);">This text is red.</p>
<p style="color: hsla(210, 100%, 50%, 0.5);">This text is semi-transparent blue.</p>

Example 5:

It is an example of the implementation of HSL color.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
  .hsl-box {
    width: 200px;
    height: 200px;
    background-color: hsl(120, 100%, 50%); /* Green color using HSL values */
  }
</style>
</head>
<body>
 <div class="hsl-box"></div>
 
</body>
</html>

Output:

Explanation:

In the above code, we have an HTML <div> element with the class hsl-box. After that, we have to define the .hsl-box class and use the background-color property to set the background color to green using hsl(120, 100%, 50%). In the HSL value, the first value (120 in this example) represents the hue, which determines the type of color (e.g., 0 for red, 120 for green, 240 for blue). The second value (100% in this example) represents the saturation, which controls the intensity or vividness of the color (100% for fully saturated, 0% for grayscale). The third value (50% in this example) represents the lightness, which controls how light or dark the color is (0% for black, 100% for white).

Example 6:

It is an example of the implementation of HSLA color.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style> after 
  .hsla-box {
    width: 200px;
    height: 200px;
    background-color: hsla(210, 100%, 50%, 0.5); /* Semi-transparent blue color using HSLA values */
  }
</style>
</head>
<body>
 <div class="hsla-box"></div>
 
</body>
</html>

Output:

Explanation:

In the above code, we have an HTML <div> element with the class hsla-box. After that, we have to define the. hsla-box class and use the background-color property to set the background color to a semi-transparent blue using hsla(210, 100%, 50%, 0.5). The hsla function takes four values. The first value (210 in this example) represents the hue, determining the type of color. The second value (100% in this example) represents the saturation, controlling the color's intensity. The third value (50% in this example) represents the lightness, controlling the color's brightness. The fourth value (0.5 in this example) represents the alpha channel, controlling the color's transparency. It ranges from 0 (fully transparent) to 1 (fully opaque).

Combining Font Color with Other Styles

For eye caching style, we have to combine all other style properties. For example, we can change the font size font family and add various CSS properties to create beautiful typography on your web pages.

Here are some examples,

<h1 style="color: #FF5733; font-size: 36px; font-family: 'Arial', sans-serif; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);">Welcome to javaTpoint</h1>

Example 7:

It is an example of the implementation of Combining Font Color with Other Styles.

Code:

 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   h1 {
     color: #ff5733; /* Hexadecimal color code for a reddish-orange color */
     font-size: 36px;
     font-weight: bold;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
   }
 </style>
 </head>
 <body>
  <h1>Welcome to javaTpoint</h1>
  
 </body>
 </html>

Output:

Explanation:

In the above code, We have an HTML <h1> element with the text "Welcome to javaTpoint." After that, we use the color property to set the font color to a reddish-orange color with the hexadecimal code #ff5733. We also set the font-size property to make the text larger (36px), font weight to make it bold and text-shadow to apply a subtle text shadow to improve readability.

Next TopicHTML Font Size

← prev next →