Color Formatting

HTML Colors can be defined by Names e.g Purple, Violet, Deeppink etc

HTML Colors can also be defined by RGB (Red, Green and Blue) Value

Besides Names and RGB values, HTML Colors can also be defined by HEX, HSL, RGBA, HSLA values.

Formatting Colors With Names

(Difficulty Level - Intermediate)

Color Names can be used for giving colors to text, background, borders, outlines etc in a document.

HTML 5 supports over 140 Color Names

Text Colors

This is blue text.

This is red text.

This is pink text.

Background Colors

This is white text with green background.

This is white text with tomato background.

This is black text with darksalmon background.

This is white text with slateblue background.

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

 
                      
                      <p
                       style=
                       "color:blue;"
                       >
                      This is blue text. 
                      </p>


                        
                      <p
                       style=
                       "color:red;"
                       >
                      This is red text. 
                      </p>


                      
                      <p
                       style=
                       "color:pink;"
                       >
                      This is pink text. 
                      </p>


                      
                      
                      <p
                       style=
                       "color:white;background-color:green;"
                       >
                      Hello World!. 
                      </p>


                      
                      <p
                       style=
                       "color:white;background-color:tomato;"
                       >
                      This is white text with tomato background.

                      
                      </p>


                      
                      <p
                       style=
                       "color:black;background-color:darksalmon;"
                       >
                      This is black text with darksalmon background. 
                      </p>


                      
                      <p
                       style=
                       "color:white;background-color:slateblue;"
                       >
                      This is white text with slateblue background. 
                      </p>


                      
                      </body>

                       </html>
                  

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

Border Colors

This is burlywood border.

This is cadetblue border.

This is darkturquoise border.

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

                      <h1
                       style=
                       "color:black; border:5px solid forestgreen"
                       >
                      Hello World! with border color of <strong>Forest Green</strong>
                      </h1>

                      <p
                       style=
                       "color:black; border:5px solid deepskyblue"
                       >
                      Hello World! with border color of <strong>Deep Sky Blue</strong>
                      </p>

                      <p
                       style=
                       "color:black; border:5px solid goldenrod"
                       >
                      Hello World! with border color of <strong>Golden Rod </strong>
                      </p>

                      </body>

                       </html>

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

RGB and HEX Colors

Besides the name, a color in HTML 5 can also be specified in RGB value.

RGB stands for (Red, Green, Blue)

Each parameter R, G, and B specifies the amount of color on the scale of 0 to 255.

RGB value of (0, 0, 255) will display only Blue color, because blue is set to its highest value (255)
and the others are set to 0.

If we make RGB as (0, 0, 0), this means that there is no color and absence of color is displayed as black.

It is very easy to guess that white color will be displayed by setting all color's values to maximum
i.e RGB (255, 255, 255).

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

 
                  
                      <p
                       style=
                       "color:rgb(0,0,0);background-color:rgb(0,255,255);"
                       >
                      Text Color : RGB (0,0,0) <br>
                      Background Color : RGB (0,255,255) 
                      </p>


                      
                      <p
                       style=
                       "color:rgb(0,0,0);background-color:rgb(211, 116, 52);"
                       >
                      Text Color : RGB (0,0,0) <br>
                      Background Color : RGB (211,116,52) 
                      </p>


                      
                      <p
                       style=
                       "color:rgb(0,0,0);background-color:rgb(208, 124, 124);"
                       >
                      Text Color : RGB (0,0,0) <br>
                      Background Color : RGB (208,124,124) 
                      </p>


                      
                      
                      </body>

                       </html>
                  

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

HEX Colors

In HTML 5 colors can also defined in Hex (Hexadecimal) values as #RRGGBB

In Hex notation RR means Red Color, GG means Green Color and BB means Blue Color.

Each parameter RR, GG, and BB specifies the amount of color on the scale from 00 to FF (same as 0-255 in RGB).

Hex value of #0000FF will display only Blue color, because blue is set to its highest value (FF)
and the others are set to 00.

If we write #000000 this means that there is no color and absence of color is displayed as black.

Similarly white color will be displayed by setting all color's values to maximum i.e #FFFFFF.

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

 
                  
                      <p
                       style=
                       "color:#000000;background-color:#00ffff;"
                       >
                      Text Color : #000000 <br>
                      Background Color : #00ffff 
                      </p>


                      
                      <p
                       style=
                       "color:#000000;background-color:#d37434;"
                       >
                      Text Color : #000000 <br>
                      Background Color : #d37434 
                      </p>


                      
                      <p
                       style=
                       "color:#000000;background-color:#d07c7c;"
                       >
                      Text Color : #000000 <br>
                      Background Color : #d07c7c 
                      </p>


                      
                      
                      </body>

                       </html>
                  

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

Color Transparency Using RGBA

In HTML 5 we can make colors transparent by using an extra value which is known as Alpha Channel

The RGBA color value is specified with rgba where R means Red Color, G means Green Color, B means Blue Color and A is for alpha which means transparency.

The value of alpha channel is in the range of 0.0 (complete transparent) to 1.0 (completely opaque).

Shades of Green

rgba(0,255,0,.1)

rgba(0,255,0,.2)

rgba(0,255,0,.4)

rgba(0,255,0,0.6)

rgba(0,255,0,0.8)

rgba(0,255,0,1)

Write or copy some HTML into your editor.

                      <!DOCTYPE html>

                      <html>

                      <body>

 
                  
                      
                      <h1>
                      Different Shades of Blue
                      </h1>


                      
                      
                      <p
                       style=
                       "color:black;background-color:rgba(0,0,255,0);"
                       >
                      Text Color : black <br>
                      Background Color : rgba(0,0,255,0) <br>
                      Alpha Channel : 0
                      </p>


                      
                      <p
                       style=
                       "color:black;background-color:rgba(0,0,255,0.25);"
                       >
                      Text Color : black <br>
                      Background Color : rgba(0,0,255,0.25) <br>
                      Alpha Channel : 0.25
                      </p>


                      
                      <p
                       style=
                       "color:black;background-color:rgba(0,0,255,0.5);"
                       >
                      Text Color : black <br>
                      Background Color : rgba(0,0,255,0.5) <br>
                      Alpha Channel : 0.5
                      </p>


                      
                      
                      <p
                       style=
                       "color:white;background-color:rgba(0,0,255,0.75);"
                       >
                      Text Color : white <br>
                      Background Color : rgba(0,0,255,0.75) <br>
                      Alpha Channel : 0.75
                      </p>


                      
                      <p
                       style=
                       "color:white;background-color:rgba(0,0,255,1);"
                       >
                      Text Color : white <br>
                      Background Color : rgba(0,0,255,1) <br>
                      Alpha Channel : 1
                      </p>


                      
                      
                      
                      
                      </body>

                       </html>
                  

View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").

The result will be similar to following figure.

❮ Prev Next ❯