Selector de color de imagen

¿Puedo poner texto sobre este color?

Casi siempre es la verdadera pregunta, así que se responde directamente: cada color elegido se evalúa por su contraste con texto blanco y negro usando la fórmula WCAG, y junto a la relación se indica si aprueba o no.

• 4.5:1 es el mínimo para el texto normal (WCAG AA).
• 3:1 es el mínimo para el texto grande: unos 24 px, o 19 px en negrita.
• 7:1 es el nivel AAA, más estricto.

La fórmula no es una simple comparación de brillo. Usa la luminancia relativa, que da al verde mucho más peso que al rojo y al azul y aplica una curva gamma. Por eso un azul saturado que parece «medio» es mucho más oscuro de lo que aparenta, y un amarillo que parece intenso es casi tan claro como el blanco.

Calcularlo a ojo de forma fiable no es posible, y por eso vale la pena mostrar la cifra.

Por qué el color que obtienes puede no coincidir con el original

Dos salvedades sinceras:

• La compresión JPEG altera ligeramente los colores. La información de color se guarda a menor resolución que el brillo, así que el valor exacto de un pequeño detalle de color puede haberse desplazado respecto a lo que registró la cámara. Muestrear una zona lisa grande te acerca más.
• No se aplican los perfiles de color. Una imagen etiquetada como Adobe RGB o Display P3 se lee como números sin más, así que un color saturado puede leerse distinto de como lo muestra una aplicación con gestión de color. Para las imágenes sRGB, que son casi todo lo que hay en la web, no hay ninguna diferencia.

Para qué lo usa la gente

• Igualar un color de marca a partir de un logotipo cuando nadie encuentra el manual de marca.
• Crear una paleta a partir de una fotografía: una forma habitual y realmente buena de elegir colores para un sitio o una presentación.
• Revisar una captura de pantalla para encontrar el color exacto que usa un diseño.
• Obtener valores CSS de una maqueta que llegó como imagen plana.
• Comprobar la legibilidad antes de poner texto sobre una fotografía o un panel de color.

No se sube nada

La imagen se decodifica y se lee en tu navegador. No podría funcionar de otro modo a esta velocidad, porque toda la interacción consiste en responder «qué hay bajo mi cursor» tan rápido como lo mueves, y eso significa que el archivo nunca sale de tu dispositivo.

Vale la pena decirlo porque las imágenes que la gente muestrea a menudo no son suyas para compartir: un diseño sin publicar, los recursos de marca de un cliente, la captura de un competidor.

Elegir de una fotografía, no de un gráfico plano

Una advertencia práctica. Las fotografías no tienen colores planos. Lo que parece un suéter rojo liso son cientos de rojos que varían con la luz y la sombra, y el píxel en el que haces clic es una muestra de esa gama, no «el» color.

En una fotografía, la paleta extraída suele ser más útil que cualquier selección individual, porque cada entrada es el promedio de todo un grupo y no un píxel arbitrario. En un logotipo, una captura de pantalla o un gráfico plano, una sola selección es exactamente lo adecuado: esos sí tienen un único valor.

Obtener una versión más oscura o más clara

Usa HSL. Mantén el tono y la saturación, y cambia solo la luminosidad: de hsl(199, 55%, 50%) a hsl(199, 55%, 35%) es sin duda el mismo color, más oscuro. Intentar lo mismo en HEX obliga a ajustar tres valores a la vez y adivinar, que es como las paletas acaban con un «azul oscuro» que se ha ido volviendo morado sin que nadie lo note.

Relacionado

Si muestreas una imagen para reproducir su estilo, el visor de metadatos te dirá con qué cámara y ajustes se hizo. Si vas a crear algo con los colores que encuentres, la herramienta de marca de agua acepta directamente un valor hexadecimal.