Colores web
Los colores web son aquellos colores que aparecen en una página web. Se pueden basar sobre los sistemas de color RGB o HSL. En el código CSS (y antiguamente en HTML) son especificados como valores numéricos, aunque hay colores que también pueden utilizarse por sus nombres en inglés.[1]
RGBA
editarFundamento teórico
editarUn triplete hexadecimal es un número hexadecimal de seis dígitos y tres bytes que se utiliza en HTML, CSS, SVG y otras aplicaciones informáticas para representar colores.
La paleta de colores RGB (RVA en español) consta, básicamente, de tres colores primarios aditivos: Rojo, Verde, Azul.
Estos colores primarios aditivos, en HTML, están representados por tres pares hexadecimales del tipo RR-GG-BB según el siguiente formato:
Los valores que puede adaptar cada uno de los tres pares hexadecimales van del 00 (0 decimal) al FF (255 decimal). Cuanto mayor sea el valor del par, tanto mayor será también la intensidad (matiz, brillo o claridad) del color correspondiente a ese par (y viceversa). Esto implica que el extremo inferior de la escala cromática parte de una intensidad de color mínima (nulo = par 00), pasa por una intensidad de color media (mediano = par 80 [128 decimal]) hasta llegar a una intensidad de color máxima (máximo = par FF). El grado de más alta pureza (absoluto) de un color primario aditivo estará determinado por la presencia del mismo junto con la ausencia total (nulidad = 00) de los otros dos colores primarios aditivos.
Además de estos tres colores primarios aditivos (RGB), existen tres colores primarios sustractivos o CMY (CMA en español): Cian, Magenta, Amarillo. Estos colores surgen de la siguiente combinación (mezcla) de los primarios aditivos:
- Cian = Verde + Azul
- Magenta = Azul + Rojo
- Amarillo = Rojo + Verde
En cuanto a su grado de pureza, ocurre algo inverso a los colores primarios aditivos, ya que su pureza absoluta estará determinada por la nulidad de uno de sus componentes y la presencia en la misma proporción de los otros dos. Los colores complementarios de los primarios, tanto aditivos como sustractivos, serán recíprocamente:
- Rojo ↔ Cian
- Verde ↔ Magenta
- Azul ↔ Amarillo
La combinación simultánea de los tres primarios aditivos en su máxima intensidad produce el blanco (#FFFFFF). Contrariamente, la combinación simultánea de los tres primarios sustractivos nulos produce el negro (#000000). La combinación de dos colores mutuamente complementarios producirá el blanco en la síntesis aditiva (con luz), de igual modo que la sustracción (absorción) (con tintas o filtros) de ambos dará lugar al negro (ausencia total de luz). Así, p. ej., el rojo (#FF0000) más su complemetario que es el cian (#00FFFF), generan el blanco al ser mezclados aditivamente, y el negro al ser mezclados sustractivamente. De hecho, el cian no es otra cosa que la sustracción del rojo al blanco. Obsérvese el siguiente gráfico:
Por su parte, el gris medio (#808080), que es el exacto término medio entre el negro y el blanco, se obtendrá a partir de la combinación simultánea de los tres primarios aditivos en mediana proporción. Análogamente, el gris claro (entre el gris medio y el blanco) se obtendrá a partir de la combinación #C0C0C0, mientras que el gris oscuro (entre el gris medio y el negro) mediante #404040. De este modo, tenemos que el resto de los colores, que están comprendidos entre el negro (#000000) y el blanco (#FFFFFF), surgen de la combinación de los tres primarios aditivos en distintos grados. En otras palabras: bastará con reemplazar cada uno de los pares RR-GG-BB por un valor comprendido entre 00 y FF para obtener cualquiera de los colores posibles.
Existen 16 777 216 combinaciones distintas en el sistema RGB de 24 bits y, por lo tanto, 16 777 216 colores: 256 × 256 × 256 = 16 777 216. En la práctica, sin embargo, puede haber algunas combinaciones que no sean válidas. Eso pasaba antiguamente, cuando la paleta de colores más grande tenía 256 colores (8 bits). Por eso, existen 216 colores seguros, que serán visibles en cualquier dispositivo sin necesidad de tramado.
HSL
editarEn el sistema de colores HSL los colores se miden por tres parámetros: hue (matiz o tono), saturation (saturación), y lightness (luminosidad), que determinan la posición de cualquier color en el cilindro de colores HSL. El primer parámetro (matiz) es el ángulo del color alrededor del eje del cilindro, con origen en el rojo, y aumentando en el orden: rojo (0º) en el origen, amarillo (60º) a un sexto, verde (120º) a un tercio, cian (180º) a un medio, azul (240º) a dos tercios, magenta (300º) a cinco sextos, finalizandose el ciclo con rojo de nuevo, a los 360º (orden R, G, B). El segundo parámetro (saturación) es la distancia horizontal desde el color hasta el eje (o lo que es lo mismo, la distancia desde un color hasta un punto en el eje con su misma luminosidad), y describe que tan "fuerte" o "intenso" un color es independientemente de su luminosidad, y el tercer parámetro (luminosidad) es la distancia vertical (altura) desde la base del cilindro hasta un color dado, y describe que tan claro u oscuro un color es (menor luminosidad = color más oscuro, mayor luminosidad = color más claro). El eje del cilindro es la escala de grises o escala acromática, que va del negro al blanco inclusive. En este sistema, todos los colores que se encuentren en el mismo plano perpendicular al eje del cilindro tendrán una misma luminosidad. Además, todos los colores con luminosidad = 0 % son equivalentes al negro, y todos los colores con luminosidad = 100 % son equivalentes al blanco, independientemente de su matiz o saturación.
Alfa
editarUn color puede mostrarse con una opacidad determinada en pantalla, que se determina por el parámetro alfa, que, añadido a RGB y HSL, los convierte en RGBa y HSLa.
Equivalencias
editarEntre los sistemas web existen algunas contradicciones, presentadas a continuación:
| Nombre | Colores X11 | W3C / CSS / HTML / VGA | ||
|---|---|---|---|---|
| Código hex | Muestra | Muestra | Código hex | |
| Gray - Gris | #BEBEBE | #808080 | ||
| Green - Verde | #00FF00 | #008000 | ||
| Maroon - Granate o rojo oscuro | #B03060 | #800000 | ||
| Purple - Púrpura | #A020F0 | #800080 | ||
| Nombre X11 | Color | Nombre W3C / CSS / HTML / VGA | |
|---|---|---|---|
| Código hex | Muestra | ||
| Gray - Gris | #C0C0C0 | Silver - Plateado | |
| Green - Verde | #00FF00 | Lime - Lima | |
| Fuchsia - Fucsia | #FF00FF | Magenta | |
| Aqua - Acua | #00FFFF | Cyan - Cian | |
Tabla de colores
editarLa siguiente tabla de colores ha sido adoptada para su uso por W3C/CSS,[2] HTML/X11,[3] Mozilla,[4] SVG,[5] Internet Explorer (IE)/Microsoft Windows,[6] etc.
| Nombre HTML | Código hex | Valores RGB |
Valores HSL |
Valores HSV |
|---|---|---|---|---|
| Colores rojos | ||||
| LightCoral | F08080 | 240 128 128 | 0° 79% 72% | 0° 47% 94% |
| Salmon | FA8072 | 250 128 114 | 6° 93% 71% | 6° 55% 98% |
| IndianRed | CD5C5C | 205 92 92 | 0° 53% 58% | 0° 55% 80% |
| Red | FF0000 | 255 0 0 | 0° 100% 50% | 0° 100% 100% |
| Crimson | DC143C | 220 20 60 | 348° 83% 47% | 348° 91% 86% |
| FireBrick | B22222 | 178 34 34 | 0° 68% 42% | 0° 81% 71% |
| Brown | 964B00 | 150 75 0 | 0° 75% 65% | 0° 58% 91% |
| DarkRed | 8B0000 | 139 0 0 | 0° 100% 27% | 0° 100% 54% |
| Maroon | 800000 | 128 0 0 | 0° 100% 25% | 0° 100% 50% |
| Colores naranjas | ||||
| PapayaWhip | FFEFD5 | 255 239 213 | 37° 100% 92% | 37° 16% 100% |
| BlanchedAlmond | FFEBCD | 255 235 205 | 36° 100% 90% | 36° 20% 100% |
| Bisque | FFE4C4 | 255 228 196 | 33° 100% 88% | 33° 24% 100% |
| Moccasin | FFE4B5 | 255 228 181 | 38° 100% 85% | 38° 30% 100% |
| PeachPuff | FFDAB9 | 255 218 185 | 28° 100% 86% | 28° 28% 100% |
| NavajoWhite | FFDEAD | 255 222 173 | 36° 100% 84% | 36° 32% 100% |
| LightSalmon | FFA07A | 255 160 122 | 17° 100% 74% | 17° 52% 100% |
| DarkSalmon | E9967A | 233 150 122 | 15° 72% 70% | 15° 47% 92% |
| Orange | FF8000 | 255 128 0 | 39° 100% 50% | 24° 100% 100% |
| DarkOrange | FF8C00 | 255 140 0 | 33° 100% 50% | 33° 100% 100% |
| Coral | FF7F50 | 255 127 80 | 16° 100% 66% | 16° 68% 100% |
| Tomato | FF6347 | 255 99 71 | 9° 100% 64% | 9° 72% 100% |
| OrangeRed | FF4500 | 255 69 0 | 16° 100% 50% | 16° 100% 100% |
| Colores marrones | ||||
| Wheat | F5DEB3 | 245 222 179 | 39° 77% 83% | 39° 27% 96% |
| BurlyWood | DEB887 | 222 184 135 | 34° 57% 70% | 34° 39% 87% |
| Tan | D2B48C | 210 180 140 | 34° 44% 69% | 34° 33% 83% |
| SandyBrown | F4A460 | 244 164 96 | 28° 87% 67% | 28° 60% 96% |
| Goldenrod | DAA520 | 218 165 32 | 43° 74% 49% | 43° 85% 85% |
| Peru | CD853F | 205 133 63 | 30° 59% 53% | 30° 69% 81% |
| DarkGoldenrod | B8860B | 184 134 11 | 43° 89% 38% | 43° 94% 72% |
| Chocolate | D2691E | 210 105 30 | 25° 75% 47% | 25° 86% 82% |
| Sienna | A0522D | 160 82 45 | 19° 56% 40% | 19° 72% 62% |
| SaddleBrown | 8B4513 | 139 69 19 | 25° 76% 31% | 25° 86% 55% |
| Colores amarillos | ||||
| LightYellow | FFFFE0 | 255 255 224 | 60° 100% 94% | 60° 12% 100% |
| Cornsilk | FFF8DC | 255 248 220 | 48° 100% 93% | 48° 14% 100% |
| LemonChiffon | FFFACD | 255 250 205 | 54° 100% 90% | 54° 20% 100% |
| LightGoldenrodYellow | FAFAD2 | 250 250 210 | 60° 80% 90% | 60° 16% 98% |
| PaleGoldenrod | EEE8AA | 238 232 170 | 55° 67% 80% | 55° 29% 93% |
| Khaki | F0E68C | 240 230 140 | 54° 77% 75% | 54° 41% 94% |
| Yellow | FFFF00 | 255 255 0 | 60° 100% 50% | 60° 100% 100% |
| Gold | FFD700 | 255 215 0 | 51° 100% 50% | 51° 100% 100% |
| DarkKhaki | BDB76B | 189 183 107 | 56° 38% 58% | 56° 43% 74% |
| Olive | 808000 | 128 128 0 | 60° 100% 25% | 60° 100% 50% |
| Colores verdes amarillos | ||||
| GreenYellow | ADFF2F | 173 255 47 | 84° 100% 59% | 84° 82% 100% |
| Chartreuse | 7FFF00 | 127 255 0 | 90° 100% 50% | 90° 100% 100% |
| LawnGreen | 7CFC00 | 124 252 0 | 90° 100% 49% | 90° 100% 98% |
| YellowGreen | 9ACD32 | 154 205 50 | 80° 61% 50% | 80° 76% 81% |
| OliveDrab | 6B8E23 | 107 142 35 | 80° 60% 35% | 80° 75% 56% |
| DarkOliveGreen | 556B2F | 85 107 47 | 82° 39% 30% | 82° 56% 42% |
| Colores verdes | ||||
| PaleGreen | 98FB98 | 152 251 152 | 120° 93% 79% | 120° 40% 99% |
| LightGreen | 90EE90 | 144 238 144 | 120° 73% 75% | 120° 39% 93% |
| MediumSpringGreen | 00FA9A | 0 250 154 | 157° 100% 49% | 157° 100% 98% |
| SpringGreen | 00FF7F | 0 255 127 | 150° 100% 50% | 150° 100% 100% |
| Lime | C0FF00 | 192 255 0 | 120° 100% 50% | 120° 100% 100% |
| DarkSeaGreen | 8FBC8F | 143 188 143 | 120° 25% 65% | 120° 24% 74% |
| LimeGreen | 32CD32 | 50 205 50 | 120° 61% 50% | 120° 76% 81% |
| MediumSeaGreen | 3CB371 | 60 179 113 | 147° 50% 47% | 147° 67% 71% |
| SeaGreen | 2E8B57 | 46 139 87 | 146° 50% 36% | 146° 67% 54% |
| ForestGreen | 228B22 | 34 139 34 | 120° 61% 34% | 120° 76% 55% |
| Green | 00FF00 | 0 255 0 | 120° 100% 25% | 120° 100% 50% |
| DarkGreen | 006400 | 0 100 0 | 120° 100% 20% | 120° 100% 40% |
| Colores acianos (azul verdes) | ||||
| LightCyan | E0FFFF | 224 255 255 | 180° 100% 94% | 180° 12% 100% |
| PaleTurquoise | AFEEEE | 175 238 238 | 180° 65% 81% | 180° 26% 93% |
| Aquamarine | 7FFFD4 | 127 255 212 | 160° 100% 75% | 160° 50% 100% |
| Aqua / Cyan | 00FFFF | 0 255 255 | 180° 100% 50% | 180° 100% 100% |
| Turquoise | 40E0D0 | 64 224 208 | 174° 72% 56% | 174° 72% 88% |
| MediumTurquoise | 48D1CC | 72 209 204 | 178° 60% 55% | 178° 66% 82% |
| DarkTurquoise | 00CED1 | 0 206 209 | 181° 100% 82% | 181° 36% 100% |
| MediumAquamarine | 66CDAA | 102 205 170 | 160° 51% 60% | 160° 51% 80% |
| LightSeaGreen | 20B2AA | 32 178 170 | 177° 70% 41% | 177° 82% 70% |
| CadetBlue | 5F9EA0 | 95 158 160 | 182° 41% 63% | 182° 39% 78% |
| DarkCyan | 008B8B | 0 139 139 | 180° 100% 27% | 180° 100% 54% |
| Teal | 008080 | 0 128 128 | 180° 100% 25% | 180° 100% 50% |
| Colores azules | ||||
| Lavender | E6E6FA | 230 230 250 | 240° 67% 94% | 240° 8% 98% |
| BlueWeb | CEE7FF | 206 231 255 | 209° 100% 90% | 209° 20% 100% |
| PowderBlue | B0E0E6 | 176 224 230 | 187° 52% 80% | 187° 23% 90% |
| LightBlue | ADD8E6 | 173 216 230 | 195° 53% 79% | 195° 25% 90% |
| LightSkyBlue | 87CEFA | 135 206 250 | 203° 92% 75% | 203° 47% 98% |
| SkyBlue | 87CEEB | 135 206 235 | 197° 71% 73% | 197° 42% 92% |
| LightSteelBlue | B0C4DE | 176 196 222 | 214° 41% 78% | 214° 21% 87% |
| DeepSkyBlue | 00BFFF | 0 191 255 | 195° 100% 50% | 195° 100% 100% |
| CornflowerBlue | 6495ED | 100 149 237 | 219° 79% 66% | 219° 58% 93% |
| DodgerBlue | 1E90FF | 30 144 255 | 210° 88% 100% | 210° 0% 100% |
| SteelBlue | 4682B4 | 70 130 180 | 207° 61% 71% | 207° 40% 89% |
| RoyalBlue | 4169E1 | 65 105 225 | 225° 73% 57% | 225° 71% 88% |
| Blue | 0000FF | 0 0 255 | 240° 100% 100% | 240° 0% 100% |
| MediumBlue | 0000CD | 0 0 205 | 240° 100% 80% | 240° 40% 100% |
| DarkBlue | 00008B | 0 0 139 | 240° 100% 55% | 240° 90% 100% |
| Navy | 000080 | 0 0 128 | 240° 100% 50% | 240° 100% 100% |
| MidnightBlue | 191970 | 25 25 112 | 240° 78% 44% | 240° 88% 78% |
| DarkSlateBlue | 483D8B | 72 61 139 | 248° 39% 39% | 248° 56% 54% |
| Colores violetas y púrpuras | ||||
| Thistle | D8BFD8 | 216 191 216 | 300° 24% 80% | 300° 11% 85% |
| Plum | DDA0DD | 221 160 221 | 300° 47% 75% | 300° 27% 87% |
| Violet | EE82EE | 128 0 255 | 300° 76% 72% | 300° 46% 93% |
| Orchid | DA70D6 | 218 112 214 | 302° 59% 65% | 302° 48% 86% |
| Fuchsia / Magenta | FF00FF | 255 0 255 | 300° 100% 50% | 300° 100% 100% |
| MediumPurple | 9370DB | 147 112 219 | 260° 60% 65% | 260° 49% 86% |
| MediumOrchid | BA55D3 | 186 85 211 | 288° 59% 58% | 288° 60% 83% |
| MediumSlateBlue | 7B68EE | 123 104 238 | 249° 80% 67% | 249° 57% 93% |
| SlateBlue | 6A5ACD | 106 90 205 | 248° 53% 58% | 248° 55% 80% |
| BlueViolet | 8A2BE2 | 138 43 226 | 271° 76% 53% | 271° 81% 89% |
| DarkViolet | 9400D3 | 148 0 211 | 282° 100% 41% | 282° 100% 82% |
| DarkOrchid | 9932CC | 153 50 204 | 280° 61% 50% | 280° 76% 81% |
| DarkMagenta | 8B008B | 139 0 139 | 300° 100% 27% | 300° 100% 54% |
| Purple | 800080 | 192 0 255 | 300° 100% 25% | 300° 100% 50% |
| Indigo | 4000FF | 64 0 255 | 275° 100% 25% | 275° 100% 50% |
| Colores rosas | ||||
| MistyRose | FFE4E1 | 255 228 225 | 6° 100% 94% | 6° 12% 100% |
| Pink | FFC0CB | 255 192 203 | 350° 100% 88% | 350° 24% 100% |
| LightPink | FFB6C1 | 255 182 193 | 351° 100% 86% | 351° 28% 100% |
| HotPink | FF69B4 | 255 105 180 | 330° 100% 71% | 330° 58% 100% |
| RosyBrown | BC8F8F | 188 143 143 | 0° 25% 65% | 0° 24% 74% |
| PaleVioletRed | DB7093 | 219 112 147 | 340° 60% 65% | 340° 49% 86% |
| DeepPink | FF1493 | 255 20 147 | 328° 100% 54% | 328° 92% 100% |
| MediumVioletRed | C71585 | 199 21 133 | 322° 81% 43% | 322° 90% 78% |
| Colores blancos | ||||
| White | FFFFFF | 255 255 255 | —° —% 100% | —° 0% 100% |
| WhiteSmoke | F5F5F5 | 245 245 245 | —° 0% 96% | —° 0% 96% |
| Snow | FFFAFA | 255 250 250 | 0° 2% 100% | 0° 0% 100% |
| Seashell | FFF5EE | 255 245 238 | 25° 100% 97% | 25° 6% 100% |
| Linen | FAF0E6 | 250 240 230 | 30° 67% 94% | 30° 8% 98% |
| AntiqueWhite | FAEBD7 | 250 235 215 | 34° 78% 91% | 34° 14% 98% |
| OldLace | FDF5E6 | 253 245 230 | 39° 85% 95% | 39° 9% 99% |
| FloralWhite | FFFAF0 | 255 250 240 | 40° 100% 97% | 40° 6% 100% |
| Ivory | FFFFF0 | 255 255 240 | 60° 100% 97% | 60° 6% 100% |
| Beige | F5F5DC | 245 245 220 | 60° 56% 91% | 60° 10% 96% |
| Honeydew | F0FFF0 | 240 255 240 | 120° 6% 100% | 120° 0% 100% |
| MintCream | F5FFFA | 245 255 250 | 150° 4% 100% | 150° 0% 100% |
| Azure | F0FFFF | 240 255 255 | 180° 6% 100% | 180° 0% 100% |
| AliceBlue | F0F8FF | 240 248 255 | 208° 100% 97% | 208° 6% 100% |
| GhostWhite | F8F8FF | 248 248 255 | 240° 100% 99% | 240° 2% 100% |
| LavenderBlush | FFF0F5 | 255 240 245 | 340° 100% 97% | 340° 6% 100% |
| Colores grises | ||||
| Gainsboro | DCDCDC | 220 220 220 | —° 0% 86% | —° 0% 86% |
| LightGrey | D3D3D3 | 211 211 211 | —° 0% 83% | —° 0% 83% |
| Silver | C0C0C0 | 192 192 192 | —° 0% 75% | —° 0% 75% |
| DarkGray | 363737 | 36 37 37 | —° 0% 66% | —° 0% 66% |
| LightSlateGray | 778899 | 119 136 153 | 210° 22% 60% | 210° 26% 69% |
| SlateGray | 708090 | 112 128 144 | 210° 22% 56% | 210° 29% 66% |
| Gray | 808080 | 128 128 128 | —° 0% 50% | —° 0% 50% |
| DimGray | 696969 | 105 105 105 | —° 0% 41% | —° 0% 41% |
| DarkSlateGray | 2F4F4F | 47 79 79 | 180° 25% 25% | 180° 40% 31% |
| Black | 000000 | 0 0 0 | —° —% 0% | —° —% 0% |
Véase también
editarReferencias
editar- ↑ «CSS Color Module Level 4». www.w3.org. Consultado el 22 de diciembre de 2021.
- ↑ CSS Color Module Level 3 W3C Recommendation 2011
- ↑ X11 Color Names Archivado el 28 de octubre de 2016 en Wayback Machine. HTML Portal 2016
- ↑ Mozilla ColorNames.txt
- ↑ Scalable Vector Graphics Color Names 2015
- ↑ Colors by Name for Windows Internet Explorer 8, Microsoft 2016
Enlaces externos
editar- Códigos de colores hexadecimales (mezclador).
- Colores HTML (en inglés).
- Herramienta que convierte los códigos de colores: hex rgb hsl (en español).
- Selector de color HTML
Datos: Q376346