HTML Colors
Color on the web is usually controlled with CSS, but HTML lessons introduce names and hex values so you understand what CSS later manipulates.
Why this matters on Global Tuts
Color choices affect readability, brand identity and accessibility — contrast matters for every learner and every device.
Common beginner mistakes
- Low contrast text on colored backgrounds
- Using only color to convey meaning
- Hard-coding random hex values without a palette
Color Names
In HTML, a color can be specified by using a color name:
HTML supports 140 standard color names.
Background Color
You can set the background color for HTML elements:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>
Try it Yourself »
Text Color
You can set the color of text:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello
World</h1>
<p style="color:DodgerBlue;">Lorem
ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi
enim...</p>
Try it Yourself »
Border Color
You can set the color of borders:
Hello World
Hello World
Hello World
Example
<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>
Try it Yourself »
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
The following three <div> elements have their background color set with RGB, HEX, and HSL values:
The following two <div> elements have their background color set with RGBA and HSLA values, which adds an Alpha channel to the color (here we have 50% transparency):
Example
<h1 style="background-color:rgb(255,
99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9,
100%, 64%);">...</h1>
<h1 style="background-color:rgba(255,
99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9,
100%, 64%, 0.5);">...</h1>
Try it Yourself »