USO DE RGB EN HTML Y EN LENGUAJE DE PROGRAMACIÓN - Enciclopedia de Tareas

USO DE RGB EN HTML Y EN LENGUAJE DE PROGRAMACIÓN



En sentido general, el término “color”, es definido como es la impresión producida por un tono de luz en los órganos visuales, o más exactamente, es una percepción visual que se genera en el cerebro de los humanos y otros animales al interpretar las señales nerviosas que le envían los fotorreceptores en la retina del ojo, que a su vez interpretan y distinguen las distintas longitudes de onda que captan de la parte visible del espectro electromagnético.

RGB (sigla en inglés de red, green, blue, en español «rojo, verde y azul») o RVA (sigla preferida por la ASALE y la RAE).

Las siglas “RGB” son definida como la composición del color en términos de la intensidad de los colores primarios de la luz.RGB es un modelo de color basado en la síntesis aditiva, con el que es posible representar un color mediante la mezcla por adición de los tres colores de luz primarios. El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente.

HTML hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia del software que conecta con la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es un estándar a cargo del World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales han adoptado.

Un lenguaje de programación es un lenguaje formal diseñado para realizar procesos que pueden ser llevados a cabo por máquinas como las computadoras.

Pueden usarse para crear programas que controlen el comportamiento físico y lógico de una máquina, para expresar algoritmos con precisión, o como modo de comunicación humana.

Está formado por un conjunto de símbolos y reglas sintácticas y semánticas que definen su estructura y el significado de sus elementos y expresiones. Al proceso por el cual se escribe, se prueba, se depura, se compila (de ser necesario) y se mantiene el código fuente de un programa informático se le llama programación.

Uso de RGB en HTML y en lenguajes de programación

Para indicar con qué proporción es mezclado cada color, se asigna un valor a cada uno de los colores primarios, de manera que el valor "0" significa que no interviene en la mezcla y, a medida que ese valor aumenta, se entiende que aporta más intensidad a la mezcla. Aunque el intervalo de valores podría ser cualquiera (valores reales entre 0 y 1, valores enteros entre 0 y 37, etc.), es frecuente que cada color primario se codifique con un byte (8 bits).

Así, de manera usual, la intensidad de cada una de las componentes se mide según una escala que va del 0 al 255 y cada color es definido por un conjunto de valores escritos entre paréntesis (correspondientes a valores "R", "G" y "B") y separados por comas.

De este modo, el rojo se obtiene con (255,0,0), el verde con (0,255,0) y el azul con (0,0,255), obteniendo, en cada caso un color resultante monocromático. La ausencia de color, es decir el color negro, se obtiene cuando las tres componentes son 0: (0,0,0). La combinación de dos colores a su máximo valor de 255 con un tercero con valor 0 da lugar a tres colores intermedios. De esta forma, aparecen los colores amarillo (255,255,0), cian (0,255,255) y magenta (255,0,255). El color blanco se forma con los tres colores primarios a su máximo valor (255,255,255).

El conjunto de todos los colores también se puede representar en forma de cubo. Cada color es un punto de la superficie o del interior de éste. La escala de grises estaría situada en la diagonal que une al color blanco con el negro.

HTML

En las pantallas, la sensación de color se produce por la mezcla aditiva de rojo, verde y azul. Las pantallas se dividen en puntos minúsculos llamados píxeles formados por tres subpíxeles de colores primarios de luz, cada uno de los cuales brilla con una determinada intensidad.

Al principio, la limitación en la profundidad de color de la mayoría de los monitores condujo a una gama limitada a 216 colores, definidos por el cubo de color, mediante la fórmula 63=216. No obstante, el predominio de los monitores de 24-bit (resultante de 224), posibilitó el uso de 16,7 millones de colores del espacio de color HTML RGB.

La gama de colores de la Web consiste en 216 combinaciones de rojo, verde y azul, donde cada color puede tomar un valor entre seis diferentes (en numeración hexadecimal): #00, #33, #66, #99, #CC o #FF, cuyos valores respectivos en sistema decimal equivalen a 0, 51, 102, 153, 204 y 255, que tienen un porcentaje de intensidad de 0%, 20%, 40%, 60%, 80% y 100%, respectivamente. Esto nos permite dividir los 216 colores en un cubo de dimensión 6.

