HTML Colors

HTML colors are used to define text, background, border, and other property colors. Color values are specified with predefined Color names, HEX, RGB, HSL, RGBA, or HSLA.

HTML Tutorial

Example

#

A hex background-color applied to an <input> field.

<style>
.input-colors {
  background-color: #f6f8ff;
  padding: 10px;
}
</style>

<input type="text" class="input-colors" placeholder="Your email">

Color Names

One way to assign HTML colors is to use Color Names (White, Purple, Turquoise, etc.).

Not all colors have a corresponding color name.

For a list of color names, check our HTML Colors Names Tutorial.

Different color names applied to each element.

Firebrick
Chocolate
Orangered
Darkkhaki
Seagreen
Teal

<div class="row" style="line-height:80px;color:white;">
    <div class="col-md-4 text-center">
        <div style="background-color:firebrick;">Firebrick</div>
    </div>
    <div class="col-md-4 text-center">
        <div style="background-color:chocolate;">Chocolate</div>
    </div>
    <div class="col-md-4 text-center">
        <div style="background-color:orangered;">Orangered</div>
    </div>
</div>
<div class="row" style="line-height:80px;color:white; margin-top: 30px;">
  <div class="col-md-4 text-center">
    <div style="background-color:darkkhaki;">Darkkhaki</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color:seagreen;">Seagreen</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color:teal;">Teal</div>
  </div>
</div>

Color Values

Color values can also be expressed as RGB, HEX, and HSL.

Four different color formats setting the same background color.

Name: Tomato

RGB: rgb(255, 99, 71)

HEX: #ff6347

HSL: hsl(9.13, 100%, 63.92%)

