What are the browser safe colors in CSS ?
Last Updated :
20 Aug, 2024
In this article, we will learn about browser-safe colors. These are 216 colors out of the general 256 colors that will display a solid, non-dithered, and consistent on all monitors.
Browser-safe colors contain RGB 0, 51, 102, 153, 204 and 205. While looking at these numbers you must be wondering are these numbers just random values? No, these numbers are the multiple of 51 because 51 is 20% of 255.
When Should You Use Browser-safe Colors?
We are living in the 21st century and there are billions of users with millions of computer platforms. As a developer, we need to make sure that on all computer platforms, the color should be the same. We don't need that if we use other devices then the color of the site will change. So it is highly recommended to use browser-safe color.
Browser-safe colors chart:
Example 1: In the below code, we will see the Browser-safe color that will not change when we change the browser.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
display: flex;
align-items: center;
display: inline-block;
border: 2px solid black;
height: 40px;
width: 100px;
margin: 2px;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div style="background-color:#FFFFFF">#FFFFFF</div>
<div style="background-color:#FFFFCC">#FFFFCC</div>
<div style="background-color:#FFFF99">#FFFF99</div>
<div style="background-color:#FFFF66">#FFFF66</div>
<div style="background-color:#FFFF33">#FFFF33</div>
<div style="background-color:#FFFF00">#FFFF00</div>
<div style="background-color:#FFCCFF">#FFCCFF</div>
<div style="background-color:#FFCCCC">#FFCCCC</div>
<div style="background-color:#FFCC99">#FFCC99</div>
<div style="background-color:#FFCC66">#FFCC66</div>
<div style="background-color:#FFCC33">#FFCC33</div>
<div style="background-color:#FFCC00">#FFCC00</div>
<div style="background-color:#FF99FF">#FF99FF</div>
<div style="background-color:#FF99CC">#FF99CC</div>
<div style="background-color:#FF9999">#FF9999</div>
<div style="background-color:#FF9966">#FF9966</div>
<div style="background-color:#FF9933">#FF9933</div>
<div style="background-color:#FF9900">#FF9900</div>
<div style="background-color:#FF66FF">#FF66FF</div>
<div style="background-color:#FF66CC">#FF66CC</div>
<div style="background-color:#FF6699">#FF6699</div>
<div style="background-color:#FF6666">#FF6666</div>
<div style="background-color:#FF6633">#FF6633</div>
<div style="background-color:#FF6600">#FF6600</div>
<div style="background-color:#FF33FF">#FF33FF</div>
<div style="background-color:#FF33CC">#FF33CC</div>
<div style="background-color:#FF3399">#FF3399</div>
<div style="background-color:#FF3366">#FF3366</div>
<div style="background-color:#FF3333">#FF3333</div>
<div style="background-color:#FF3300">#FF3300</div>
<div style="background-color:#FF00FF">#FF00FF</div>
<div style="background-color:#FF00CC">#FF00CC</div>
<div style="background-color:#FF0099">#FF0099</div>
<div style="background-color:#FF0066">#FF0066</div>
<div style="background-color:#FF0033">#FF0033</div>
<div style="background-color:#FF0000">#FF0000</div>
<div style="background-color:#CCFFFF">#CCFFFF</div>
<div style="background-color:#CCFFCC">#CCFFCC</div>
<div style="background-color:#CCFF99">#CCFF99</div>
<div style="background-color:#CCFF66">#CCFF66</div>
<div style="background-color:#CCFF33">#CCFF33</div>
<div style="background-color:#CCFF00">#CCFF00</div>
<div style="background-color:#CCCCFF">#CCCCFF</div>
<div style="background-color:#CCCCCC">#CCCCCC</div>
<div style="background-color:#CCCC99">#CCCC99</div>
<div style="background-color:#CCCC66">#CCCC66</div>
<div style="background-color:#CCCC33">#CCCC33</div>
<div style="background-color:#CCCC00">#CCCC00</div>
<div style="background-color:#CC99FF">#CC99FF</div>
<div style="background-color:#CC99CC">#CC99CC</div>
<div style="background-color:#CC9999">#CC9999</div>
<div style="background-color:#CC9966">#CC9966</div>
<div style="background-color:#CC9933">#CC9933</div>
<div style="background-color:#CC9900">#CC9900</div>
<div style="background-color:#CC66FF">#CC66FF</div>
<div style="background-color:#CC66CC">#CC66CC</div>
<div style="background-color:#CC6699">#CC6699</div>
<div style="background-color:#CC6666">#CC6666</div>
<div style="background-color:#CC6633">#CC6633</div>
<div style="background-color:#CC6600">#CC6600</div>
<div style="background-color:#CC33FF">#CC33FF</div>
<div style="background-color:#CC33CC">#CC33CC</div>
<div style="background-color:#CC3399">#CC3399</div>
<div style="background-color:#CC3366">#CC3366</div>
<div style="background-color:#CC3333">#CC3333</div>
<div style="background-color:#CC3300">#CC3300</div>
<div style="background-color:#CC00FF">#CC00FF</div>
<div style="background-color:#CC00CC">#CC00CC</div>
<div style="background-color:#CC0099">#CC0099</div>
<div style="background-color:#CC0066">#CC0066</div>
<div style="background-color:#CC0033">#CC0033</div>
<div style="background-color:#CC0000">#CC0000</div>
<div style="background-color:#99FFFF">#99FFFF</div>
<div style="background-color:#99FFCC">#99FFCC</div>
<div style="background-color:#99FF99">#99FF99</div>
<div style="background-color:#99FF66">#99FF66</div>
<div style="background-color:#99FF33">#99FF33</div>
<div style="background-color:#99FF00">#99FF00</div>
<div style="background-color:#99CCFF">#99CCFF</div>
<div style="background-color:#99CCCC">#99CCCC</div>
<div style="background-color:#99CC99">#99CC99</div>
<div style="background-color:#99CC66">#99CC66</div>
<div style="background-color:#99CC33">#99CC33</div>
<div style="background-color:#99CC00">#99CC00</div>
<div style="background-color:#9999FF">#9999FF</div>
<div style="background-color:#9999CC">#9999CC</div>
<div style="background-color:#999999">#999999</div>
<div style="background-color:#999966">#999966</div>
<div style="background-color:#999933">#999933</div>
<div style="background-color:#999900">#999900</div>
<div style="background-color:#9966FF">#9966FF</div>
<div style="background-color:#9966CC">#9966CC</div>
<div style="background-color:#996699">#996699</div>
<div style="background-color:#996666">#996666</div>
<div style="background-color:#996633">#996633</div>
<div style="background-color:#996600">#996600</div>
<div style="background-color:#9933FF">#9933FF</div>
<div style="background-color:#9933CC">#9933CC</div>
<div style="background-color:#993399">#993399</div>
<div style="background-color:#993366">#993366</div>
<div style="background-color:#993333">#993333</div>
<div style="background-color:#993300">#993300</div>
<div style="background-color:#9900FF">#9900FF</div>
<div style="background-color:#9900CC">#9900CC</div>
<div style="background-color:#990099">#990099</div>
<div style="background-color:#990066">#990066</div>
<div style="background-color:#990033">#990033</div>
<div style="background-color:#990000">#990000</div>
<div style="background-color:#66FFFF">#66FFFF</div>
<div style="background-color:#66FFCC">#66FFCC</div>
<div style="background-color:#66FF99">#66FF99</div>
<div style="background-color:#66FF66">#66FF66</div>
<div style="background-color:#66FF33">#66FF33</div>
<div style="background-color:#66FF00">#66FF00</div>
<div style="background-color:#66CCFF">#66CCFF</div>
<div style="background-color:#66CCCC">#66CCCC</div>
<div style="background-color:#66CC99">#66CC99</div>
<div style="background-color:#66CC66">#66CC66</div>
<div style="background-color:#66CC33">#66CC33</div>
<div style="background-color:#66CC00">#66CC00</div>
<div style="background-color:#6699FF">#6699FF</div>
<div style="background-color:#6699CC">#6699CC</div>
<div style="background-color:#669999">#669999</div>
<div style="background-color:#669966">#669966</div>
<div style="background-color:#669933">#669933</div>
<div style="background-color:#669900">#669900</div>
<div style="background-color:#6666FF">#6666FF</div>
<div style="background-color:#6666CC">#6666CC</div>
<div style="background-color:#666699">#666699</div>
<div style="background-color:#666666">#666666</div>
<div style="background-color:#666633">#666633</div>
<div style="background-color:#666600">#666600</div>
<div style="background-color:#6633FF">#6633FF</div>
<div style="background-color:#6633CC">#6633CC</div>
<div style="background-color:#663399">#663399</div>
<div style="background-color:#663366">#663366</div>
<div style="background-color:#663333">#663333</div>
<div style="background-color:#663300">#663300</div>
<div style="background-color:#6633FF">#6633FF</div>
<div style="background-color:#6633CC">#6633CC</div>
<div style="background-color:#663399">#663399</div>
<div style="background-color:#663366">#663366</div>
<div style="background-color:#663333">#663333</div>
<div style="background-color:#663300">#663300</div>
<div style="background-color:#6600FF">#6600FF</div>
<div style="background-color:#6600CC">#6600CC</div>
<div style="background-color:#660099">#660099</div>
<div style="background-color:#660066">#660066</div>
<div style="background-color:#660033">#660033</div>
<div style="background-color:#660000">#660000</div>
<div style="background-color:#33FFFF">#33FFFF</div>
<div style="background-color:#33FFCC">#33FFCC</div>
<div style="background-color:#33FF99">#33FF99</div>
<div style="background-color:#33FF66">#33FF66</div>
<div style="background-color:#33FF33">#33FF33</div>
<div style="background-color:#33FF00">#33FF00</div>
<div style="background-color:#33CCFF">#33CCFF</div>
<div style="background-color:#33CCCC">#33CCCC</div>
<div style="background-color:#33CC99">#33CC99</div>
<div style="background-color:#33CC66">#33CC66</div>
<div style="background-color:#33CC33">#33CC33</div>
<div style="background-color:#33CC00">#33CC00</div>
<div style="background-color:#3399FF">#3399FF</div>
<div style="background-color:#3399FF">#3399FF</div>
<div style="background-color:#3399CC">#3399CC</div>
<div style="background-color:#339999">#339999</div>
<div style="background-color:#339966">#339966</div>
<div style="background-color:#339933">#339933</div>
<div style="background-color:#339900">#339900</div>
<div style="background-color:#3366FF">#3366FF</div>
<div style="background-color:#3366CC">#3366CC</div>
<div style="background-color:#336699">#336699</div>
<div style="background-color:#336666">#336666</div>
<div style="background-color:#336633">#336633</div>
<div style="background-color:#336600">#336600</div>
<div style="background-color:#3333FF">#3333FF</div>
<div style="background-color:#3333CC">#3333CC</div>
<div style="background-color:#333399">#333399</div>
<div style="background-color:#333366">#333366</div>
<div style="background-color:#333333">#333333</div>
<div style="background-color:#333300">#333300</div>
<div style="background-color:#3300FF">#3300FF</div>
<div style="background-color:#3300CC">#3300CC</div>
<div style="background-color:#330099">#330099</div>
<div style="background-color:#330066">#330066</div>
<div style="background-color:#330033;
color:grey;">#330033</div>
<div style="background-color:#330000;
color:grey;">#330000</div>
<div style="background-color:#00FFCC">#00FFCC</div>
<div style="background-color:#00FF99">#00FF99</div>
<div style="background-color:#00FF66">#00FF66</div>
<div style="background-color:#00FF33">#00FF33</div>
<div style="background-color:#00FF00">#00FF00</div>
<div style="background-color:#00CCFF">#00CCFF</div>
<div style="background-color:#00CCCC">#00CCCC</div>
<div style="background-color:#00CC99">#00CC99</div>
<div style="background-color:#00CC66">#00CC66</div>
<div style="background-color:#00CC33">#00CC33</div>
<div style="background-color:#00CC00">#00CC00</div>
<div style="background-color:#0099FF">#0099FF</div>
<div style="background-color:#0099CC">#0099CC</div>
<div style="background-color:#009999">#009999</div>
<div style="background-color:#009966">#009966</div>
<div style="background-color:#009933">#009933</div>
<div style="background-color:#009900">#009900</div>
<div style="background-color:#0066FF">#0066FF</div>
<div style="background-color:#0066CC">#0066CC</div>
<div style="background-color:#006699">#006699</div>
<div style="background-color:#006666">#006666</div>
<div style="background-color:#006633">#006633</div>
<div style="background-color:#006600">#006600</div>
<div style="background-color:#0033FF">#0033FF</div>
<div style="background-color:#0033CC">#0033CC</div>
<div style="background-color:#003399">#003399</div>
<div style="background-color:#003366">#003366</div>
<div style="background-color:#003333">#003333</div>
<div style="background-color:#003300">#003300</div>
<div style="background-color:#0000FF">#0000FF</div>
<div style="background-color:#0000CC">#0000CC</div>
<div style="background-color:#000099">#000099</div>
<div style="background-color:#000066">#000066</div>
<div style="background-color:#000033;
color:grey">#000033</div>
<div style="background-color:#000000;
color:grey">#000000</div>
</center>
</body>
</html>
Output:
Example 2: In the below code, we will use multiple browser-safe colors on the page.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #CCFFFF;
}
h1 {
color: #336600;
}
p {
color: #006699
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<p>
Free Tutorials, Millions of Articles, Live,
Online and Classroom Courses, Frequent Coding
Competitions, Webinars by Industry Experts,
Internship opportunities and Job Opportunities.
</p>
</center>
</body>
</html>
Output:
Similar Reads
Primer CSS Colors Text Color Primer CSS is a CSS framework that is built upon GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable
3 min read
How to change text selection color in the browsers using CSS ? Most of the browsers by default highlight the selected text in a blue background. This can be changed by using the ::selection pseudo selector in CSS. The ::selectionselector is used for setting the CSS property to the part of the document that is selected by the user (such as clicking and dragging
1 min read
What are Accessibility Concerns in CSS ? CSS stands for Cascading Style Sheets. It is a markup language used to style and format HTML and XML documents, including web pages. CSS is used to describe how the content of a web page should be displayed, including elements such as fonts, colors, layout, and spacing. In this article, we will iden
5 min read
Primer CSS Alerts Color Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Primer CSS Colors Border Color Primer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are ste
4 min read
Is background-color:none valid CSS ? CSS "background-color:none" is valid. But it is better to specify it as "transparent" instead of "none". The CSS background-color property is used to specify the background color of an element. The background covers the total size of the element with padding and border but excluding margin. It makes
1 min read