Se procura que los píxeles sean de un color tal que cuanto más saturado sea, será mejor, pero nunca se trata de un color absolutamente puro. Por tanto la producción de colores con este sistema tiene limitaciones:

  • La derivada del funcionamiento de las mezclas aditivas: sólo pueden ser obtenidos los colores interiores del triángulo formado por los tres colores primarios de luz.
  • La derivada del hecho que los colores primarios usados no son absolutamente monocromáticos.
  • Las diversas pantallas no son iguales exactamente, además de ser configurables por los usuarios, con lo cual varios parámetros pueden variar.

Esto implica que las codificaciones de los colores destinadas a las pantallas se deben interpretar como descripciones relativas, y entender la precisión de acuerdo con las características de la pantalla.

Codificación hexadecimal del color

La codificación dodecadecimal del color permite expresar fácilmente un color concreto de la escala RGB, utilizando la notación hexadecimal, como en el lenguaje HTML y en JavaScript. Este sistema utiliza la combinación de tres códigos de dos dígitos para expresar las diferentes intensidades de los colores primarios RGB.

Blanco y Negro – Color HTML

  • Negro: El color negro #000000, los tres canales, están al mínimo 00, 00 y 00.
  • Blanco: El color blanco #FFFFFF, los tres canales, están al máximo FF, FF y FF.

En el sistema de numeración hexadecimal, además de los números del 0 al 9 se utilizan seis letras con un valor numérico equivalente; a=10, b=11, c=12, d=13, e=14 y f=15. La correspondencia entre la numeración hexadecimal y la decimal u ordinaria viene dada por la siguiente fórmula:

decimal = primera cifra hexadecimal * 16 + segunda cifra hexadecimal

La intensidad máxima es ff, que se corresponde con (15*16)+15= 255 en decimal, y la nula es 00, también 0 en decimal. De esta manera, cualquier color queda definido por tres pares de dígitos.

Colores Básicos - HTML

Los tres colores básicos son, rojo, verde y azul.

  • Rojo: El color rojo #FF0000, el canal de rojo está al máximo y los otros dos al mínimo.
  • Verde: El color verde #00FF00, el canal del verde está al máximo y los otros dos al mínimo.
  • Azul: El color azul #0000FF está al máximo y los otros dos al mínimo.

Combinaciones Básicas – Color HTML

  • Amarrillo: El color amarillo #FFFF00, los canales rojos y verde están al máximo.
  • Cian: El color cian #00FFFF, los canales azul y verde están al máximo.
  • Magenta: El color magenta #FF00FF, los canales rojo y azul están al máximo.
  • Gris Claro: El color gris claro #D0D0D0, los tres canales tienen la misma intensidad.
  • Gris Oscuro: El color gris oscuro #5E5E5E, los tres canales tienen la misma intensidad.

A partir de aquí se puede hacer cualquier combinación de los tres colores.

Colores definidos por la especificación HTML 4.01

El lenguaje HTML 4.0 es una especificación del lenguaje html aprobada por el World Wide Web Consortium.HTML 4.01 es una revisión de HTML 4.0 que corrige errores e incorpora algunos cambios a la revisión de HTML 4.0. Información detallada acerca de esta revisión se encuentra en una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification", publicada el 24 de diciembre de 1999. http://html.conclase.net/w3c/html401-es/cover.html

Color Hexadecimal

  1. cyan #00ffff
  2. gray #808080
  3. navy #000080
  4. silver #c0c0c0

Color Hexadecimal

  1. black #000000
  2. green #008000
  3. olive #808000
  4. teal #008080

Color Hexadecimal

  1. blue #0000ff
  2. lime #00ff00
  3. purple #800080
  4. white #ffffff

Color Hexadecimal

  1. fucsia #ff00ff
  2. maroon #800000
  3. red #ff0000
  4. yellow #ffff00

Colores más Saturados y los más Luminosos

Supongamos tres fuentes luminosas, r, g y b. Cualquier color que se pueda obtener a partir de esos tres colores primarios tendrá la forma: (ir, ig, ib) donde ir, ig e ib son los coeficientes de las intensidades correspondientes a cada color primario.

