HTML Course

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:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Background Color

You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti optio asperiores nobis incidunt, aut natus, nemo dolore exercitationem beatae facilis sed doloremque nam officiis ipsum laudantium dignissimos dolorem ex eum!

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

Hello World

Hello World

Example

<h1 style="border:2px solid Tomato;">Hello World </h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</p>
<h1 style="border:2px solid Violet;">Hello World</p>

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:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

The following two <div> elements have their background color set with RGBA and HSLA values, which add an Alpha channel to the color (here we have 50% transparency):

rgb(255, 99, 71,0.5)

hsla(9, 100%, 64%, 0.5)

Example

<h1 style="background-color:rgb(255, 99, 71);"> ... </h1>
<h1 style="background-color:#ff6347;">...</p>
<h1 style="background-color:hsl(9, 100%, 64%);">...</p>

<h1 style="background-color:rgba(255, 99, 71, 0.5);>...</p>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</p>

Try It Your Self

Sign Up For New
Update

HTML Basic
  1. HTML Basic
  2. HTML Element
  3. HTML Attributes
  4. HTML Headings
  5. HTML Paragrapha
  6. HTML Tables
  7. HTML Lists
HTML Advance
  1. HTML Div
  2. HTML Classes
  3. HTML Id
  4. HTML Buttons
  5. HTML Iframes
  6. HTML Symbols
  7. HTML Emojis