Code has been added to clipboard!

How to Write HTML Color Tag: Find out About Red HEX & Black RGB

HTML Colors

This tutorial will show you how to use HTML color tag to apply colors to anything: texts, borders, backgrounds, or shadows.

We also cover ways to define a color by using its name, HEX, and RGB values. Those are the core things to learn when you want to start creating colorful styles for your web designs. Giving your website some color is easy - the HTML color tag does most of the work.

HTML Color Tag: Main Tips

  • You may use HTML color tag to change the color of your text, or HTML background-color to change the color of the background.
  • Coloring your website is a part of CSS styling. You can specify colors with a name, RGB or HEX value in HTML:
Powderblue
RGB(176,224,230)
#B0E0E6
  • There are 140 color names supported in CSS, such as Black, White, Red, etc.
  • Digital screens display colors by connecting red, green, and blue light (RGB model). Each parameter of the RGB color value specifies the depth (from 255 to 0) of a specific color in the content in the HTML color tag.
  • RGB values can also be specified in hexadecimal integers between FF and 00. In #RRGGBB, RR digits specify the intensity of red, GG - of green, and BB - of blue. This is called the HEX value.

HTML Color vs. Background Color Tags

If you're back from our HTML Styles tutorial, you probably already know that any style in HTML is defined with CSS functions. HTML color tag is also a CSS property.

There are a couple of properties you can use to define color – HTML background-color and HTML color. As the name suggests, the first one is used to change the color of the background. By using the simple color tag, you will change the color of the text. Make sure not to mix those up, or the beautiful design you had planned might fail completely.

Both HTML background color and color tags can take values defined in names, RGB, and HEX values. The syntax that applies in each case will be reviewed in the following section.

Syntax to Use

We'll now explain how you should include these tags in your code step by step:

  1. Add the style attribute to your chosen element: style=.
  2. Specify the color or background-color property for this attribute.
  3. Type a colon (:) and specify the color using a name, RGB or HEX value:
    • Define name: red;
    • Define RGB value: rgb(255, 0, 0);
    • Define HEX value: #ff0000;

Tip: to get the values of the color you need, use the Pickeristic color picker.

Using the body-bgcolor Attribute

The HTML background-color property provides a color for the background of the text, but you might need to color the background for the whole document. In that case, you may use the body-bgcolor attribute:

Example
<body bgcolor="#def28d">

<h2 style="color: #731768;">
 I am using HEX codes to assign colors to this text and to the whole document
</h2>

Note: the body-bgcolor attribute does not support RGB values. Use either a color name or a HEX value.

Ways to Define Color

Name

The color name depicts the specific name for the HTML color tag. As you know, CSS supports 140 color names, and you can use any of them for your elements.

For example, we are using tomato as a color name to assign a color to this background!

Example

<h2 style="color: pink;">
I am using a color name to assign a color to this text
</h2>

<h2 style="background-color: steelblue;">
I am using a color name to assign a color to this background
</h2>

<h2 style="background-color: brown; color: bisque;">
I am using a color name to assign a color to this background and text
</h2>

Note: if you want to use a color with an alpha channel, you should use RGB instead of a color name.

RGB value

The RGB value defines HTML color tag's content color by mixing red, green and blue values. For example, rgb(0, 0, 0) is used to define black RGB value:

RGB(0,0,0)

The first number describes the red color input, the second - the green color input, and the third one - the blue color input. The value of each color can vary from 0 to 255. See the examples below:

Example
<h2 style="color: rgb(252, 156, 249);">
I am using RGB codes to assign a color to this text
</h2>

<h2 style="background-color: rgb(255, 236, 139);">
I am using RGB codes to assign a color to this background
</h2>

<h2 style="color: rgb(255, 236, 139); background-color: rgb(143, 188, 143);">
I am using RGB codes to assign a color to this background and text
</h2>

HEX value

HEX color value works pretty similarly to RGB but looks different. For example, #ff0000 is used to define red HEX value:

#ff0000

When you define HEX, the code contains both numbers from 0 to 9 and letters from A to F to define the intensity of the color. The first two symbols determine red intensity, the two in the middle - green intensity, and the last two - blue intensity:

Example

<h2 style="color: #FC9CF9;">
I am using HEX codes to assign a color to this text
</h2>

<h2 style="background-color: #FFEC8B;">
I am using HEX codes to assign a color to this background
</h2>

<h2 style="color: #B0E0E6; background-color: #ACAFFF;">
I am using HEX codes to assign a color to this background and text
</h2>

HTML Color Tag: Summary

  • You may use HTML color tag for text color, and background-color tag for the background color. You can read more on them in our HTML styles tutorial.
  • In HTML, you specify colors using color names, HEX values, and RGB values.
DarkSeaGreen
#8FBC8F
RGB(143,188,143)
  • Most modern screens use RGB color model (connects red, green, and blue to display colors). Each value of RGB parameters (red, green, blue) can be from 0 to 255. The number specifies the depth of the color content.
  • HEX color values are similar to RGB values. In #RRGGBB , RR digits stand for red, GG for green, and BB for blue tones.