Si situamos los colores obtenidos en el gráfico, tenemos que:

  • Si dos de los coeficientes son nulos, el color se sitúa en el vértice correspondiente al color de coeficiente no nulo.
  • Si un coeficiente es nulo, el color se sitúa en uno de los lados del triángulo: el conjunto de todos ellos son los colores más saturados.
  • Si ninguno de los coeficientes es nulo, el color se sitúa en un punto del interior; cuanto más parecidos sean los tres coeficientes, más cerca estará del blanco (en el centro).

Al representar combinaciones de tres valores independientes en un diagrama que sólo tiene dos, resulta que a cada punto del diagrama le corresponde toda una familia de colores. Por ejemplo, los siguientes colores tienen la misma proporción de rojo, verde y azul, y por tanto les corresponde el mismo punto del gráfico. Sólo se diferencian en la intensidad.

Variación de las intensidades

  1. 100, 50, 0 #643200 Marrón oscuro
  2. 200, 100, 0 #c86400 Marrón claro
  3. 150, 75, 0 #964b00 Marrón

Si las intensidades ir, ig e ib tienen un límite superior (255), la condición necesaria y suficiente para que un color sea el más intenso de la familia (es decir, de los representados por el mismo punto) es que al menos uno de sus coeficientes sea 255.

Los colores que presentan la máxima saturación y la máxima luminosidad a la vez, son los que reúnen dos requisitos: al menos uno de los coeficientes es 255 y al menos uno de los coeficientes es 0. De esto se deduce que los colores más saturados y más luminosos siguen la siguiente secuencia:

  • (0, 0, 0) es negro
  • (255, 255, 255) es blanco
  • (255, 0, 0) es rojo
  • (0, 255, 0) es verde
  • (0, 0, 255) es azul
  • (255, 255, 0) es amarillo
  • (0, 255, 255) es cian
  • (255, 0, 255) es magenta

Colores HTML – CODIGOS

Nombre del color
Color
Hexadecimal
Color RGB
IndianRed
#CD5C5C
205,92,92
LightCoral
#F08080
240,128,128
Salmon
#FA8072
250,128,114
DarkSalmon
#E9967A
233,150,122
LightSalmon
#FFA07A
255,160,122
Crimson
#DC143C
220,20,60
Red
#FF0000
255,0,0
FireBrick
#B22222
178,34,34
DarkRed
#8B0000
139,0,0
Pink
#FFC0CB
255,192,203
LightPink
#FFB6C1
255,182,193
HotPink
#FF69B4
255,105,180
DeepPink
#FF1493
255,20,147
MediumVioletRed
#C71585
199,21,133
PaleVioletRed
#DB7093
219,112,147
LightSalmon
#FFA07A
255,160,122
Coral
#FF7F50
255,127,80
Tomato
#FF6347
255,99,71
OrangeRed
#FF4500
255,69,0
DarkOrange
#FF8C00
255,140,0
Orange
#FFA500
255,165,0
Gold
#FFD700
255,215,0
Yellow
#FFFF00
255,255,0
LightYellow
#FFFFE0
255,255,224
LemonChiffon
#FFFACD
255,250,205
LightGoldenrodYellow
#FAFAD2
250,250,210
PapayaWhip
#FFEFD5
255,239,213
Moccasin
#FFE4B5
255,228,181
PeachPuff
#FFDAB9
255,218,185
PaleGoldenrod
#EEE8AA
238,232,170
Khaki
#F0E68C
240,230,140
DarkKhaki
#BDB76B
189,183,107
Lavender
#E6E6FA
230,230,250
Thistle
#D8BFD8
216,191,216
Plum
#DDA0DD
221,160,221
Violet
#EE82EE
238,130,238
Orchid
#DA70D6
218,112,214
Fuchsia
#FF00FF
255,0,255
Magenta
#FF00FF
255,0,255
MediumOrchid
#BA55D3
186,85,211
MediumPurple
#9370DB
147,112,219
BlueViolet
#8A2BE2
138,43,226
DarkViolet
#9400D3
148,0,211
DarkOrchid
#9932CC
153,50,204
DarkMagenta
#8B008B
139,0,139
Purple
#800080
128,0,128
Indigo
#4B0082
75,0,130
SlateBlue
#6A5ACD
106,90,205
DarkSlateBlue
#483D8B
72,61,139
GreenYellow
#ADFF2F
173,255,47
Chartreuse
#7FFF00
127,255,0
LawnGreen
#7CFC00
124,252,0
Lime
#00FF00
0,255,0
LimeGreen
#32CD32
50,205,50
PaleGreen
#98FB98
152,251,152
LightGreen
#90EE90
144,238,144
MediumSpringGreen
#00FA9A
0,250,154
SpringGreen
#00FF7F
0,255,127
MediumSeaGreen
#3CB371
60,179,113
SeaGreen
#2E8B57
46,139,87
ForestGreen
#228B22
34,139,34
Green
#008000
0,128,0
DarkGreen
#006400
0,100,00
YellowGreen
#9ACD32
154,205,50
OliveDrab
#6B8E23
107,142,35
Olive
#808000
128,128,0
DarkOliveGreen
#556B2F

MediumAquamarine
#66CDAA
102,205,170
DarkSeaGreen
#8FBC8F
143,188,143
LightSeaGreen
#20B2AA
32,178,170
DarkCyan
#008B8B
0,139,139
Teal
#008080
0,128,128
Aqua
#00FFFF
0,255,255
Cyan
#00FFFF
0,255,255
LightCyan
#E0FFFF
224,255,255
PaleTurquoise
#AFEEEE
175,238,238
Aquamarine
#7FFFD4
127,255,212
Turquoise
#40E0D0
64,224,208
MediumTurquoise
#48D1CC
72,209,204
DarkTurquoise
#00CED1
0,206,209
CadetBlue
#5F9EA0
95,158,160
SteelBlue
#4682B4
70,130,180
LightSteelBlue
#B0C4DE
176,196,222
PowderBlue
#B0E0E6
176,224,230
LightBlue
#ADD8E6
173,216,230
SkyBlue
#87CEEB
135,206,235
LightSkyBlue
#87CEFA
135,206,250
DeepSkyBlue
#00BFFF
0,191,255
DodgerBlue
#1E90FF
30,144,255
CornflowerBlue
#6495ED
100,149,237
MediumSlateBlue
#7B68EE
123,104,238
RoyalBlue
#4169E1
65,105,225
Blue
#0000FF
0,0,255
MediumBlue
#0000CD
0,0,205
DarkBlue
#00008B
0,0,139
Navy
#000080
0,0,128
MidnightBlue
#191970
25,25,112
Cornsilk
#FFF8DC
255,248,220
BlanchedAlmond
#FFEBCD
255,235,205
Bisque
#FFE4C4
255,228,196
NavajoWhite
#FFDEAD
255,222,173
Wheat
#F5DEB3
245,222,179
BurlyWood
#DEB887
222,184,135
Tan
#D2B48C
210,180,140
RosyBrown
#BC8F8F
188,143,143
SandyBrown
#F4A460
244,164,96
Goldenrod
#DAA520
218,165,32
DarkGoldenrod
#B8860B
184,134,11
Peru
#CD853F
205,133,63
Chocolate
#D2691E
210,105,30
SaddleBrown
#8B4513
139,69,19
Sienna
#A0522D
160,82,45
Brown
#A52A2A
165,42,42
Maroon
#800000
128,0,0
White
#FFFFFF
255,255,255
Snow
#FFFAFA
255,250,250
Honeydew
#F0FFF0
240,255,240
MintCream
#F5FFFA
245,255,250
Azure
#F0FFFF
240,255,255
AliceBlue
#F0F8FF
240,248,255
GhostWhite
#F8F8FF
248,248,255
WhiteSmoke
#F5F5F5
245,245,245
Seashell
#FFF5EE
255,245,238
Beige
#F5F5DC
245,245,220
OldLace
#FDF5E6
253,245,230
FloralWhite
#FFFAF0
255,250,240
Ivory
#FFFFF0
255,255,240
AntiqueWhite
#FAEBD7
250,235,215
Linen
#FAF0E6
250,240,230
LavenderBlush
#FFF0F5
255,240,245
MistyRose
#FFE4E1
255,228,225
Gainsboro
#DCDCDC
220,220,220
LightGrey
#D3D3D3
211,211,211
Silver
#C0C0C0
192,192,192
DarkGray
#A9A9A9
169,169,169
Gray
#808080
128,128,128
DimGray
#696969
105,105,105
LightSlateGray
#778899
119,136,153
SlateGray
#708090
112,128,144
DarkSlateGray
#2F4F4F
47,79,79
Black
#000000
0,0,0