How to Write HTML Color Tag: Find out About Red HEX & Black RGB
Using code, we can apply colors to anything we want: texts, borders, backgrounds, and shadows. In this tutorial, you'll find out how to use HTML color tag and define HTML background color properly.
We will 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
colortag to change the color of your text, or HTML
background-colorto 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:
- 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:
- Add the style attribute to your chosen element:
- Specify the
background-colorproperty for this attribute.
- Then type a colon (
:) and specify the color using a name, RGB or HEX value:
- Define name:
- Define RGB value:
rgb(255, 0, 0);
- Define HEX value:
- Define name:
You can find plenty of color pickers online which will give you the name, RGB and HEX values of the color you choose. All of them work in the same manner.
Ways to Define Color
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!
<h2 style="background-color: mediumvioletred; color: pink;"> I am using a color name to assign a color to this background and text </h2> <h2 style="background-color: steelblue; color: lightcyan;"> I am using a color name to assign a color to this background and text </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.
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:
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:
<h2 style="background-color: rgb(252, 156, 249);"> I am using RGB codes to assign a color to this background </h2> <h2 style="background-color: rgb(255, 236, 139);"> I am using RGB codes to assign a color to this background </h2> <h2 style="background-color: rgb(172, 175, 255);"> I am using RGB codes to assign a color to this background </h2>
HEX color value works pretty similarly to RGB but looks different. For example,
#ff0000 is used to define red HEX value:
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:
<h2 style="background-color: #FC9CF9;"> I am using HEX codes to assign a color to this background </h2> <h2 style="background-color: #FFEC8B;"> I am using HEX codes to assign a color to this background </h2> <h2 style="background-color: #ACAFFF;"> I am using HEX codes to assign a color to this background </h2>
HTML Color Tag: Summary
- You may use HTML
colortag for text color and
background-colortag 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.
- 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.