En este artículo, aprenderemos sobre los colores seguros para el navegador . Estos son 216 colores de los 256 colores generales que se mostrarán de forma sólida, sin interpolaciones y consistentemente en todos los monitores.
Los colores seguros para el navegador contienen RGB 0, 51, 102, 153, 204 y 205 . Mientras observa estos números, debe preguntarse si estos números son solo valores aleatorios. No, estos números son múltiplos de 51 porque 51 es el 20% de 255.
¿Cuándo debería usar colores seguros para el navegador?
Vivimos en el siglo XXI y hay miles de millones de usuarios con millones de plataformas informáticas. Como desarrollador, debemos asegurarnos de que en todas las plataformas informáticas el color sea el mismo. No necesitamos que si usamos otros dispositivos, el color del sitio cambiará. Por lo tanto, se recomienda encarecidamente utilizar un color seguro para el navegador.
Tabla de colores segura para el navegador:
Ejemplo 1: en el siguiente código, veremos el color seguro del navegador que no cambiará cuando cambiemos el navegador.
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>
Producción:
Ejemplo 2: en el siguiente código, usaremos varios colores seguros para el navegador en la página.
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA