Selector y Convertidor de Colores

Modelos de color

Un modelo de color es un sistema para describir colores como números. Se utilizan diferentes modelos en distintos contextos dependiendo de si la salida es una pantalla, una impresora o una especificación de diseño.

RGB / RGBA

Formato

RGB define colores mezclando luz roja, verde y azul. Cada canal va de 0 a 255. rgb(255, 0, 0) es rojo puro. rgb(255, 255, 255) es blanco. El canal A (alfa) añade transparencia, de 0 (completamente transparente) a 1 (completamente opaco). Por ejemplo, rgba(255, 0, 0, 0.5) es rojo semitransparente. RGB es el modelo de color nativo para pantallas y displays digitales.

Historia

El modelo RGB tiene sus raíces en la teoría tricromática de la visión del color de Young-Helmholtz del siglo XIX. James Clerk Maxwell realizó los primeros experimentos de fotografía en color RGB en 1861. RGB se convirtió en el estándar para pantallas electrónicas con el desarrollo de televisores CRT en color en las décadas de 1930 y 1940, y posteriormente fue adoptado para monitores de computadora. El espacio de color sRGB fue adoptado formalmente como estándar web en HTML 3.2 en enero de 1997.

HEX / HEXA

Formato

HEX es una notación compacta para valores RGB usando hexadecimal. #FF0000 es lo mismo que rgb(255, 0, 0). Cada par de dígitos hexadecimales representa un canal: #RRGGBB. La forma de 8 dígitos #RRGGBBAA añade un canal alfa, donde 00 es completamente transparente y FF es completamente opaco. Por ejemplo, #FF000080 es rojo al 50% de opacidad. Las formas abreviadas como #F00 se expanden a #FF0000.

Historia

La notación de color hexadecimal se originó en los primeros navegadores web a mediados de la década de 1990. Las primeras versiones de Mosaic y Netscape Navigator heredaron el sistema de nombres de color X11. CSS Level 1, publicado en diciembre de 1996 por Hakon Wium Lie y Bert Bos, estandarizó formalmente los tripletes hexadecimales como la forma principal de especificar colores en la web.

HSL / HSLA

Formato

HSL describe el color como tono, saturación y luminosidad. El tono es un grado en la rueda de colores (0-360): 0 es rojo, 120 es verde, 240 es azul. La saturación (0-100%) controla la intensidad del color. La luminosidad (0-100%) controla el brillo, donde 0% es negro y 100% es blanco. HSL suele ser más intuitivo que RGB para seleccionar colores porque se pueden ajustar el brillo y la saturación de forma independiente.

Historia

HSL fue descrito por primera vez por George H. Joblove y Donald Greenberg en un artículo de 1978 en Computer Graphics. Fue creado para resolver un problema fundamental de RGB: mezclar valores de rojo, verde y azul no es intuitivo para los humanos. HSL reorganiza el espacio de color RGB para que artistas y diseñadores puedan pensar en términos de color (tono), vivacidad (saturación) y brillo (luminosidad), lo que se corresponde más con la forma en que las personas describen los colores naturalmente.

HSV / HSB

Formato

HSV (tono, saturación, valor) es similar a HSL pero usa "valor" (brillo) en lugar de luminosidad. Al 100% de valor, los colores completamente saturados son puros y brillantes. HSV se adapta más naturalmente al funcionamiento de los selectores de color: el panel de saturación/brillo ajusta S y V mientras que el control deslizante de tono ajusta H.

Historia

HSV fue descrito por Alvy Ray Smith en agosto de 1978 mientras trabajaba en el Computer Graphics Lab del New York Institute of Technology. Se publicó en el mismo número de Computer Graphics que HSL. Smith diseñó HSV para un programa de pintura digital temprano, donde los artistas necesitaban una forma intuitiva de seleccionar colores en pantalla. El modelo cilíndrico de HSV lo hacía natural para implementarlo como un selector de color con un control deslizante de tono y un panel de saturación/brillo.

CMYK

Formato

CMYK (cian, magenta, amarillo, negro/clave) se usa en impresión. Mientras que RGB es aditivo (luz), CMYK es sustractivo (tinta). Cada valor representa el porcentaje de esa tinta aplicada. cmyk(0, 100, 100, 0) produce rojo. La conversión entre RGB y CMYK es aproximada porque cubren diferentes rangos de color (gamuts).

Historia

Los fundamentos de CMYK se remontan a Jacob Christoph Le Blon, quien inventó la impresión a color por semitonos usando placas de cobre separadas alrededor de 1710. Inicialmente usó placas rojas, amarillas y azules, y más tarde añadió una placa negra para contornos y texto más nítidos. El proceso moderno de cuatro colores CMYK se implementó por primera vez en la década de 1890 para ilustraciones de periódicos en color. La placa negra se llama placa "clave" (key) porque lleva el detalle fino al que se alinean las demás placas.

Formatos de color CSS

El CSS moderno admite varias notaciones de color:

• #FF5733 o #ff5733 (HEX)
• rgb(255, 87, 51) o rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) o hsla(14, 100%, 60%, 0.5)
• Colores con nombre: red, cornflowerblue, rebeccapurple (148 colores con nombre en total)