¿Cómo funcionan los códigos hexadecimales y los colores RGB?
Con componentes integrales en el lenguaje de los diseñadores y desarrolladores web, es fácil obtener una comprensión actual de los códigos hexadecimales y los colores RGB, y luego seguir adelante. Sin embargo, incluso si sabe cómo funcionan los códigos de color, vale la pena mirar más de cerca la ciencia y la historia detrás de ellos.
Cómo funcionan los códigos de color
Los códigos de color comunican los niveles precisos de rojo, verde y azul que muestran los píxeles para producir un color determinado.
Los códigos de color RGB utilizan tres números de hasta tres dígitos. El valor hexadecimal o hexadecimal utiliza tres pares de caracteres precedidos por un hash. En el marcado, verá códigos de color RGB escritos así:
{color: rgb (255,0,0);}
Y valores hexadecimales como este:
{color: # FF0000;}
Cuando vemos un color digitalmente, es una combinación de luz roja, verde y azul transmitida desde píxeles en la pantalla. Con las pantallas de hoy en día capaces de resoluciones cada vez más altas, los diseñadores y desarrolladores web disponen de una gama de colores realmente asombrosa.
La diferencia entre hexadecimal y RGB
Los colores hexadecimales se expresan como combinaciones de números y letras de seis dígitos. Estos códigos de color son básicamente una forma abreviada de valores RGB. Sirven la misma función, con un poco de conversión matemática en una buena medida.
En lugar de letras, los valores de color RGB utilizan tres conjuntos de tres números con un rango entre 0 y 255. Por ejemplo, echemos un vistazo al color verde azulado:
- Maleficio Coda – # 008080
- RBG – rgb (0, 128, 128)
Estos valores de elementos pueden parecer diferentes a primera vista, pero el color será idéntico cuando se agreguen a su marcado.
Reconociendo colores hexadecimales a la vista
Pero, ¿cómo miras el revoltijo de letras y números que es un valor hexadecimal y reconoces un color? Requiere un poco de aritmética mental.
Para hacerlos más cortos, los valores hexadecimales sustituyen a las letras cuando un valor llega a dos dígitos, mayor que nueve, siendo A 11. F, el valor más alto, es 15.
- Multiplica el primer carácter por 16 y el segundo por 1.
- Suma los dos totales.
- Repita esto para cada uno de los valores de rojo, verde o azul.
- A partir de ahí, es sencillo reconocer cómo se combinan los colores.
Agregar transparencia con un valor RGBA
Sumérjase en el CSS para obtener una imagen con superposición de color agregada, y es probable que vea algo como esto:
{color de fondo: rgba (255,0,0,0.3);}
El último valor es el canal alfa, que representa la opacidad. Un valor de 0.0 es completamente transparente, mientras que 1.0 es completamente opaco. Hoy en día, la mayoría de los navegadores admiten el marcado mediante RGBA.
Encontrar códigos de colores en una página con las herramientas para desarrolladores de Google
Si bien las extensiones de navegador gratuitas están ampliamente disponibles para permitirle probar colores en una página web, las herramientas de desarrollo de su navegador ya incluyen todo lo que necesita.
- Para comenzar en Chrome o Firefox, abra las herramientas de desarrollo con COMMAND-OPTION-I.
- Para Edge, presione F12.
- Desde el menú de Safari, vaya a Preferencias, haga clic en Avanzado y luego seleccione «Mostrar el menú Desarrollo en la barra de menú».
Hagamos esto en Chrome.
- En el campo de filtro, escriba «color» para encontrar un color en el CSS.
- En el CSS para cualquier color, haga clic en el cuadro que se muestra a la izquierda del hash. Esto abre la ventana del selector de color.
- Haga clic en el icono del cuentagotas para asegurarse de que esté habilitado, no atenuado.
Puede hacer clic en cualquier lugar de la página para obtener los valores hexadecimales y RGBA de ese color.
Códigos de colores a lo largo de la historia
El código de color RGB se remonta a mediados del siglo XIX, cuando se utilizaron filtros rojo, verde y azul para producir las primeras fotos en color. Esta idea surgió gracias a la teoría de la visión tricromática del color de Young-Helmholtz, desarrollada por Thomas Young y Hermann von Helmholtz.
En 1938, tuvimos la primera transmisión en color del mundo.
Avance rápido hasta 1981, cuando IBM introdujo un sistema de color limitado para la informática. Y en 1987, teníamos la matriz de gráficos de video (VGA) que permitía a los monitores reproducir colores RGB.
Poco más de una década después, HTML 3.0 incluyó 16 colores compatibles con la paleta VGA. Por esa época, NCSA Mosaic y Netscape Navigator se convirtieron en los primeros navegadores en reproducir colores RGB.
En esa época, los diseñadores estaban limitados a tan solo 256 colores «seguros para la Web».
Sin embargo, en la década de 2000, se abandonó en favor del TrueColor de 24 bits, un antepasado directo del sistema de 48 bits que hoy puede representar más de 280 billones de colores.
Empiece a recuperar su día
Creamos el Hub de GoDaddy Pro para ahorrarle tiempo. Mucho tiempo. Nuestros miembros informan que ahorran un promedio de tres horas al mes por cada sitio web de uclient que mantienen. ¿Estás listo para recuperar ese tipo de tiempo?
Registrate gratis
