HTML Colors

HTML Colors are an important aspect of web design, and HTML provides various ways to specify colors.

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.

Here are some ways to use colors in HTML:

Color Names

Here is 216 cross-browser color palette used for creating pages of websites.

Hex Value	Color	RGB Value
#000000		rgb(0,0,0)
#FFFFFF		rgb(255,255,255)
#FF0000		rgb(255,0,0)
#00FFFF		rgb(0,255,255)
#0000FF		rgb(0,0,255)
#C0C0C0		rgb(192,192,192)
#FF00FF		rgb(255,0,255)

Hex Value	Color	RGB Value
#000000		rgb(0,0,0)
#080000		rgb(8,0,0)
#100000		rgb(16,0,0)
#180000		rgb(24,0,0)
#200000		rgb(32,0,0)
#280000		rgb(40,0,0)
#300000		rgb(48,0,0)
#380000		rgb(56,0,0)
#400000		rgb(64,0,0)
#480000		rgb(72,0,0)
#500000		rgb(80,0,0)
#580000		rgb(88,0,0)
#600000		rgb(96,0,0)
#680000		rgb(104,0,0)
#700000		rgb(112,0,0)
#780000		rgb(120,0,0)
#800000		rgb(128,0,0)
#880000		rgb(136,0,0)
#900000		rgb(144,0,0)
#980000		rgb(152,0,0)
#A00000		rgb(160,0,0)
#A80000		rgb(168,0,0)
#B00000		rgb(176,0,0)
#B80000		rgb(184,0,0)
#C00000		rgb(192,0,0)
#C80000		rgb(200,0,0)
#D00000		rgb(208,0,0)
#D80000		rgb(216,0,0)
#E00000		rgb(224,0,0)
#E80000		rgb(232,0,0)
#F00000		rgb(240,0,0)
#F80000		rgb(248,0,0)
#FF0000		rgb(255,0,0)

Hex Value	Color	RGB Value
#000000		rgb(0,0,0)
#080808		rgb(8,8,8)
#101010		rgb(16,16,16)
#181818		rgb(24,24,24)
#202020		rgb(32,32,32)
#282828		rgb(40,40,40)
#303030		rgb(48,48,48)
#383838		rgb(56,56,56)
#404040		rgb(64,64,64)
#484848		rgb(72,72,72)
#505050		rgb(80,80,80)
#585858		rgb(88,88,88)
#606060		rgb(96,96,96)
#686868		rgb(104,104,104)
#707070		rgb(112,112,112)
#787878&		rgb(120,120,120)
#808080		rgb(128,128,128)
#888888		rgb(136,136,136)
#909090		rgb(144,144,144)
#989898		rgb(152,152,152)
#A0A0A0		rgb(160,160,160)
#A8A8A8		rgb(168,168,168)
#B0B0B0		rgb(176,176,176)
#B8B8B8		rgb(184,184,184)
#C0C0C0		rgb(192,192,192)
#C8C8C8		rgb(200,200,200)
#D0D0D0		rgb(208,208,208)
#D8D8D8		rgb(216,216,216)
#E0E0E0		rgb(224,224,224)
#E8E8E8		rgb(232,232,232)
#F0F0F0		rgb(240,240,240)
#F8F8F8		rgb(248,248,248)
#FFFFFF		rgb(255,255,255)

Web-color
#000000	#000033	#000066	#000099	#0000CC	#0000FF
#003300	#003333	#003366	#003399	#0033CC	#0033FF
#006600	#006633	#006666	#006699	#0066CC	#0066FF
#009900	#009933	#009966	#009999	#0099CC	#0099FF
#00CC00	#00CC33	#00CC66	#00CC99	#00CCCC	#00CCFF
#00FF00	#00FF33	#00FF66	#00FF99	#00FFCC	#00FFFF
#330000	#330033	#330066	#330099	#3300CC	#3300FF
#333300	#333333	#333366	#333399	#3333CC	#3333FF
#336600	#336633	#336666	#336699	#3366CC	#3366FF
#339900	#339933	#339966	#339999	#3399CC	#3399FF
#33CC00	#33CC33	#33CC66	#33CC99	#33CCCC	#33CCFF
#33FF00	#33FF33	#33FF66	#33FF99	#33FFCC	#33FFFF
#660000	#660033	#660066	#660099	#6600CC	#6600FF
#663300	#663333	#663366	#663399	#6633CC	#6633FF
#666600	#666633	#666666	#666699	#6666CC	#6666FF
#669900	#669933	#669966	#669999	#6699CC	#6699FF
#66CC00	#66CC33	#66CC66	#66CC99	#66CCCC	#66CCFF
#66FF00	#66FF33	#66FF66	#66FF99	#66FFCC	#66FFFF
#990000	#990033	#990066	#990099	#9900CC	#9900FF
#993300	#993333	#993366	#993399	#9933CC	#9933FF
#996600	#996633	#996666	#996699	#9966CC	#9966FF
#999900	#999933	#999966	#999999	#9999CC	#9999FF
#99CC00	#99CC33	v99CC66	#99CC99	#99CCCC	#99CCFF
#99FF00	#99FF33	#99FF66	v99FF99	#99FFCC	#99FFFF
#CC0000	#CC0033	#CC0066	#CC0099	#CC00CC	#CC00FF
#CC3300	#CC3333	#CC3366	#CC3399	#CC33CC	#CC33FF
#CC6600	#CC6633	#CC6666	#CC6699	#CC66CC	#CC66FF
#CC9900	#CC9933	#CC9966	#CC9999	#CC99CC	#CC99FF
#CCCC00	#CCCC33	#CCCC66	#CCCC99	#CCCCCC	#CCCCFF
#CCFF00	#CCFF33	#CCFF66	#CCFF99	#CCFFCC	#CCFFFF
#FF0000	#FF0033	#FF0066	#FF0099	#FF00CC	#FF00FF
#FF3300	#FF3333	#FF3366	#FF3399	#FF33CC	#FF33FF
#FF6600	#FF6633	#FF6666	#FF6699	#FF66CC	#FF66FF
#FF9900	#FF9933	#FF9966	#FF9999	#FF99CC	#FF99FF
#FFCC00	#FFCC33	#FFCC66	#FFCC99	#FFCCCC	#FFCCFF
#FFFF00	#FFFF33	#FFFF66	#FFFF99	#FFFFCC	#FFFFFF

