Con el sistema de color rgb
(red, green and blue), el rojo, el verde y el azul usan 8 bits cada uno, que tienen valores enteros de 0 a 255. Esto haciendo un simple calculo daría que 256 * 256 * 256 = 16.777.216 colores posibles.
Imaginaros que al principio de la web, por el nivel tecnológico, de las pantallas de la época (la resolución y la tasa de refresco) y también por los navegadores, no podían visualizarse más de 256 colores al mismo tiempo, por ello, se creó la escala de colores seguros
para la web.
Esta escala engloba los 216 colores que resultan de la combinación de 00, 33, 66, 99, CC y FF hexadecimal
Como sabreis en el sistema rgb()
, cada valor de color en hexadecimal se puede expresar en su valor decimal tanto con enteros como con porcentajes.
Por ejemplo el blanco (white), se puede declarar de todas estas formas:#FFFFFF
= rgb(255, 255, 255)
= rgb(100%, 100%, 100%).
También existen otros sistemas de escalas de colores como la hsl()
, que significa hue = tono
, saturation = saturación
y lightness = brillo
, que se declaran como tono = numero de grados (angulo de un circulo que contiene al arco-iris), y la saturación y el brillo en porcentaje (%), de 0 a 100.
Por tanto cada color de la escala rgb(), tiene su igual en la hsl(), siguiendo con el ejemplo del color blanco tendriamos que hsl(0, 0%, 100%)
= rgb(255, 255, 255)
.
Por supuesto también existen una pequeña lista de 140 colores que se pueden declarar en CSS
por su nombre en inglés.
Bueno los colores como veis son un mundo y es muy conveniente pensarselos bien para adecuar el aspecto visual de nuestras páginas, yo para que le echeis un vistazo, he construido una galeria con los denominados colores seguros para la web que tienen impreso su valor hexadecimal y al hacer hover, se despliega otra etiqueta, con sus equivalentes en rgb(decimal), y hsl(), espero que os guste, gracias por la visita.
#000000 BLACK rgb(0, 0, 0) hsl(0, 0%, 0%)
#000033 rgb(0, 0, 51) hsl(240, 100%, 10%)
#000066 rgb(0, 0, 102) hsl(240, 100%, 20%)
#000099 rgb(0, 0, 153) hsl(240, 100%, 30%)
#0000CC rgb(0, 0, 204) hsl(240, 100%, 40%)
#0000FF BLUE rgb(0, 0, 255) hsl(240, 100%, 50%)
#330000 rgb(51, 0, 0) hsl(0, 100%, 10%)
#330033 rgb(51, 0, 51) hsl(300, 100%, 10%)
#330066 rgb(51, 0, 102) hsl(270, 100%, 20%)
#330099 rgb(51, 0, 153) hsl(260, 100%, 30%)
#3300CC rgb(51, 0, 204) hsl(255, 100%, 40%)
#3300FF rgb(51, 0, 255) hsl(252, 100%, 50%)
#660000 rgb(102, 0, 0) hsl(0, 100%, 20%)
#660033 rgb(102, 0, 51) hsl(330, 100%, 20%)
#660066 rgb(102, 0, 102) hsl(300, 100%, 20%)
#660099 rgb(102, 0, 153) hsl(280, 100%, 30%)
#6600CC rgb(102, 0, 204) hsl(270, 100%, 40%)
#6600FF rgb(102, 0, 255) hsl(264, 100%, 50%)
#990000 rgb(153, 0, 0) hsl(0, 100%, 30%)
#990033 rgb(153, 0, 51) hsl(340, 100%, 30%)
#990066 rgb(153, 0, 102) hsl(320, 100%, 30%)
#990099 rgb(153, 0, 153) hsl(300, 100%, 30%)
#9900CC rgb(153, 0, 204) hsl(285, 100%, 40%)
#9900FF rgb(153, 0, 255) hsl(276, 100%, 50%)
#CC0000 rgb(204, 0, 0) hsl(0, 100%, 40%)
#CC0033 rgb(204, 0, 51) hsl(345, 100%, 40%)
#CC0066 rgb(204, 0, 102) hsl(330, 100%, 40%)
#CC0099 rgb(204, 0, 153) hsl(315, 100%, 40%)
#CC00CC rgb(204, 0, 204) hsl(300, 100%, 40%)
#CC00FF rgb(204, 0, 255) hsl(288, 100%, 50%)
#FF0000 RED rgb(255, 0, 0) hsl(0, 100%, 50%)
#FF0033 rgb(255, 0, 51) hsl(348, 100%, 50%)
#FF0066 rgb(255, 0, 102) hsl(336, 100%, 50%)
#FF0099 rgb(255, 0, 153) hsl(324, 100%, 50%)
#FF00CC rgb(255, 0, 204) hsl(312, 100%, 50%)
#FF00FF Fuchsia o magenta rgb(255, 0, 255) hsl(300, 100%, 50%)
#003300 rgb(0, 51, 0) hsl(120, 100%, 10%)
#003333 rgb(0, 51, 51) hsl(180, 100%, 10%)
#003366 rgb(0, 51, 102) hsl(210, 100%, 20%)
#003399 rgb(0, 51, 153) hsl(220, 100%, 30%)
#0033CC rgb(0, 51, 204) hsl(225, 100%, 40%)
#0033FF rgb(0, 51, 255) hsl(228, 100%, 50%)
#333300 rgb(51, 51, 0) hsl(60, 100%, 10%)
#333333 rgb(51, 51, 51) hsl(0, 0%, 20%)
#333366 rgb(51, 51, 102) hsl(240, 33%, 30%)
#333399 rgb(51, 51, 153) hsl(240, 50%, 40%)
#3333CC rgb(51, 51, 204) hsl(240, 60%, 50%)
#3333FF rgb(51, 51, 255) hsl(240, 100%, 60%)
#663300 rgb(102, 51, 0) hsl(30, 100%, 20%)
#663333 rgb(102, 51, 51) hsl(0, 33%, 30%)
#663366 rgb(102, 51, 102) hsl(300, 33%, 30%)
#663399 rgb(102, 51, 153) hsl(270, 50%, 40%)
#6633CC rgb(102, 51, 204) hsl(260, 60%, 50%)
#6633FF rgb(102, 51, 255) hsl(255, 100%, 60%)
#993300 rgb(153, 51, 0) hsl(20, 100%, 30%)
#993333 rgb(153, 51, 51) hsl(0, 50%, 40%)
#993366 rgb(153, 51, 102) hsl(330, 50%, 40%)
#993399 rgb(153, 51, 153) hsl(300, 50%, 40%)
#9933CC rgb(153, 51, 204) hsl(280, 60%, 50%)
#9933FF rgb(153, 51, 255) hsl(270, 100%, 60%)
#CC3300 rgb(204, 51, 0) hsl(15, 100%, 40%)
#CC3333 rgb(204, 51, 51) hsl(0, 60%, 50%)
#CC3366 rgb(204, 51, 102) hsl(340, 60%, 50%)
#CC3399 rgb(204, 51, 153) hsl(320, 60%, 50%)
#CC33CC rgb(204, 51, 153) hsl(320, 60%, 50%)
#CC33FF rgb(204, 51, 255) hsl(285, 100%, 60%)
#FF3300 rgb(255, 51, 0) hsl(12, 100%, 50%)
#FF3333 rgb(255, 51, 51) hsl(0, 100%, 60%)
#FF3366 rgb(255, 51, 102) hsl(345, 100%, 60%)
#FF3399 rgb(255, 51, 153) hsl(330, 100%, 60%)
#FF33CC rgb(255, 51, 204) hsl(315, 100%, 60%)
#FF33FF rgb(255, 51, 255) hsl(300, 100%, 60%)
#006600 rgb(0, 102, 0) hsl(120, 100%, 20%)
#006633 rgb(0, 102, 51) hsl(150, 100%, 20%)
#006666 rgb(0, 102, 102) hsl(180, 100%, 20%)
#006699 rgb(0, 102, 153) hsl(200, 100%, 30%)
#0066CC rgb(0, 102, 204) hsl(210, 100%, 40%)
#0066FF rgb(0, 102, 255) hsl(216, 100%, 50%)
#336600 rgb(51, 102, 0) hsl(90, 100%, 20%)
#336633 rgb(51, 102, 51) hsl(120, 33%, 30%)
#336666 rgb(51, 102, 102) hsl(180, 33%, 30%)
#336699 rgb(51, 102, 153) hsl(210, 50%, 40%)
#3366CC rgb(51, 102, 204) hsl(220, 60%, 50%)
#3366FF rgb(51, 102, 255) hsl(225, 100%, 60%)
#666600 rgb(102, 102, 0) hsl(60, 100%, 20%)
#666633 rgb(102, 102, 51) hsl(60, 33%, 30%)
#666666 rgb(102, 102, 102) hsl(0, 0%, 40%)
#666699 rgb(102, 102, 153) hsl(240, 20%, 50%)
#6666CC rgb(102, 102, 204) hsl(240, 50%, 60%)
#6666FF rgb(102, 102, 255) hsl(240, 100%, 70%)
#996600 rgb(153, 102, 0) hsl(40, 100%, 30%)
#996633 rgb(153, 102, 51) hsl(30, 50%, 40%)
#996666 rgb(153, 102, 102) hsl(0, 20%, 50%)
#996699 rgb(153, 102, 153) hsl(300, 20%, 50%)
#9966CC rgb(153, 102, 204) hsl(270, 50%, 60%)
#9966FF rgb(153, 102, 255) hsl(260, 100%, 70%)
#CC6600 rgb(204, 102, 0) hsl(30, 100%, 40%)
#CC6633 rgb(204, 102, 51) hsl(20, 60%, 50%)
#CC6666 rgb(204, 102, 102) hsl(0, 50%, 60%)
#CC6699 rgb(204, 102, 153) hsl(330, 50%, 60%)
#CC66CC rgb(204, 102, 204) hsl(300, 50%, 60%)
#CC66FF rgb(204, 102, 255) hsl(280, 100%, 70%)
#FF6600 rgb(255, 102, 0) hsl(24, 100%, 50%)
#FF6633 rgb(255, 102, 51) hsl(15, 100%, 60%)
#FF6666 rgb(255, 102, 102) hsl(0, 100%, 70%)
#FF6699 rgb(255, 102, 153) hsl(340, 100%, 70%)
#FF66CC rgb(255, 102, 204) hsl(320, 100%, 70%)
#FF66FF rgb(255, 102, 255) hsl(300, 100%, 70%)
#009900 rgb(0, 153, 0) hsl(120, 100%, 30%)
#009933 rgb(0, 153, 51) hsl(140, 100%, 30%)
#009966 rgb(0, 153, 102) hsl(160, 100%, 30%)
#009999 rgb(0, 153, 153) hsl(180, 100%, 30%)
#0099CC rgb(0, 153, 204) hsl(195, 100%, 40%)
#0099FF rgb(0, 153, 255) hsl(204, 100%, 50%)
#339900 rgb(51, 153, 0) hsl(100, 100%, 30%)
#339933 rgb(51, 153, 51) hsl(120, 50%, 40%)
#339966 rgb(51, 153, 102) hsl(150, 50%, 40%)
#339999 rgb(51, 153, 153) hsl(180, 50%, 40%)
#3399CC rgb(51, 153, 204) hsl(200, 60%, 50%)
#3399FF rgb(51, 153, 255) hsl(210, 100%, 60%)
#669900 rgb(102, 153, 0) hsl(80, 100%, 30%)
#669933 rgb(102, 153, 51) hsl(90, 50%, 40%)
#669966 rgb(102, 153, 102) hsl(120, 20%, 50%)
#669999 rgb(102, 153, 153) hsl(180, 20%, 50%)
#6699CC rgb(102, 153, 204) hsl(210, 50%, 60%)
#6699FF rgb(102, 153, 255) hsl(220, 100%, 70%)
#999900 rgb(153, 153, 0) hsl(60, 100%, 30%)
#999933 rgb(153, 153, 51) hsl(60, 50%, 40%)
#999966 rgb(153, 153, 102) hsl(60, 20%, 50%)
#999999 rgb(153, 153, 153) hsl(0, 0%, 60%)
#9999CC rgb(153, 153, 204) hsl(240, 33%, 70%)
#9999FF rgb(153, 153, 255) hsl(240, 100%, 80%)
#CC9900 rgb(204, 153, 0) hsl(45, 100%, 40%)
#CC9933 rgb(204, 153, 51) hsl(40, 60%, 50%)
#CC9966 rgb(204, 153, 102) hsl(30, 50%, 60%)
#CC9999 rgb(204, 153, 153) hsl(0, 33%, 70%)
#CC99CC rgb(204, 153, 204) hsl(300, 33%, 70%)
#CC99FF rgb(204, 153, 255) hsl(270, 100%, 80%)
#FF9900 rgb(255, 153, 0) hsl(36, 100%, 50%)
#FF9933 rgb(255, 153, 51) hsl(30, 100%, 60%)
#FF9966 rgb(255, 153, 102) hsl(20, 100%, 70%)
#FF9999 rgb(255, 153, 153) hsl(0, 100%, 80%)
#FF99CC rgb(255, 153, 204) hsl(330, 100%, 80%)
#FF99FF rgb(255, 153, 255) hsl(300, 100%, 80%)
#00CC00 rgb(0, 204, 0) hsl(120, 100%, 40%)
#00CC33 rgb(0, 204, 51) hsl(135, 100%, 40%)
#00CC66 rgb(0, 204, 102) hsl(150, 100%, 40%)
#00CC99 rgb(0, 204, 153) hsl(165, 100%, 40%)
#00CCCC rgb(0, 204, 204) hsl(180, 100%, 40%)
#00CCFF rgb(0, 204, 255) hsl(192, 100%, 50%)
#33CC00 rgb(51, 204, 0) hsl(105, 100%, 40%)
#33CC33 rgb(51, 204, 51) hsl(120, 60%, 50%)
#33CC66 rgb(51, 204, 102) hsl(140, 60%, 50%)
#33CC99 rgb(51, 204, 153) hsl(160, 60%, 50%)
#33CCCC rgb(51, 204, 204) hsl(180, 60%, 50%)
#33CCFF rgb(51, 204, 255) hsl(195, 100%, 60%)
#66CC00 rgb(102, 204, 0) hsl(90, 100%, 40%)
#66CC33 rgb(102, 204, 51) hsl(100, 60%, 50%)
#66CC66 rgb(102, 204, 102) hsl(120, 50%, 60%)
#66CC99 rgb(102, 204, 153) hsl(150, 50%, 60%)
#66CCCC rgb(102, 204, 204) hsl(180, 50%, 60%)
#66CCFF rgb(102, 204, 255) hsl(200, 100%, 70%)
#99CC00 rgb(153, 204, 0) hsl(75, 100%, 40%)
#99CC33 rgb(153, 204, 51) hsl(80, 60%, 50%)
#99CC66 rgb(153, 204, 102) hsl(90, 50%, 60%)
#99CC99 rgb(153, 204, 153) hsl(120, 33%, 70%)
#99CCCC rgb(153, 204, 204) hsl(180, 33%, 70%)
#99CCFF rgb(153, 204, 255) hsl(210, 100%, 80%)
#CCCC00 rgb(204, 204, 0) hsl(60, 100%, 40%)
#CCCC33 rgb(204, 204, 51) hsl(60, 60%, 50%)
#CCCC66 rgb(204, 204, 102) hsl(60, 50%, 60%)
#CCCC99 rgb(204, 204, 153) hsl(60, 33%, 70%)
#CCCCCC rgb(204, 204, 204) hsl(0, 0%, 80%)
#CCCCFF rgb(204, 204, 255) hsl(240, 100%, 90%)
#FFCC00 rgb(255, 204, 0) hsl(48, 100%, 50%)
#FFCC33 rgb(255, 204, 51) hsl(45, 100%, 60%)
#FFCC66 rgb(255, 204, 102) hsl(40, 100%, 70%)
#FFCC99 rgb(255, 204, 153) hsl(30, 100%, 80%)
#FFCCCC rgb(255, 204, 204) hsl(0, 100%, 90%)
#FFCCFF rgb(255, 204, 255) hsl(300, 100%, 90%)
#00FF00 LIME rgb(0, 255, 0) hsl(120, 100%, 50%)
#00FF33 rgb(0, 255, 51) hsl(132, 100%, 50%)
#00FF66 rgb(0, 255, 102) hsl(144, 100%, 50%)
#00FF99 rgb(0, 255, 153) hsl(156, 100%, 50%)
#00FFCC rgb(0, 255, 204) hsl(168, 100%, 50%)
#00FFFF AQUA o CYAN rgb(0, 255, 255) hsl(180, 100%, 50%)
#33FF00 rgb(51, 255, 0) hsl(108, 100%, 50%)
#33FF33 rgb(51, 255, 51) hsl(120, 100%, 60%)
#33FF66 rgb(51, 255, 102) hsl(135, 100%, 60%)
#33FF99 rgb(51, 255, 153) hsl(150, 100%, 60%)
#33FFCC rgb(51, 255, 204) hsl(165, 100%, 60%)
#33FFFF rgb(51, 255, 255) hsl(180, 100%, 60%)
#66FF00 rgb(102, 255, 0) hsl(96, 100%, 50%)
#66FF33 rgb(102, 255, 51) hsl(105, 100%, 60%)
#66FF66 rgb(102, 255, 102) hsl(120, 100%, 70%)
#66FF99 rgb(102, 255, 153) hsl(140, 100%, 70%)
#66FFCC rgb(102, 255, 204) hsl(160, 100%, 70%)
#66FFFF rgb(102, 255, 255) hsl(180, 100%, 70%)
#99FF00 rgb(153, 255, 0) hsl(84, 100%, 50%)
#99FF33 rgb(153, 255, 51) hsl(90, 100%, 60%)
#99FF66 rgb(153, 255, 102) hsl(100, 100%, 70%)
#99FF99 rgb(153, 255, 153) hsl(120, 100%, 80%)
#99FFCC rgb(153, 255, 204) hsl(150, 100%, 80%)
#99FFFF rgb(153, 255, 255) hsl(180, 100%, 80%)
#CCFF00 rgb(204, 255, 0) hsl(72, 100%, 50%)
#CCFF33 rgb(204, 255, 51) hsl(75, 100%, 60%)
#CCFF66 rgb(204, 255, 102) hsl(80, 100%, 70%)
#CCFF99 rgb(204, 255, 153) hsl(90, 100%, 80%)
#CCFFCC rgb(204, 255, 204) hsl(120, 100%, 90%)
#CCFFFF rgb(204, 255, 255) hsl(180, 100%, 90%)
#FFFF00 YELLOW rgb(255, 255, 0) hsl(60, 100%, 50%)
#FFFF33 rgb(255, 255, 51) hsl(60, 100%, 60%)
#FFFF66 rgb(255, 255, 102) hsl(60, 100%, 70%)
#FFFF99 rgb(255, 255, 153) hsl(60, 100%, 80%)
#FFFFCC rgb(255, 255, 204) hsl(60, 100%, 90%)
#FFFFFF WHITE rgb(255, 255, 255) hsl(0, 0%, 100%)
Como ya he comentado, es muy importante, la elección de los colores para las páginas, y conocer los distintos sistemas para declararlos en el archivo CSS. Gracias por la visita, si tienes alguna sugerencia, agradezco tu contacto, hasta la próxima.