Ver fuente

En este artículo se describen los fundamentos del sistema de color es Modelo de color RGB con vistas a su posterior empleo en la páginas HTML.
== Fundamento teórico ==
La paleta de colores RGB (RVA en español) consta, básicamente, de tres colores '''primarios aditivos''': <span style="color:#FF0000;">'''R'''ojo</span><span style="color:#00FF00;">-'''V'''erde</span>-<span style="color:#0000FF;">'''A'''zul</span>.
Estos colores primarios aditivos, en HTML, están representados por tres pares hexadecimal es del tipo 0xHH-HH-HH según el siguiente formato: (los colores básicos o primarios, no aquellos que son resultantes de mezclas)

<center>'''<nowiki>#RRGGBB (= #RRVVAA)</nowiki>'''</center>
Los valores que puede adoptar cada uno de los tres pares hexadecimales van del 0x00 (0 decimal) al 0xFF (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 (grado) de color mínima ('''nulo''' = par 0x00), pasa por una intensidad de color media ('''mediano''' = par 0x80 [128 decimal]) hasta llegar a una intensidad de color máxima ('''saturado''' = par 0xFF).
El grado de más alta pureza ('''absoluto''') de un color primario aditivo estará determinado por la presencia total del mismo ('''saturación''' = 0xFF) junto con la ausencia total ('''nulidad''' = 0x00) de los otros dos colores primarios aditivos.

Además de estos tres colores primarios aditivos (RVA), existen tres colores '''primarios sustractivos''' o CMY (CMA en español): <span style="color:#00FFFF;">'''C'''ian</span>-
<span style="color:#FF00FF;">'''M'''agenta</span>-<font color="#FFFF00">'''A'''marillo</font>. Estos colores surgen de la siguiente '''combinación''' (mezcla) de los primarios aditivos:

<center>
Cian = Verde + Azul

Magenta = Rojo + Azul
Amarillo = Rojo + Verde
</center>

En cuanto a su grado de pureza, ocurre algo inverso a los colores primarios aditivos, ya que el grado '''absoluto''' estará determinado por la '''nulidad''' de uno de sus componentes y la '''saturación''' de los otros dos.
Los colores complementarios de los primarios, tanto aditivos como sustractivos, serán recíprocamente:

<center>
Rojo ↔ Cian

Verde ↔ Magenta
Azul ↔ Amarillo
</center>

La combinación simultánea de los tres primarios aditivos saturados produce el blanco (0xFFFFFF). Contrariamente, la combinación simultánea de los tres primarios sustractivos '''nulos''' produce el negro (0x000000).
Resulta claro también que la combinación de dos colores mutuamente complementarios producirá el blanco, de igual modo que la sustracción (absorción) de ambos dará lugar al negro ('''ausencia total de color'''). Así, p. ej., el rojo (0xFF0000) más su complemetario que es el cian (0x00FFFF), generan el blanco (0xFFFFFF). De hecho, el cian no es otra cosa que la sustracción del rojo al blanco. Obsérvense los siguientes gráficos:

<center>
[[Archivo:synthese1.png|242px]]
[[Archivo:synthese2.png|242px]]
</center>

<br style="clear:both;">
Por su parte, el gris mediano (0x808080), 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 '''medianos'''. Análogamente, el gris '''semisaturado''' (claro) se obtendrá a partir de la combinación 0xC0C0C0, mientras que el gris '''seminulo''' (oscuro) mediante 0x404040.
De este modo, tenemos que el resto de los colores, que están comprendidos entre el negro (0x000000) y el blanco (0xFFFFFF), surgen de la combinación de los tres primarios aditivos en distintos grados. En otras palabras: bastará con reemplazar cada uno de los pares 0xHH-HH-HH por un valor comprendido entre 0x00 y 0xFF para obtener cualquiera de los colores posibles.

Aunque en la práctica, puede haber algunas combinaciones que no sean válidas. Eso pasaba antiguamente, cuando la paleta de colores más grande tenía 256 colores. Por eso, existen 216 colores seguros, que serán visibles en cualquier dispositivo sin necesidad de tramado. (otros 40 para el sistema), de los cuales algunos se muestran aquí.

== Tabla de colores ==
{|
|- valign="top"
|
{|border="0"
!style="background:lightgrey;"            | Nombre HTML
!colspan=1 style="background:lightgrey;"| Código <br/>hex<br/> R &nbsp;G &nbsp;B
!colspan=1 style="background:lightgrey;"| Código <br/>decimal<br />R &nbsp;G &nbsp;B
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores <font color=slategray>rojos'''</font></big>
|- style="background:indianred; color:white"
|IndianRed  ||CD5C5C|| 205  92  92
|- style="background:lightcoral; color:black;"
|LightCoral ||F08080||240 128 128
|- style="background:salmon; color:black;"
|Salmon     ||FA8072||250 128 114
|- style="background:darksalmon; color:black;"
|DarkSalmon     ||E9967A||233 150 122
|- style="background:lightsalmon; color:black;"
|LightSalmon     ||FFA07A||255 160 122
|- style="background:crimson; color:white; color:white;"
|Crimson       ||DC143C||220  20  60
|- style="background:red; color:white;"
|Red            ||FF0000||255   0   0
|- style="background:firebrick; color:white;"
|FireBrick      ||B22222||178  34  34
|- style="background:darkred; color:white;"
|DarkRed        ||8B0000||139   0   0
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores <font color=slategray>rosas'''</font></big>
|- style="background:pink; color:black;"
|Pink           ||FFC0CB||255 192 203
|- style="background:lightpink; color:black;"
|LightPink      ||FFB6C1||255 182 193
|- style="background:hotpink; color:white;"
|HotPink        ||FF69B4||255 105 180
|- style="background:deeppink; color:white;"
|DeepPink       ||FF1493||255  20 147
|- style="background:mediumvioletred; color:white;"
|MediumVioletRed||C71585||199  21 133
|- style="background:palevioletred; color:white;"
|PaleVioletRed  ||DB7093||219 112 147
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores <font color=slategray>naranjas'''</font></big>
|- style="background:lightsalmon; color:black;"
||LightSalmon    ||FFA07A||255 160 122
|-  style="background:coral; color:white;"
|Coral          ||FF7F50||255 127  80
|- style="background:tomato; color:white;"
|Tomato         ||FF6347||255  99  71
|- style="background:orangered; color:white;"
|OrangeRed      ||FF4500||255  69   0
|- style="background:darkorange; color:white;"
|DarkOrange     ||FF8C00||255 140   0
|- style="background:orange; color:white;"
|Orange         ||FFA500||255 165   0
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores <font color=slategray>amarillos'''</font></big>
|- style="background:gold; color:black;"
|Gold           ||FFD700||255 215   0
|- style="background:yellow; color:black;"
|Yellow         ||FFFF00||255 255   0
|- style="background:lightyellow; color:black;"
|LightYellow    ||FFFFE0||255 255 224 
|- style="background:lemonchiffon; color:black;"
|LemonChiffon  ||FFFACD||255 250 205 
|- style="background:lightgoldenrodyellow; color:black;"
|LightGoldenrodYellow||FAFAD2||250 250 210 
|- style="background:papayawhip; color:black;"
|PapayaWhip     ||FFEFD5||255 239 213 
|- style="background:moccasin; color:black;"
|Moccasin       ||FFE4B5||255 228 181 
|- style="background:peachpuff; color:black;"
|PeachPuff      ||FFDAB9||255 218 185 
|- style="background:palegoldenrod; color:black;"
|PaleGoldenrod  ||EEE8AA||238 232 170 
|- style="background:khaki; color:black;"
|Khaki          ||F0E68C||240 230 140 
|- style="background:darkkhaki; color:white;"
|DarkKhaki      ||BDB76B||189 183 107 
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores <font color=slategray>púrpuras'''</font> </big>
|- style="background:lavender; color:black;"
|Lavender       ||E6E6FA||230 230 250 
|- style="background:thistle; color:white;"
|Thistle ||D8BFD8||216 191 216 
|- style="background:plum; color:white;"
|Plum           ||DDA0DD||221 160 221 
|- style="background:violet; color:white;"
|Violet         ||EE82EE||238 130 238 
|- style="background:orchid; color:white;"
|Orchid         ||DA70D6||218 112 214
|- style="background:magenta; color:white;"
|Fuchsia / Magenta||FF00FF||255   0 255 
|- style="background:mediumorchid; color:white;"
|MediumOrchid   ||BA55D3||186  85 211 
|- style="background:mediumpurple; color:white;"
|MediumPurple   ||9370DB||147 112 219 
|- style="background:blueviolet; color:white;"
|BlueViolet     ||8A2BE2||138  43 226 
|- style="background:darkviolet; color:white;"
|DarkViolet     ||9400D3||148   0 211 
|- style="background:darkorchid; color:white;"
|DarkOrchid     ||9932CC||153  50 204 
|- style="background:darkmagenta; color:white;"
|DarkMagenta    ||8B008B||139   0 139 
|- style="background:purple; color:white;"
|Purple         ||800080||128   0 128 
|- style="background:indigo; color:white;"
|Indigo         ||4B0082|| 75   0 130  
|- style="background:slateblue; color:white;"
|SlateBlue      ||6A5ACD||106  90 205
|- style="background:darkslateblue; color:white;"
|DarkSlateBlue  ||483D8B|| 72  61 139
|}
|
{|
!style="background:lightgrey;"          | Nombre HTML
!colspan=1 style="background:lightgrey;"| Código <br/>hex<br/> R &nbsp;G &nbsp;B
!colspan=1 style="background:lightgrey;"| Código <br/>decimal<br/> R &nbsp;G &nbsp;B
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores  <font color=slategray>verdes'''</font></big>
|- style="background:greenyellow; color:black;"
|GreenYellow    ||ADFF2F||173 255  47 
|- style="background:chartreuse; color:black;"
|Chartreuse     ||7FFF00||127 255   0 
|- style="background:lawngreen; color:black;"
|LawnGreen      ||7CFC00||124 252   0 
|- style="background:lime; color:black;"
|Lime           ||00FF00||  0 255   0  
|- style="background:limegreen; color:black;"
|LimeGreen      ||32CD32|| 50 205  50
|- style="background:palegreen; color:black;"
|PaleGreen      ||98FB98||152 251 152 
|- style="background:lightgreen; color:black;"
|LightGreen     ||90EE90||144 238 144 
|- style="background:mediumspringgreen; color:black;"
|MediumSpringGreen||00FA9A||  0 250 154 
|- style="background:springgreen; color:black;"
|SpringGreen    ||00FF7F||  0 255 127 
|- style="background:mediumseagreen; color:white;"
|MediumSeaGreen ||3CB371|| 60 179 113 
|- style="background:seagreen; color:white;"
|SeaGreen       ||2E8B57|| 46 139  87 
|- style="background:forestgreen; color:white;"
|ForestGreen    ||228B22|| 34 139  34 
|- style="background:green; color:white;"
|Green          ||008000||  0 128   0
|- style="background:darkgreen; color:white;"
|DarkGreen      ||006400||  0 100   0 
|- style="background:yellowgreen; color:white;"
|YellowGreen    ||9ACD32||154 205  50
|- style="background:olivedrab; color:white;"
|OliveDrab      ||6B8E23||107 142  35 
|- style="background:olive; color:white;"
|Olive          ||808000||128 128   0 
|- style="background:darkolivegreen; color:white;"
|DarkOliveGreen ||556B2F|| 85 107  47
|- style="background:mediumaquamarine; color:black;"
|MediumAquamarine||66CDAA||102 205 170 
|- style="background:darkseagreen; color:white;"
|DarkSeaGreen  ||8FBC8F||143 188 143 
|- style="background:lightseagreen; color:white;"
|LightSeaGreen  ||20B2AA|| 32 178 170 
|- style="background:darkcyan; color:white;"
|DarkCyan       ||008B8B||  0 139 139 
|- style="background:teal; color:white;"
|Teal           ||008080||  0 128 128 
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores  <font color=slategray>azules'''</font></big>
|- style="background:cyan; color:black;"
|Aqua/Cyan    ||00FFFF||  0 255 255
|- style="background:lightcyan; color:black;"
|LightCyan      ||E0FFFF||224 255 255 
|- style="background:paleturquoise; color:black;"
|PaleTurquoise  ||AFEEEE||175 238 238 
|- style="background:aquamarine; color:black;"
|Aquamarine    ||7FFFD4||127 255 212 
|- style="background:turquoise; color:black;"
|Turquoise      ||40E0D0|| 64 224 208 
|- style="background:mediumturquoise; color:white;"
|MediumTurquoise ||48D1CC|| 72 209 204 
|- style="background:darkturquoise; color:white;"
|DarkTurquoise||00CED1||  0 206 209  
|- style="background:cadetblue; color:white;"
|CadetBlue      ||5F9EA0|| 95 158 160 
|- style="background:steelblue; color:white;"
|SteelBlue   ||4682B4|| 70 130 180
|- style="background:lightsteelblue; color:black;"
|LightSteelBlue ||B0C4DE||176 196 222  
|- style="background:powderblue; color:black;"
|PowderBlue     ||B0E0E6||176 224 230 
|- style="background:lightblue; color:black;"
|LightBlue      ||ADD8E6||173 216 230 
|- style="background:skyblue; color:black;"
|SkyBlue        ||87CEEB||135 206 235 
|- style="background:lightskyblue; color:black;"
|LightSkyBlue||87CEFA||135 206 250 
|- style="background:deepskyblue; color:white;"
|DeepSkyBlue  ||00BFFF||  0 191 255  
|- style="background:dodgerblue; color:white;"
|DodgerBlue     ||1E90FF|| 30 144 255
|- style="background:cornflowerblue; color:white;"
|CornflowerBlue||6495ED||100 149 237
|- style="background:mediumslateblue; color:white;"
|MediumSlateBlue||7B68EE||123 104 238 
|- style="background:royalblue; color:white;"
|RoyalBlue      ||4169E1|| 65 105 225 
|- style="background:blue; color:white;"
|Blue           ||0000FF||  0   0 255 
|- style="background:mediumblue; color:white;"
|MediumBlue     ||0000CD||  0   0 205 
|- style="background:darkblue; color:white;"
|DarkBlue       ||00008B||  0   0 139 
|- style="background:navy; color:white;"
|Navy           ||000080||  0   0 128 
|- style="background:midnightblue; color:white;"
|MidnightBlue   ||191970|| 25  25 112 
|}
|
{|
!style="background:lightgrey;"          | Nombre HTML
!colspan=1 style="background:lightgrey;"| Código <br/>hex<br/> R &nbsp;G &nbsp;B
!colspan=1 style="background:lightgrey;"| Código <br/>decimal<br/> R &nbsp;G &nbsp;B
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores <font color=slategray>marrones'''</font></big>
|- style="background:cornsilk; color:black;"
|Cornsilk       ||FFF8DC||255 248 220 
|- style="background:blanchedalmond; color:black;"
|BlanchedAlmond ||FFEBCD||255 235 205 
|- style="background:bisque; color:black;"
|Bisque         ||FFE4C4||255 228 196 
|- style="background:navajowhite; color:black;"
|NavajoWhite    ||FFDEAD||255 222 173 
|- style="background:wheat; color:black;"
|Wheat          ||F5DEB3||245 222 179 
|- style="background:burlywood; color:white;"
|BurlyWood      ||DEB887||222 184 135 
|- style="background:tan; color:white;"
|Tan            ||D2B48C||210 180 140 
|- style="background:rosybrown; color:white;"
|RosyBrown      ||BC8F8F||188 143 143 
|- style="background:sandybrown; color:white;"
|SandyBrown     ||F4A460||244 164  96 
|- style="background:goldenrod; color:white;"
|Goldenrod      ||DAA520||218 165  32 
|- style="background:darkgoldenrod; color:white;"
|DarkGoldenrod  ||B8860B||184 134  11 
|- style="background:peru; color:white;"
|Peru           ||CD853F||205 133  63 
|- style="background:chocolate; color:white;"
|Chocolate     ||D2691E||210 105  30 
|- style="background:saddlebrown; color:white;"
|SaddleBrown    ||8B4513||139  69  19 
|- style="background:sienna; color:white;"
|Sienna         ||A0522D||160  82  45 
|- style="background:brown; color:white;"
|Brown          ||A52A2A||165  42  42 
|- style="background:maroon; color:white;"
|Maroon         ||800000||128   0   0
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores <font color=slategray>blancos'''</font></big>
|- style="background:white; color:black;"
|White          ||FFFFFF||255 255 255 
|- style="background:snow; color:black;"
|Snow           ||FFFAFA||255 250 250 
|- style="background:honeydew; color:black;"
|Honeydew       ||F0FFF0||240 255 240 
|- style="background:mintcream; color:black;"
|MintCream      ||F5FFFA||245 255 250 
|- style="background:azure; color:black;"
|Azure          ||F0FFFF||240 255 255 
|- style="background:aliceblue; color:black;"
|AliceBlue      ||F0F8FF||240 248 255 
|- style="background:ghostwhite; color:black;"
|GhostWhite     ||F8F8FF||248 248 255 
|- style="background:whitesmoke; color:black;"
|WhiteSmoke     ||F5F5F5||245 245 245 
|- style="background:seashell; color:black;"
|Seashell       ||FFF5EE||255 245 238 
|- style="background:beige; color:black;"
|Beige          ||F5F5DC||245 245 220 
|- style="background:oldlace; color:black;"
|OldLace        ||FDF5E6||253 245 230 
|- style="background:floralwhite; color:black;"
|FloralWhite    ||FFFAF0||255 250 240 
|- style="background:ivory; color:black;"
|Ivory          ||FFFFF0||255 255 240 
|- style="background:antiquewhite; color:black;"
|AntiqueWhite   ||FAEBD7||250 235 215 
|- style="background:linen; color:black;"
|Linen          ||FAF0E6||250 240 230 
|- style="background:lavenderblush; color:black;"
|LavenderBlush  ||FFF0F5||255 240 245 
|- style="background:mistyrose; color:black;"
|MistyRose      ||FFE4E1||255 228 225 
|-
|colspan=3; style="background:whitesmoke; color:slategray; text-align:left;"|<big>'''Colores  <font color=slategray>grises'''</font></big>
|- style="background:gainsboro; color:black;"
|Gainsboro      ||DCDCDC||220 220 220 
|- style="background:lightgrey; color:black;"
|LightGrey      ||D3D3D3||211 211 211 
|- style="background:silver; color:black;"
|Silver         ||C0C0C0||192 192 192 
|- style="background:darkgray; color:black;"
|DarkGray       ||A9A9A9||169 169 169 
|- style="background:gray; color:white;"
|Gray           ||808080||128 128 128 
|- style="background:dimgray; color:white;"
|DimGray        ||696969||105 105 105 
|- style="background:lightslategray; color:white;"
|LightSlateGray ||778899||119 136 153 
|- style="background:slategray; color:white;"
|SlateGray      ||708090||112 128 144 
|- style="background:darkslategray; color:white;"
|DarkSlateGray  ||2F4F4F|| 47  79  79 
|- style="background:black; color:white;"
|Black          ||000000||  0   0   0 
|}
|}

Existen 16.777.216 combinaciones distintas.