Web safe colors are colors that can be displayed without any difference in any web browser. They are primarily categorized in to three. Blue colors and different shades of blue are dominated in the world of web. Green, Red/ Orange shades are other shades of colors. A well built web page all ways use web safe colors.
Why to use web safe colors ?
There may be various types of operating system working environment. There may be different sort of web browsers too. Chrome, Edge, Firefox, Safari, Opera etc are the best examples of different web browsers. The logic behind using web safe color is to provide same color and feel to all users accessing same website on different web browsers. Web developers should make sure to use hexadecimal id of colors. In HTML, a color can be specified using a hexadecimal value.
Example : blue is #0000ff.
Examples of colors and their hexadecimal value.
Example of Blue shades | Hex Value |
#0000AA | |
#0000BB | |
#0000CC | |
#0000FF | |
Example of Green shades | |
#00FF00 | |
#00FF33 | |
#00FF66 | |
#00FF99 | |
Example of Red shades | |
#CC0000 | |
#DD0000 | |
#EE0000 | |
#FF3300 |
Let’s examine how to create an HTML page with background color
<html> <head> <style> html{ background-color: #00FF99; } .button { background-color: #008CBA; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } </style> </head> <body > <h1>My First Web Page.</h1> <p>Welcome to my web world.</p> <button class="button button">Click Here</button> </body> </html>
Copy and save this code as index.html. Double click index.html to open on any web browser to view the page.