🔥Limited Offer: Get 50% OFFon AI & Full Stack Courses🔥
Back to HTML Notes
Topic #13

HTML Colors


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:

HTML supports 140 standard color names.


Background Color

You can set the background color for HTML elements:

Example

  <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem
  ipsum...</p>

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>

Border Color

You can set the color of borders:

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>

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

The following three

elements have their background color set with RGB, HEX, and HSL values:

The following two

elements have their background color set with RGBA and HSLA values, which add 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>

Note: Learn more about Color Values You will learn more about RGB, HEX and HSL in the next chapters.

Want to go beyond the notes?

Join CodingNow 2.0's HTML course — live mentorship, real projects, and 100% placement support.

Enroll Now — Free Demo Available

HTML Colors – FAQs

Quick answers about learning HTML Colors in HTML.

This free note from CodingNow 2.0 explains HTML Colors in HTML — concept, syntax and worked code examples you can copy, run and revise before interviews.
Yes. Every HTML topic on CodingNow 2.0, including HTML Colors, is 100% free with no signup required.
With focused practice, most students grasp HTML Colors in 1–3 days from these notes; pairing it with CodingNow 2.0's mentor-led course takes you to job-ready depth faster.
Use the code examples in this note, then ask doubts for free on the CodingNow 2.0 Community (/community) — expert instructors answer within 24 hours.
WhatsApp
Call NowEnroll Now