TL;DR – HTML colors can be defined in a name, RGB, RGBA, HEX, HSL or HSLA value and applied to either the background or the text.
Contents
Defining HTML Colors
There is no special HTML color tag, as design is not the main function of HTML. Coloring your website is a part of CSS inline styling. This means you need to use the style attribute in the opening tag you wish to add HTML color to.
You may use the color property to change the color of your text, or background-color to change the color of the background. Both of these properties take color names, RGB, RGBA, HEX, HSL or HSLA values.
HTML Color: Text or Background
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 property, you will change the color of the text.
Both HTML background color and color properties can take values defined in names, RGB, RGBA, HEX, HSL or HSLA values.
It's important to note that the background-color property provides a color for the background of the text, but not for the whole document. If you wish to change the HTML color for the whole page, you should use the bgcolor attribute in the opening tag of the <body> section:
<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: added in the <body> section, the 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. There are 140 color names supported in CSS, and you can use any of them for your elements. For example, you can simply use red to define HTML red:
<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>RGB and RGBA Values
The RGB value defines HTML color by mixing red, green, and blue values. 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. For example, to get the same HTML red you saw in previous section, we would have to use RGB(255,0,17):
<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>
While RGBA values are very similar, they have one more value in the mix. The additional fourth value A stands for alpha and represents the opacity. It can be defined in a number from 0 (not transparent) to 1 (completely transparent):
<h2 style="color: rgba(252, 156, 249, 0.25);">
RGBA values let you set custom opacity - compare these two lines
</h2>
<h2 style="color: rgba(252, 156, 249, 0.75);">
RGBA values let you set custom opacity - compare these two lines
</h2>HEX Value
HEX color value works pretty similarly to RGB but looks different. When you define HEX, the code contains both numbers from 0 to 9 and letters from A to F to describe 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.
For example, to get a simple HTML blue, we would use the code #0000fe:
<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>HSL and HSLA Values
In HTML, colors can also be defined in HSL values. HSL stands for hue, saturation and lightness:
- Hue is defined in degrees from 0 to 360. On a color wheel, red is around 0/360, green is at 120 and blue is at 240.
- Saturation is defined in percentages from 0 (black and white) to 100 (full color).
- Lightness is defined in percentages from 0 (black) to 100 (white).
For example, to color the background in HTML blue, you could use hsl(240, 100%, 50%):
<h2 style="color: hsl(217, 97%, 57%);">
I am using HSL codes to assign a color to this text
</h2>
<h2 style="background-color: hsl(218, 77%, 88%);">
I am using HSL codes to assign a color to this background
</h2>
<h2 style="color: hsl(38, 95%, 25%); background-color: hsl(38, 77%, 88%);">
I am using HSL codes to assign a color to this background and text
</h2>Just like in RGBA, the fourth value A in HSLA values stands for alpha and represents the opacity which defined in a number from 0 to 1:
<h2 style="color: hsla(128, 95%, 25%, 0.25);">
HSLA values let you set custom opacity - compare these two lines
</h2>
<h2 style="color: hsla(128, 95%, 25%, 0.75);">
HSLA values let you set custom opacity - compare these two lines
</h2>HTML Color: Useful Tips
- Using a simple color picker will help you get the exact RGB or HEX values of the HTML color you need.
- Have some fun guessing color names in a simple game: some of them might not be as intuitive as you think.