Open In App

What are the browser safe colors in CSS ?

Last Updated : 11 Jul, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 consistently on all monitors.

Browser-safe colors contains 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:


 


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        Which property is used to underline, overline, and strikethrough text using CSS ?
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Best Headless CMSs for your Web Projects
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                What is thread safe or non-thread safe in PHP ?
            

        
    
        
            

                React.js Blueprint Colors Core colors
            

        
    
        
            

                How to Change the Label Colors or the Legend Colors in a Chart ?
            

        
    
        
            

                CSS Web Safe Fonts
            

        
    
        
            

                What are web safe fonts and fallback fonts in CSS ?
            

        
    
        
            

                How to use motion-safe and motion-reduce in Tailwind CSS ?
            

        
    
        
            

                How to convert a value to a safe integer using JavaScript ?
            

        
    
        
            

                How to Create TypeScript Generic Function with Safe Type Matching ?
            

        
    
        
            

                How to change svg icon colors with Tailwind CSS ?
            

        
    
        
            

                How to set Bullet colors in HTML Lists using only CSS?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
A

        

            
        

        

                                    


                                    

                                        abhishekpal97854368                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox