Si eres diseñador gráfico, o simplemente alguna vez te has metido en un programa de edición de imagen, habrás visto un recuadro que te permitía cambiar el color, ya sea del cubo de pintura, del pincel, de las letras… Lo que quizá te ha dado curiosidad es el hecho de que, cuando se elige un color, aparece un código de colores, ¿sabes lo que es?
Si te has preguntado alguna vez qué significan esos códigos de letras, o de números, y quieres saber más sobre ello, a continuación te ayudamos a que entiendas la importancia del código de colores, por qué reflejan colores y otros detalles curiosos.
Qué es el código de colores
Podemos definir el código de colores como una gama cromática en la que se puede mostrar una web. Es decir, las posibilidades que se tienen, en una paleta de unos 216 colores, para determinar cómo va a verse una web. Este código puede basarse en tres tipos de sistemas: RGB, HEX y HSL (este último ya en desuso).
Realmente, para lo que sirve el código de colores es para servir de código universal para todos los navegadores de tal forma que, con esos códigos, lo que se logra es reproducir las mismas tonalidades, ya sea en Internet Explores, en Firefox Mozilla, en Google Chrome…
Debes saber que un ordenador es capaz de distinguir hasta 16 millones de colores, por lo que hay muchísimas posibilidades para crear una web o para modificar imágenes.
Tipos de códigos de colores
Como te hemos dicho antes, existen tres tipos de sistemas:
- RGB. Es el más conocido y se compone de tres colores primarios, rojo, azul y verde, de los que, a través de su combinación, se sacan el resto de colores. En cuanto a su representación, esta va del 0 al 255 y el código que aparece está compuesto por tres cifras separadas por comas y entre paréntesis.
- Hexadecimal. Utilizado sobre todo en HTML y en CSS. En este caso se compone tanto de cifras como de letras que se ordenan entre sí para obtener códigos que determinen los colores.
- HSL. Ya en desuso, se basa en usar el matiz, la saturación y la luminosidad a la hora de crear un color. Viene determinado por grados y tantos por ciento (tres cifras separadas por comas y entre paréntesis).
Por qué son importantes los códigos
Ahora que sabes qué es el código de colores, su aplicación es fácil de entender, ya que sirve para determinar cuál es el código que se necesita para que se muestre un color determinado. Esto funciona, por ejemplo, en las páginas web. El código HTML lleva implícito si una web tiene un fondo de un determinado color, si el tipo de letra va en roja, amarilla, verde, azul…, y muchos otros usos.
¿Entiendes por qué es importante? Por ejemplo, imagina que tienes una web con un fondo en rojo. Y quieres cambiarlo a uno en blanco. Si supieras el código que determina el color rojo, usando el buscador en el código HTML obtendrías el lugar en que se refleja este color (vinculado con el color de background) y podrías cambiarlo rápidamente. Pero, ¿y si no lo tienes? Tendrías que estar buscando hasta encontrar esa sección y probar para ver cuál es el código que se acerca al que quieres.
Por eso, el código de colores te ayuda a acelerar el trabajo, así como a poder usar los colores a la hora de diseñar una web, editar una imagen, etc.
Listado de colores y su código Hexadecimal y RGB
Para finalizar, nos gustaría dejarte a continuación una tabla en la que puedes encontrar la mayoría de colores que existen junto a su código decimal (RGB) y el hexadecimal para que, si en algún momento necesitas cambiar el código, puedas hacerlo fácilmente sin necesidad de buscarlo en la paleta de colores.
| Etiqueta | Decimal (R,G,B) | Hexadecimal |
|---|---|---|
| aliceblue | rgb(240, 248, 255) | #F0F8FF |
| antiquewhite | rgb(250, 235, 215) | #FAEBD7 |
| aqua | rgb(0, 255, 255) | #00FFFF |
| aquamarine | rgb(127, 255, 212) | #7FFFD4 |
| azure | rgb(240, 255, 255) | #F0FFFF |
| beige | rgb(245, 245, 220) | #F5F5DC |
| bisque | rgb(255, 228, 196) | #FFE4C4 |
| black | rgb(0, 0, 0) | #000000 |
| blanchedalmond | rgb(255, 235, 205) | #FFEBCD |
| blue | rgb(0, 0, 255) | #0000FF |
| blueviolet | rgb(138, 43, 226) | #8A2BE2 |
| brown | rgb(165, 42, 42) | #A52A2A |
| burlywood | rgb(222, 184, 135) | #DEB887 |
| cadetblue | rgb(95, 158, 160) | #5F9EA0 |
| chartreuse | rgb(127, 255, 0) | #7FFF00 |
| chocolate | rgb(210, 105, 30) | #D2691E |
| coral | rgb(255, 127, 80) | #FF7F50 |
| cornflowerblue | rgb(100, 149, 237) | #6495ED |
| cornsilk | rgb(255, 248, 220) | #FFF8DC |
| crimson | rgb(220, 20, 60) | #DC143C |
| cyan | rgb(0, 255, 255) | #00FFFF |
| darkblue | rgb(0, 0, 139) | #00008B |
| darkcyan | rgb(0, 139, 139) | #008B8B |
| darkgoldenrod | rgb(184, 134, 11) | #B8860B |
| darkgray | rgb(169, 169, 169) | #A9A9A9 |
| darkgreen | rgb(0, 100, 0) | #006400 |
| darkgrey | rgb(169, 169, 169) | #A9A9A9 |
| darkkhaki | rgb(189, 183, 107) | #BDB76B |
| darkmagenta | rgb(139, 0, 139) | #8B008B |
| darkolivegreen | rgb(85, 107, 47) | #556B2F |
| darkorange | rgb(255, 140, 0) | #FF8C00 |
| darkorchid | rgb(153, 50, 204) | #9932CC |
| darkred | rgb(139, 0, 0) | #8B0000 |
| darksalmon | rgb(233, 150, 122) | #E9967A |
| darkseagreen | rgb(143, 188, 143) | #8FBC8F |
| darkslateblue | rgb(72, 61, 139) | #483D8B |
| darkslategray | rgb(47, 79, 79) | #2F4F4F |
| darkslategrey | rgb(47, 79, 79) | #2F4F4F |
| darkturquoise | rgb(0, 206, 209) | #00CED1 |
| darkviolet | rgb(148, 0, 211) | #9400D3 |
| deeppink | rgb(255, 20, 147) | #FF1493 |
| deepskyblue | rgb(0, 191, 255) | #00BFFF |
| dimgray | rgb(105, 105, 105) | #696969 |
| dimgrey | rgb(105, 105, 105) | #696969 |
| dodgerblue | rgb(30, 144, 255) | #1E90FF |
| firebrick | rgb(178, 34, 34) | #B22222 |
| floralwhite | rgb(255, 250, 240) | #FFFAF0 |
| forestgreen | rgb(34, 139, 34) | #228B22 |
| fuchsia | rgb(255, 0, 255) | #FF00FF |
| gainsboro | rgb(220, 220, 220) | #DCDCDC |
| ghostwhite | rgb(248, 248, 255) | #F8F8FF |
| gold | rgb(255, 215, 0) | #FFD700 |
| goldenrod | rgb(218, 165, 32) | #DAA520 |
| gray | rgb(128, 128, 128) | #808080 |
| green | rgb(0, 128, 0) | #008000 |
| greenyellow | rgb(173, 255, 47) | #ADFF2F |
| grey | rgb(128, 128, 128) | #808080 |
| honeydew | rgb(240, 255, 240) | #F0FFF0 |
| hotpink | rgb(255, 105, 180) | #FF69B4 |
| indianred | rgb(205, 92, 92) | #CD5C5C |
| indigo | rgb(75, 0, 130) | #4B0082 |
| ivory | rgb(255, 255, 240) | #FFFFF0 |
| khaki | rgb(240, 230, 140) | #F0E68C |
| lavender | rgb(230, 230, 250) | #E6E6FA |
| lavenderblush | rgb(255, 240, 245) | #FFF0F5 |
| lawngreen | rgb(124, 252, 0) | #7CFC00 |
| lemonchiffon | rgb(255, 250, 205) | #FFFACD |
| lightblue | rgb(173, 216, 230) | #ADD8E6 |
| lightcoral | rgb(240, 128, 128) | #F08080 |
| lightcyan | rgb(224, 255, 255) | #E0FFFF |
| lightgoldenrodyellow | rgb(250, 250, 210) | #FAFAD2 |
| lightgray | rgb(211, 211, 211) | #D3D3D3 |
| lightgreen | rgb(144, 238, 144) | #90EE90 |
| lightgrey | rgb(211, 211, 211) | #D3D3D3 |
| lightpink | rgb(255, 182, 193) | #FFB6C1 |
| lightsalmon | rgb(255, 160, 122) | #FFA07A |
| lightseagreen | rgb(32, 178, 170) | #20B2AA |
| lightskyblue | rgb(135, 206, 250) | #87CEFA |
| lightslategray | rgb(119, 136, 153) | #778899 |
| lightslategrey | rgb(119, 136, 153) | #778899 |
| lightsteelblue | rgb(176, 196, 222) | #B0C4DE |
| lightyellow | rgb(255, 255, 224) | #FFFFE0 |
| lime | rgb(0, 255, 0) | #00FF00 |
| limegreen | rgb(50, 205, 50) | #32CD32 |
| linen | rgb(250, 240, 230) | #FAF0E6 |
| magenta | rgb(255, 0, 255) | #FF00FF |
| maroon | rgb(128, 0, 0) | #800000 |
| mediumaquamarine | rgb(102, 205, 170) | #66CDAA |
| mediumblue | rgb(0, 0, 205) | #0000CD |
| mediumorchid | rgb(186, 85, 211) | #BA55D3 |
| mediumpurple | rgb(147, 112, 219) | #9370D8 |
| mediumseagreen | rgb(60, 179, 113) | #3CB371 |
| mediumslateblue | rgb(123, 104, 238) | #7B68EE |
| mediumspringgreen | rgb(0, 250, 154) | #00FA9A |
| mediumturquoise | rgb(72, 209, 204) | #48D1CC |
| mediumvioletred | rgb(199, 21, 133) | #C71585 |
| midnightblue | rgb(25, 25, 112) | #191970 |
| mintcream | rgb(245, 255, 250) | #F5FFFA |
| mistyrose | rgb(255, 228, 225) | #FFE4E1 |
| moccasin | rgb(255, 228, 181) | #FFE4B5 |
| navajowhite | rgb(255, 222, 173) | #FFDEAD |
| navy | rgb(0, 0, 128) | #000080 |
| oldlace | rgb(253, 245, 230) | #FDF5E6 |
| olive | rgb(128, 128, 0) | #808000 |
| olivedrab | rgb(107, 142, 35) | #6B8E23 |
| orange | rgb(255, 165, 0) | #FFA500 |
| orangered | rgb(255, 69, 0) | #FF4500 |
| orchid | rgb(218, 112, 214) | #DA70D6 |
| palegoldenrod | rgb(238, 232, 170) | #EEE8AA |
| palegreen | rgb(152, 251, 152) | #98FB98 |
| paleturquoise | rgb(175, 238, 238) | #AFEEEE |
| palevioletred | rgb(219, 112, 147) | #D87093 |
| papayawhip | rgb(255, 239, 213) | #FFEFD5 |
| peachpuff | rgb(255, 218, 185) | #FFDAB9 |
| peru | rgb(205, 133, 63) | #CD853F |
| pink | rgb(255, 192, 203) | #FFC0CB |
| plum | rgb(221, 160, 221) | #DDA0DD |
| powderblue | rgb(176, 224, 230) | #B0E0E6 |
| purple | rgb(128, 0, 128) | #800080 |
| red | rgb(255, 0, 0) | #FF0000 |
| rosybrown | rgb(188, 143, 143) | #BC8F8F |
| royalblue | rgb(65, 105, 225) | #4169E1 |
| saddlebrown | rgb(139, 69, 19) | #8B4513 |
| salmon | rgb(250, 128, 114) | #FA8072 |
| sandybrown | rgb(244, 164, 96) | #F4A460 |
| seagreen | rgb(46, 139, 87) | #2E8B57 |
| seashell | rgb(255, 245, 238) | #FFF5EE |
| sienna | rgb(160, 82, 45) | #A0522D |
| silver | rgb(192, 192, 192) | #C0C0C0 |
| skyblue | rgb(135, 206, 235) | #87CEEB |
| slateblue | rgb(106, 90, 205) | #6A5ACD |
| slategray | rgb(112, 128, 144) | #708090 |
| slategrey | rgb(112, 128, 144) | #708090 |
| snow | rgb(255, 250, 250) | #FFFAFA |
| springgreen | rgb(0, 255, 127) | #00FF7F |
| steelblue | rgb(70, 130, 180) | #4682B4 |
| tan | rgb(210, 180, 140) | #D2B48C |
| teal | rgb(0, 128, 128) | #008080 |
| thistle | rgb(216, 191, 216) | #D8BFD8 |
| tomato | rgb(255, 99, 71) | #FF6347 |
| turquoise | rgb(64, 224, 208) | #40E0D0 |
| violet | rgb(238, 130, 238) | #EE82EE |
| wheat | rgb(245, 222, 179) | #F5DEB3 |
| white | rgb(255, 255, 255) | #FFFFFF |
| whitesmoke | rgb(245, 245, 245) | #F5F5F5 |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| yellowgreen | rgb(154, 205, 50) | #9ACD32 |
¿Conoces más códigos de colores? Te invitamos a que los pongas en los comentarios para así ampliar la lista.