HTML Color Codes - Dofactory

HTML Colors HTML Background Images HTML Color Names

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.

Example

#

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"> Try it live

For more details on background colors, see our CSS background-color Reference.

HTML Background Images HTML Color Names

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> Try it live

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> Try it live

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> Try it live

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> Try it live

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> Try it live

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> Try it live

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> Try it live

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> Try it live

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> Try it live

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> Try it live

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%)