HTML colors are used to define text, background, border, and other property colors.
Color values are specified with HEX, RGB, HSL, RGBA, HSLA, or predefined Color names.
An <input> field with a hex background-color.
<style>
.input-colors {
background-color: #f6f8ff;
padding: 10px;
}
</style>
<input type="text" class="input-colors" placeholder="Your email">
For more details on background colors, see our CSS background-color Reference.
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.
<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 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 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.
<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.
<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 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.
<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.
<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 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.
<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 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.
<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>
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.
<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:
<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 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.
<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 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.
<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>
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.
<style>
.bg-tomato {
background-color: tomato;
padding: 15px;
color: white;
}
</style>
<div class="bg-tomato">
A paragraph with a background color.
</div>
For details on the background-color
, see our CSS background-color property reference.
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>
For details on text color
, see our CSS color property reference.
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.
<style>
.border-red {
border: 2px solid red;
padding: 20px;
}
</style>
<div class="border-red">
A div element with a custom border color.
</div>
For details on the border-color
, see our CSS border-color property reference.
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.
<style>
.underline-red {
text-decoration: underline;
text-decoration-color: red; }
</style>
<div class="underline-red">
Text with a red underline.
</div>
For details on the text-decoration-color
, see our CSS text-decoration-color property reference.