HTML Colors
2 min readSep 23, 2023
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
Color Names
In HTML, a color can be specified by using a color name:
Background Color
You can set the background color for HTML elements:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:hsl(186, 41%, 48%);">This is a heading</h1>
<p style="background-color:hsl(129, 100%, 64%);">This is a paragraph.</p>
</body>
</html>A new webpage opens as shown below:
Text Color
You can also set the color of text:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:hsl(337, 100%, 50%);">This is a heading</h1>
<p style="color:hsl(212, 100%, 50%);">This is a paragraph.</p>
</body>
</html>A new webpage opens with text coloured as shown below:
Border Color
You can set the color of borders:
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>A new webpage opens with coloured borders around the text as shown below:
