Home / HTML / Colors

HTML Colors

What are HTML Colors?

HTML colors are used to add color to text, backgrounds, borders, and other elements in HTML documents. Colors can be specified using color names, RGB values, HEX codes, or HSL values. Colors are typically applied using CSS (Cascading Style Sheets).

Color Methods in HTML

There are several ways to specify colors in HTML:

1. Color Names

HTML supports 140 standard color names. These are predefined color names that browsers recognize:

Example
<p style="color: red;">Red text</p>
<p style="color: blue;">Blue text</p>
<p style="color: green;">Green text</p>
<h1 style="background-color: yellow;">Yellow background</h1>

2. RGB Colors

RGB (Red, Green, Blue) values specify colors using numeric values from 0 to 255 for each color channel:

Example
<p style="color: rgb(255, 0, 0);">Red using RGB</p>
<p style="color: rgb(0, 255, 0);">Green using RGB</p>
<p style="color: rgb(0, 0, 255);">Blue using RGB</p>

See HTML Colors RGB for more details.

3. HEX Colors

HEX (Hexadecimal) colors use a 6-digit code preceded by a hash (#) symbol. Each pair of digits represents red, green, and blue values:

Example
<p style="color: #ff0000;">Red using HEX</p>
<p style="color: #00ff00;">Green using HEX</p>
<p style="color: #0000ff;">Blue using HEX</p>
<p style="color: #4b3190;">Purple using HEX</p>

See HTML Colors HEX for more details.

4. HSL Colors

HSL (Hue, Saturation, Lightness) values specify colors using hue (0-360), saturation (0-100%), and lightness (0-100%):

Example
<p style="color: hsl(0, 100%, 50%);">Red using HSL</p>
<p style="color: hsl(120, 100%, 50%);">Green using HSL</p>
<p style="color: hsl(240, 100%, 50%);">Blue using HSL</p>

See HTML Colors HSL for more details.

Common Color Names

HTML supports 140 standard color names. Here are some common ones:

Color Name HEX Code RGB Example
Red #ff0000 rgb(255, 0, 0) Red Text
Green #008000 rgb(0, 128, 0) Green Text
Blue #0000ff rgb(0, 0, 255) Blue Text
Yellow #ffff00 rgb(255, 255, 0) Yellow Text
Orange #ffa500 rgb(255, 165, 0) Orange Text
Purple #800080 rgb(128, 0, 128) Purple Text
Black #000000 rgb(0, 0, 0) Black Text
White #ffffff rgb(255, 255, 255) White Text

Applying Colors to Elements

Text Color

Use the color property to change text color:

Example
<p style="color: red;">Red text</p>
<p style="color: #4b3190;">Purple text</p>
<p style="color: rgb(0, 128, 0);">Green text</p>

Background Color

Use the background-color property to change background color:

Example
<p style="background-color: yellow;">Yellow background</p>
<p style="background-color: #4b3190; color: white;">Purple background, white text</p>
<div style="background-color: rgb(200, 200, 200); padding: 10px;">Gray background</div>

Border Color

Use the border-color property to change border color:

Example
<p style="border: 2px solid red;">Red border</p>
<p style="border: 3px dashed #4b3190;">Purple dashed border</p>
<div style="border: 1px solid rgb(0, 255, 0); padding: 10px;">Green border</div>

RGBA and HSLA (Transparency)

RGBA and HSLA add an alpha channel for transparency (0.0 = fully transparent, 1.0 = fully opaque):

Example
<p style="background-color: rgba(255, 0, 0, 0.5);">Red with 50% opacity</p>
<p style="background-color: rgba(0, 255, 0, 0.3);">Green with 30% opacity</p>
<div style="background-color: hsla(240, 100%, 50%, 0.7); padding: 10px;">Blue with 70% opacity</div>

Color Resources

For more information about specific color formats, see:

Best Practices

← HTML Paragraphs RGB Colors →