Los códigos de color los utilizamos para establecer el color de fondo de los elementos, o el color de las fuentes:
background-color: #80BFFF;
color: #80BFFF;
En la web, un color es un valor expresado como RGB o una palabra que lo identifica y que tienen su origen en los nombres dados a los 16 colores de la paleta VGA original de allá lejos y hace tiempo: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow.
Los colores pueden definirse con tres números uno para el rojo (R=red), uno para el verde (G=green) y otro para el azul (B=blue) que representan la intensidad de sus componentes. Este sistema llamado RGB utiliza números que pueden variar entre 0 y 255 (un byte) o sea que, cada componente puede tener 256 valores distintos lo que, al combinarse (256 x 256 x 256) nos da una gama de 16 millones de colores (el llamado color verdadero).
background-color: #80BFFF;
color: #80BFFF;
En la web, un color es un valor expresado como RGB o una palabra que lo identifica y que tienen su origen en los nombres dados a los 16 colores de la paleta VGA original de allá lejos y hace tiempo: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white y yellow.
Los colores pueden definirse con tres números uno para el rojo (R=red), uno para el verde (G=green) y otro para el azul (B=blue) que representan la intensidad de sus componentes. Este sistema llamado RGB utiliza números que pueden variar entre 0 y 255 (un byte) o sea que, cada componente puede tener 256 valores distintos lo que, al combinarse (256 x 256 x 256) nos da una gama de 16 millones de colores (el llamado color verdadero).
Los colores primarios son estos:
| rgb(255,0,0) = #FF0000 = Rojo | |
| rgb(0,255,0) = #00FF00 = Verde | |
| rgb(0,0,255) = #0000FF = Azul |
Los colores secundarios son:
| rgb(0,255,255) = #00FFFF = Cyan | |
| rgb(255,0,255) = #FF00FF = Magenta | |
| rgb(255,255,0) = #FFFF00 = Amarillo |
Los tonos de gris van desde el blanco (todos los colores con intensidad máxima) y el negro (todos los colores con intensidad mínima), es decir van desde rgb(0,0,0) hasta rgb(255,255,255).
Para crear tonos de gris, la técnica a utilizar es sencilla, los tres valores de RGB deben ser iguales:
Para crear tonos de gris, la técnica a utilizar es sencilla, los tres valores de RGB deben ser iguales:
| rgb(0,0,0) = #000000 = Negro | |
| rgb(64,64,64) = #404040 = Gris Oscuro | |
| rgb(128,128,128) = #808080 = Gris | |
| rgb(192,192,192) = #C0C0C0 = Gris Claro | |
| rgb(255,255,255) = #FFFFFF = Blanco |
Para conseguir "tonos" de un determinado color, usamos simple aritmética; si partimos del rojo rgb(255,0,0) y luego, por ejemplo, colocamos valores progresivos en el componente verde, obtendremos una gama:
| 0 | 32 | 64 | 96 | 128 | 160 | 192 | 224 | 255 |
Lo mismo pasaría si variamos el otro componente, el azul:
| 0 | 32 | 64 | 96 | 128 | 160 | 192 | 224 | 255 |
O ambos componentes simultáneamente:
| 0 | 32 | 64 | 96 | 128 | 160 | 192 | 224 | 255 |
Para los colores puros (saturados) se combinan sólo dos colores primarios: rgb(X,Y,0), rgb(Y,X,0), rgb(0,X,Y) o rgb(0,Y,X) donde X no es cero y es mayor o igual que Y. Entonces:
En un color hexadecimal, cada componente está representado por dos dígitos, por ejemplo:
#F08000 = F0 80 00
- si Y = 0 es un color primario.
- si X = Y es un color secundario
- si Y = X / 2 es un intermedio entre un color primario y un color secundario (rgb(255,128,0) = naranja)
- si Y < X / 2 es un intermedio pero más cercano al color primario (rgb(255,64,0) = naranja rojizo)
- si Y > X / 2 es un intermedio pero más cercano al color secundario (rgb(255,192,0) = naranja amarillento)
- como un valor hexadecimal doble: #00CC00 que varía entre 000000 y FFFFFF
- como un valor hexadecimal simple: #0C0 que varía entre 00 y FF
- como un valor decimal: rgb(0,204,0) donde cada valor puede variar entre 0 y 255
- como un porcentaje: rgb(0%,80%,0%) donde cada valor puede variar entre 0.0 y 100.0
En un color hexadecimal, cada componente está representado por dos dígitos, por ejemplo:
#F08000 = F0 80 00
En la web, hay una gama de colores llamados "seguros" es decir, que no serán distorsionados por las diferentes tarjetas de video y se compone de 216 colores que resultan de todas las combinaciones posibles de seis valores 0, 51, 102, 153, 204 y 255 (00, 33, 66, 99, CC y FF) para cada uno de los componentes rojo, verde y azul (6^3 = 216) ¿Por qué esos números? Porque representan porcentajes de intensidad exactos (0%, 20%, 40%, 60%, 80% y 100%)
Como los monitores podrían manejar paletas de hasta 256 colores, esos 40 colores sin usar, Windows los reserva para identificar 20 colores de sistema del sistema operativo y deja otros 20 para que pueda definir el usuario en cada aplicación.
Esos "colores seguros", tienen "nombres así que en lugar de usar valores RGB podemos usar esos nombres. Así que es cualquiera de estos tres códigos, indica un color blanco:
color: #FFFFFF;
color: rgb(255,255,255);
color: white;
Como los monitores podrían manejar paletas de hasta 256 colores, esos 40 colores sin usar, Windows los reserva para identificar 20 colores de sistema del sistema operativo y deja otros 20 para que pueda definir el usuario en cada aplicación.
Esos "colores seguros", tienen "nombres así que en lugar de usar valores RGB podemos usar esos nombres. Así que es cualquiera de estos tres códigos, indica un color blanco:
color: #FFFFFF;
color: rgb(255,255,255);
color: white;
| aliceblue #F0F8FF | antiquewhite #FAEBD7 | aqua #00FFFF |
| aquamarine #7FFFD4 | azure #F0FFFF | beige #F5F5DC |
| bisque #FFE4C4 | black #000000 | blanchedalmond #FFEBCD |
| blue #0000FF | blueviolet #8A2BE2 | brown #A52A2A |
| burlywood #DEB887 | cadetblue #5F9EA0 | chartreuse #7FFF00 |
| chocolate #D2691E | coral #FF7F50 | cornflowerblue #6495ED |
| cornsilk #FFF8DC | crimson #DC143C | cyan #00FFFF |
| darkblue #00008B | darkcyan #008B8B | darkgoldenrod #B8860B |
| darkgray #A9A9A9 | darkgreen #006400 | darkkhaki #BDB76B |
| darkmagenta #8B008B | darkolivegreen #556B2F | darkorange #FF8C00 |
| darkorchid #9932CC | darkred #8B0000 | darksalmon #E9967A |
| darkseagreen #8FBC8B | darkslateblue #483D8B | darkslategray #2F4F4F |
| darkturquoise #00CED1 | darkviolet #9400D3 | deeppink #FF1493 |
| deepskyblue #00BFFF | dimgray #696969 | dodgerblue #1E90FF |
| firebrick #B22222 | floralwhite #FFFAF0 | forestgreen #228B22 |
| fuchsia #FF00FF | gainsboro #DCDCDC | ghostwhite #F8F8FF |
| gold #FFD700 | goldenrod #DAA520 | gray #808080 |
| green #008000 | greenyellow #ADFF2F | honeydew #F0FFF0 |
| hotpink #FF69B4 | indianred #CD5C5C | indigo #4B0082 |
| ivory #FFFFF0 | khaki #F0E68C | lavender #E6E6FA |
| lavenderblush #FFF0F5 | lawngreen #7CFC00 | lemonchiffon #FFFACD |
| lightblue #ADD8E6 | lightcoral #F08080 | lightcyan #E0FFFF |
| lightgoldenrodyellow #FAFAD2 | lightgreen #90EE90 | lightgrey #D3D3D3 |
| lightpink #FFB6C1 | lightsalmon #FFA07A | lightseagreen #20B2AA |
| lightskyblue #87CEFA | lightslategray #778899 | lightsteelblue #B0C4DE |
| lightyellow #FFFFE0 | lime #00FF00 | limegreen #32CD32 |
| linen #FAF0E6 | magenta #FF00FF | maroon #800000 |
| mediumaquamarine #66CDAA | mediumblue #0000CD | mediumorchid #BA55D3 |
| mediumpurple #9370DB | mediumseagreen #3CB371 | mediumslateblue #7B68EE |
| mediumspringgreen #00FA9A | mediumturquoise #48D1CC | mediumvioletred #C71585 |
| midnightblue #191970 | mintcream #F5FFFA | mistyrose #FFE4E1 |
| moccasin #FFE4B5 | navajowhite #FFDEAD | navy #000080 |
| oldlace #FDF5E6 | olive #808000 | olivedrab #6B8E23 |
| orange #FFA500 | orangered #FF4500 | orchid #DA70D6 |
| palegoldenrod #EEE8AA | palegreen #98FB98 | paleturquoise #AFEEEE |
| palevioletred #DB7093 | papayawhip #FFEFD5 | peachpuff #FFDAB9 |
| peru #CD853F | pink #FFC0CB | plum #DDA0DD |
| powderblue #B0E0E6 | purple #800080 | red #FF0000 |
| rosybrown #BC8F8F | royalblue #4169E1 | saddlebrown #8B4513 |
| salmon #FA8072 | sandybrown #F4A460 | seagreen #2E8B57 |
| seashell #FFF5EE | sienna #A0522D | silver #C0C0C0 |
| skyblue #87CEEB | slateblue #6A5ACD | slategray #708090 |
| snow #FFFAFA | springgreen #00FF7F | steelblue #4682B4 |
| tan #D2B48C | teal #008080 | thistle #D8BFD8 |
| tomato #FF6347 | turquoise #40E0D0 | violet #EE82EE |
| wheat #F5DEB3 | white #FFFFFF | whitesmoke #F5F5F5 |
| yellow #FFFF00 | yellowgreen #9ACD32 |
12 comentarios:
¡Interesante esto de los colores!
Saludos
Muy buen artículo, gracias.
jajajaja perdonaaa pero casi me da algo al verte en plan navideño jajajaja !!que bueno¡¡
Una decoración austera pero con buen sentido de humor al mismo tiempo.
Gracias por hacerme reír con ganas :D
¿Risa? ¡Y yo que creí que estaba muy elegante con mi gorrito! :D
!!Y lo estás y también abrigadito¡¡ a mi me vendría muy bien con este frío ufff hace un tiempo verdaderamente navideño, solo falta que nevara pero no ocurrirá al menos en esta zona :(
Bueno, pues yo me siento un poco acalorado con los 35 grados de Buenos Aires ... sopla un poco que necesitamos viento :D
Como fan de los colores en cualquiera de sus interpretaciones, es estupendo este artículo.
Me alegro que te gustara, Sisco :)
todo lo que fui leyendo me sirvió muchísimo...
algo sobre colores...muy bueno ! y muy didáctica la forma de explicar.
gracias x compartir !!!
Gracias por el comentario, Josefina :)
olaa...oie esk tngo un problema, tengo una plantilla de la pagina web google templates o algo asi y no se como cambiar el color a las letras! ayudame porfa,me refiero a las de las entradas..:(
muchas gracias por el aporte esta muy bien pero hay un pequeño error con el ejemplo de la converción de decimal a hexadecimal.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...