Selector de color

Todos los colores de esta página están en sRGB, el espacio de color predeterminado de la web desde que los navegadores lo adoptaron a finales de los años noventa. Una pantalla mezcla luz roja, verde y azul, y cada canal tiene 256 niveles (0–255), lo que da 16 777 216 colores posibles. RGB escribe esos tres números directamente; HEX escribe los mismos tres números en base 16, con dos dígitos cada uno, así que #FF6600 es rojo 255, verde 102, azul 0. La forma abreviada de tres dígitos duplica cada dígito: #F60 es #FF6600.

HSL y HSB (también llamado HSV) describen los mismos colores de una forma más fácil de ajustar a mano. El tono es un ángulo en la rueda de color: 0° rojo, 120° verde, 240° azul. La diferencia está en el último número. En HSL, una luminosidad del 100 % siempre es blanco y el 50 % es la versión más pura del tono; en HSB, un brillo del 100 % es el tono puro y el blanco necesita una saturación del 0 %. Aplicaciones de diseño como Photoshop y Figma usan HSB en sus selectores, mientras que CSS entiende hsl() de forma nativa, y por eso arriba aparecen los dos.

Las pantallas suman luz; las impresoras la restan con tintas cian, magenta, amarilla y negra. Los dos sistemas abarcan rangos de color distintos, llamados gamas. Los colores de pantalla muy saturados, como un verde RGB intenso, un azul eléctrico o un naranja neón, quedan fuera de lo que pueden reproducir las tintas de cuatricromía, así que se imprimen más apagados de lo que se ven en el monitor.

Los valores CMYK de aquí usan la conversión matemática simple sin perfil ICC, útil para un encargo orientativo pero no para imprenta. Una imprenta convierte con un perfil para su papel y su máquina, como FOGRA39 en Europa o GRACoL en Estados Unidos, y el mismo color RGB puede salir con porcentajes de tinta distintos en cada uno. Para trabajos de impresión, envíe el valor RGB o HEX junto con el perfil que pida su imprenta.

WCAG 2.1 compara la luminancia relativa de dos colores: la del más claro más 0,05, dividida entre la del más oscuro más 0,05. El resultado va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco). El nivel AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande, es decir, de 18 puntos o de 14 puntos en negrita; el nivel AAA lo eleva a 7:1 y 4,5:1. Los elementos de la interfaz, como los bordes de los campos y los iconos, necesitan 3:1 frente a lo que los rodea según el criterio de conformidad 1.4.11.

La luminancia pondera el verde mucho más que el azul, porque el ojo es más sensible a él. Por eso un texto amarillo sobre blanco falla de lejos mientras que un azul oscuro sobre blanco cumple con holgura, aunque ambos colores parezcan totalmente saturados. Los logotipos y el texto puramente decorativo están exentos de la regla.

La paleta de imagen lee su archivo con el lienzo (canvas) del navegador, lo reduce a un máximo de 200 píxeles en el lado largo y agrupa los píxeles parecidos con el método de corte por la mediana que describió Paul Heckbert en 1982: el rango de color se divide una y otra vez por su canal más amplio hasta que quedan seis grupos, y la media de cada grupo se convierte en una muestra. Los píxeles transparentes se ignoran, así que un logotipo sobre fondo transparente da los colores del logotipo.

Una vez obtenidos los colores, un logotipo plano suele funcionar mejor como vector. El conversor de imagen a SVG lo traza en formas que conservan estos colores exactos, y si está diseñando la cabecera de un canal, el redimensionador de banners de YouTube ajusta la imagen a 2560 × 1440 teniendo en cuenta la zona segura.