Background Color

This style is used to specify the background color of an element. You can use either a color name, a hexadecimal color code, or an RGB value to set the background color. Here's an example:

Example

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Background Color</p>
        <h1 style="background-color: green;">This is a heading with a green background color.</h1>
        <p style="background-color: purple;">This is a Paragraph with a purple background color.</p>
      </body>
  </html>

Try it Yourself »

Text-color:

This style is used to specify the color of the text within an element. You can use either a color name, a hexadecimal color code, or an RGB value to set the text color. Here's an example:

Example

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Text Color</p>
        <h1 style="color: blue;">This is some blue heading text.</h1>
        <p style="color: yello;">This is a Paragraph with a yellow color.</p>
      </body>
  </html>

Try it Yourself »

Border color:

This style This style is used to specify the color of an element's border. You can use either a color name, a hexadecimal color code, or an RGB value to set the border color. Here's an example:

Example

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Border-color</p>
        <div style="border: 1px solid red;">This is a div with a red border.</div>
        <div style="border: 1px solid green;">This is a div with a green border.</div>
        <div style="border: 1px solid tomato;">This is a div with a tomato border.</div>
      </body>
  </html>

Try it Yourself »

Colors name:

HTML has a set of predefined color names you can use. Here are a few:

Example

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Few Color Names</p>
        <p style="color: yellow ">This is some yellow text.</p>
        <p style="color: orange ">This is some orange text.</p>
        <p style="color: green ">This is some green text.</p>
        <p style="color: purple ">This is some purple text.</p>
        <p style="color: tomato ">This is some tomato text.</p>
        <p style="color: gray ">This is some gray text.</p>
      </body>
  </html>

Try it Yourself »

Hexadecimal color code

A hexadecimal color code is a six-digit code that represents a color. The first two digits represent the amount of red in the color, the next two digits represent the amount of green, and the final two digits represent the amount of blue.

Example

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Hexadecimal color code</p>
        <div style="background-color: #00FFFF;">This is a div with a #00FFFF background color.</div>
        <div style="background-color: #FF5733;">This is a div with a #FF5733 background color.</div>
        <div style="background-color: #4DAA1B;">This is a div with a #4DAA1B background color.</div>
      </body>
  </html>

Try it Yourself »

RGB value:

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>RGB value</p>
        <div style="color: rgb(255, 0, 0);">This is some red text.</div>
        <div style="color: rgb(0, 255, 0);">This is some green text.</div>
        <div style="color: rgb(0, 0, 255);">This is some blue text.</div>
      </body>
  </html>

Try it Yourself »

Opacity:

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>Opacity</p>
        <div style="background-color: red; opacity: 0.5;">This is a div with a partially transparent red background.</div>
        <div style="background-color: green; opacity: 0.5;">This is a div with a partially transparent green background.</div>
        <div style="background-color: blue; opacity: 0.5;">This is a div with a partially transparent blue background.</div>
      </body>
  </html>

Try it Yourself »

CSS Gradients:

A CSS gradient is a transition between two or more colors. You can specify a linear or radial gradient using CSS. Here's an example of a linear gradient:

<!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Title of the Document</title>
      </head>
      <body>
        <p>CSS Gradients</p>
        <div style="background: linear-gradient(to bottom right, #00FFFF, #FF00FF);">This is a div with a linear gradient background.</div>
      </body>
  </html>

Try it Yourself »

Note: These are some ways to use colors in HTML. By using different color schemes and combinations, you can make your web pages more visually appealing and engaging.

Colors are one of the most important while designing website we will talk more on color at CSS section, now lets learn about CSS in the next chapter.