How to add color in HTML without CSS ?

Last Updated : 04 Mar, 2024

In HTML, adding color to text and elements is typically done using CSS. However, there are several approaches to add color directly in HTML, without using CSS.

We will discuss the following approaches to add color without CSS in HTML Elements.

Table of Content

Using Font Tag
Using JavaScript
Using SVG tag with fill attribute
Using Text Color Attribute
Using the bgcolor Attribute

Approach 1: Using Font Tag

Use <font> tag to specify the color of text within the tag. In font tags, we have to use color attributes to provide color names or codes.

Syntax

<font color="value">

Example: Illustration ofaddingd color in HTML without CSS Using Font Tag.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Adding color in HTML without CSS</title>
</head>

<body>
    <h3>Using font tag with color attribute</h3>
    <h1>
        <font color="green">Welcome to GeekForGeeks </font>
    </h1>
    <h2>
        <font color="pink">It is an online learning platform</font>
    </h2>
</body>

</html>

Output:

Approach 2: Using JavaScript

Define a JavaScript function called changeColor that is used to change the color of an HTML element with the id "myElement". Here we used <script> tagto add javascript code in HTML.

Syntax

<script>
<!-- javascript body -->
</script>

Example: Illustration of adding color in HTML without CSS Using JavaScript

HTML

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript Example</title>
    <script>
        function changeColor() {
            var element = document.getElementById("myElement");
            element.style.color = "green";
        }
    </script>
</head>

<body onload="changeColor()">
    <h1 id="myElement">Using javascript to change color of this text</h1>
</body>

</html>

Output:

Approach 3: Using SVG tag with fill attribute

SVG tag allows us to create shapes or text in HTML along witha fill attribute which is used to assign the color to that shape or text. In the below example we have created some shapes with different colors.

Syntax

<svg width="value" height="value">
    <tag fill="value">Text or Shape</tag>
</svg>

Example: Illustration ofaddingd color in HTML without CSS using SVG tag with fill attribute.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>SVG Example</title>
</head>

<body>
    <h3>Using SVG</h3>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
    <svg width="100" height="100">
        <rect x="10" y="10" width="80" height="80" fill="blue" />
    </svg>
    <svg width="100" height="100">
        <ellipse cx="50" cy="50" rx="40" ry="20" fill="green" />
    </svg>
    <svg width="100" height="100">
        <polygon points="50,10 90,90 10,90" fill="yellow" />
    </svg>
</body>

</html>

Output:

Approach 4: Using Text Color Attribute

The text attribute in the <body> tag sets the default text color for all text within the body of the HTML document.

Syntax

<body text="value">

Example: Illustration of add color in HTML without CSS using Text Color Attribute

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Text Attribute Example</title>
</head>

<body text="green">
    <h1>Welcome to GeekForGeeks</h1>
    <h3>Adding color in HTML without CSS
          using Text Color Attribute
      </h3>
</body>

</html>

Output:

Approach 5: Using the bgcolor Attribute

The bgcolor attribute is used to setthe background color ofan element or entire page. Use the attribute inside the <body> tag.

Syntax

<body bgcolor="value">

Example: Illustration of adding color in HTML without CSS Using the bgcolor Attribute