<style>
  .myp { color: #fff; padding: 10px; }
</style>

<p class="myp" style="background-color: tomato;">Name: Tomato</p>
<p class="myp" style="background-color: rgb(255, 99, 71);">RGB: rgb(255, 99, 71)</p>
<p class="myp" style="background-color: #ff6347;">HEX: #ff6347</p>
<p class="myp" style="background-color: hsl(9.13, 100%, 63.92%); ">HSL: hsl(9.13, 100%, 63.92%)</p>

Two additional formats that add transparency are RGBA and HSLA.
This example adds 70% transparency to the background rgb and hsl values.

RGBA: rgb(255, 99, 71 ,0.5)

HSLA: hsl(9.13, 100%, 63.92%, 0.5)

<style>
  .myp { color: #fff; padding: 10px; }
</style>

<p class="myp" style="background-color: rgb(255, 99, 71 ,0.7);">RGBA: rgb(255, 99, 71 ,0.5)</p>
<p class="myp" style="background-color: hsl(9.13, 100%, 63.92%, 0.7);">HSLA: hsl(9.13, 100%, 63.92%, 0.5)</p>

RGB Values

RGB stands for red, green, and blue.

RBG color values are expressed in this format: rgb(red, green, blue).

Each parameter (red, green, and blue) value defines the color intensity between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the other parameters are set to 0.

Different RGB values applied to each element.

rgb(178, 34, 34)
rgb(210, 105, 30)
rgb(255, 69, 0)
rgb(189, 183, 107)
rgb(46, 139, 87)
rgb(0, 128, 128)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(178, 34, 34);">rgb(178, 34, 34)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(210, 105, 30);">rgb(210, 105, 30)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(255, 69, 0);">rgb(255, 69, 0)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white; margin-top: 30px;">
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(189, 183, 107);">rgb(189, 183, 107)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(46, 139, 87);">rgb(46, 139, 87)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: rgb(0, 128, 128);">rgb(0, 128, 128)</div>
  </div>
</div>

With RGB, shades of gray are defined with equal values for each of the 3 parameters, like so.

rgb(0, 0, 0)
rgb(60, 60, 60)
rgb(180, 180, 180)
rgb(180, 180, 180)
rgb(240, 240, 240)
rgb(255, 255, 255)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(0, 0, 0) ;">rgb(0, 0, 0)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(60, 60, 60) ;">rgb(60, 60, 60)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(120, 120, 120) ;">rgb(180, 180, 180)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(180, 180, 180) ;">rgb(180, 180, 180)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(240, 240, 240) ; color: #000">rgb(240, 240, 240)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgb(255, 255, 255) ; color: #000">rgb(255, 255, 255)</div>
  </div>
</div>

HEX Values

HEX stands for hexadecimal.

HEX color values are specified in this format: #rrggbb.

Each parameter rr (red), gg (green), and bb(blue) are hexadecimal values between 00 (0) and ff (255).

For example, #ff0000 is displayed as red, because red is set to its highest value ff (255) and the others are set to 00 (0).

Different HEX values applied to each element.

#b22222
#d2691e
#ff4500
#bdb76b
#2e8b57
#008080
<div class="row" style="line-height:80px;color:white;">
  <div class="col-md-4 text-center">
    <div style="background-color: #b22222;">#b22222</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: #d2691e;">#d2691e</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: #ff4500;">#ff4500</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white; margin-top: 30px;">
  <div class="col-md-4 text-center">
    <div style="background-color: #bdb76b;">#bdb76b</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: #2e8b57;">#2e8b57</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: #008080;">#008080</div>
  </div>
</div>

With HEX, shades of gray are defined using equal values for each of the 3 light sources, like so.

#000000
#3c3c3c
#787878
#b4b4b4
#f0f0f0
#ffffff
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:#000000 ;">#000000</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:#3c3c3c ;">#3c3c3c</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:#787878 ;">#787878</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:#b4b4b4 ;">#b4b4b4</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:#f0f0f0 ; color: #000">#f0f0f0</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:#ffffff ; color: #000">#ffffff</div>
  </div>
</div>

HSL Values

HSL stands for hue, saturation, and lightness (HSL).

HSL color values are specified as hsl(hue, saturation, lightness).

Hue is a 0-360 degree on the color wheel: 0 is red, 120 is green, 240 is blue.

Saturation is a % value: 0% is no color (i.e. gray), and 100% is full color.

Lightness is also a % value: 0% is black, 100% is white.

Different HSL values applied to each element.

hsl(0, 68%, 42%)
hsl(25, 75%, 47%)
hsl(16, 100%, 50%)
hsl(56, 38%, 58%)
hsl(146, 50%, 36%)
hsl(180, 100%, 25%)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(0, 68%, 42%);">hsl(0, 68%, 42%)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(25, 75%, 47%)">hsl(25, 75%, 47%)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(16, 100%, 50%);">hsl(16, 100%, 50%)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white; margin-top: 30px;">
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(56, 38%, 58%);">hsl(56, 38%, 58%)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(146, 50%, 36%);">hsl(146, 50%, 36%)</div>
  </div>
  <div class="col-md-4 text-center">
    <div style="background-color: hsl(180, 100%, 25%);">hsl(180, 100%, 25%)</div>
  </div>
</div>

Saturation in HSL

#

Saturation represents the color intensity.

100% displays pure color, no shades of gray

50% is 50% gray, but you can still see the color.

0% is completely gray and you can no longer see the color.

Different HSL saturation levels applied to each element.

hsl(7, 100%, 50%)
hsl(7, 80%, 50%)
hsl(7, 60%, 50%)
hsl(7, 40%, 50%)
hsl(7, 20%, 50%)
hsl(7, 0%, 50%)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 100%, 62%) ;">hsl(7, 100%, 50%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 80%, 50%) ;">hsl(7, 80%, 50%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 60%, 50%) ;">hsl(7, 60%, 50%)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 40%, 50%) ;">hsl(7, 40%, 50%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 20%, 50%) ;">hsl(7, 20%, 50%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 0%, 50%) ;">hsl(7, 0%, 50%)</div>
  </div>
</div>

Lightness in HSL

#

The color lightness describes the amount of light the color will use.

0% means no light (black).

50% means medium lightness (neither dark nor light).

100% means full lightness (white).

Different HSL lightness levels applied to each element.

hsl(7, 89%, 0%)
hsl(7, 89%, 25%)
hsl(7, 89%, 50%)
hsl(7, 89%, 75%)
hsl(7, 89%, 90%)
hsl(7, 89%, 100%)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 0%) ;">hsl(7, 89%, 0%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 25%) ;">hsl(7, 89%, 25%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 50%) ;">hsl(7, 89%, 50%)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 75%) ;">hsl(7, 89%, 75%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 90%) ; color: black">hsl(7, 89%, 90%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(7, 89%, 100%) ; color: black">hsl(7, 89%, 100%)</div>
  </div>
</div>

Shades of gray are often defined in HSL by setting the hue and saturation to 0, and adjusting the lightness from 0% to 100% to get darker/lighter shades:

hsl(0, 0%, 0%)
hsl(0, 0%, 24%)
hsl(0, 0%, 47%)
hsl(0, 0%, 71%)
hsl(0, 0%, 94%)
hsl(0, 0%, 100%)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 0%) ;">hsl(0, 0%, 0%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 24%) ;">hsl(0, 0%, 24%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 47%) ;">hsl(0, 0%, 47%)</div>
  </div>
</div>
<div class="row" style=line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 94%) ; color: #000">hsl(0, 0%, 94%)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsl(0, 0%, 100%) ; color: #000">hsl(0, 0%, 100%)</div>
  </div>
</div>

RGBA Values

RGBA color values are an extension of RGB color values with an alpha channel.

An RGBA color value is specified with rgba(red, green, blue, alpha).

The alpha channel specifies the opacity or transparency of the color.

Alpha is a number between 0.0 (fully transparent) and 1.0 (opaque).

Different RGBA values applied to each element.

rgba(244, 93, 72, 0)
rgba(244, 93, 72, 0.2)
rgba(244, 93, 72, 0.4)
rgba(244, 93, 72, 0.6)
rgba(244, 93, 72, 0.8)
rgba(244, 93, 72, 1)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0) ;color: #000">rgba(244, 93, 72, 0)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0.2) ;color: #000">rgba(244, 93, 72, 0.2)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0.4) ;">rgba(244, 93, 72, 0.4)</div>
  </div>
</div>
<div class="row " style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0.6) ;">rgba(244, 93, 72, 0.6)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 0.8) ;">rgba(244, 93, 72, 0.8)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:rgba(244, 93, 72, 1) ;">rgba(244, 93, 72, 1)</div>
  </div>
</div>

HSLA Values

HSLA color values are an extension of HSL color values with an alpha channel.

An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha).

The alpha channel specifies the opacity or transparency of the color.

Alpha is a number between 0.0 (fully transparent) and 1.0 (opaque).

Different HSLA values applied to each element.

hsla(7, 89%, 62%,0)
hsla(7, 89%, 62%,0.2)
hsla(7, 89%, 62%,0.4)
hsla(7, 89%, 62%,0.6)
hsla(7, 89%, 62%,0.8)
hsla(7, 89%, 62%,1)
<div class="row" style="line-height:80px;color:white;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0) ;color: #000">hsla(7, 89%, 62%,0)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0.2) ;color: #000">hsla(7, 89%, 62%,0.2)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0.4) ;">hsla(7, 89%, 62%,0.4)</div>
  </div>
</div>
<div class="row" style="line-height:80px;color:white;margin-top:30px;">
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0.6) ;">hsla(7, 89%, 62%,0.6)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 0.8) ;">hsla(7, 89%, 62%,0.8)</div>
  </div>
  <div class="col-lg-4 text-center">
    <div style="background-color:hsla(7, 89%, 62%, 1) ;">hsla(7, 89%, 62%,1)</div>
  </div>
</div>

Background Color

HTML Colors can be used to change an element's background color.
Use the background or background-color property to specify the color.

A paragraph with a background color applied to it.

A paragraph with a background color.
<style>
.bg-tomato {
  background-color: tomato;
  padding: 15px;
  color: white;
}
</style>

<div class="bg-tomato">
  A paragraph with a background color.
</div>

Text Color

HTML Colors can also be used to change the text color.
Using the color property, a text color can be assigned.

A paragraph with custom text color.

A paragraph with a text color.

<p style="color: red;">A paragraph with a text color.</p>

Border Color

Border colors can also be assigned with HTML colors.
Use the border or border-color property to assign a border color.

This example displays a custom border color.

A div element with a custom border color.
<style>
.border-red {
  border: 2px solid red;
  padding: 20px;
}
</style>

<div class="border-red">
  A div element with a custom border color.
</div>

Did you know?

Did you know?

Customizing the text underline color

By default, the underline is the same as the text color.

Using the text-decoration-color, a custom underline color can be assigned.

Text with a customized red underline.

Text with a red underline.
<style>
 .underline-red { 
   text-decoration: underline; 
   text-decoration-color: red; }
</style>

<div class="underline-red">
  Text with a red underline.
</div>

You may also like

Guides