Código Hexadecimal: cómo sacar el color de la pantalla

Tres formas de leer un color, de la más exacta a la más cómoda

Leerlo de la propia página. Si el color es parte de una página web, abre las herramientas de desarrollo del navegador, selecciona el elemento y mira su estilo calculado. Eso te da el valor que realmente se escribió y no una muestra de píxeles, así que ni el suavizado de bordes, ni la transparencia, ni la compresión pueden alterarlo. Es el único método que devuelve el original en lugar de una medición del original.

Usar el cuentagotas del propio navegador. Los navegadores basados en Chromium incluyen un selector de color dentro de la muestra de color de las herramientas de desarrollo, y puede tomar cualquier punto de la pantalla. Sirve con imágenes y con cualquier cosa que no sea un elemento con estilos, y no requiere instalar nada.

Sacar una captura y ampliar. Lo más lento y lo más universal: capturas, abres la imagen en cualquier editor, amplías hasta ver los píxeles y lees el color del que te interesa. Es el método cuando el color está en otra aplicación, en un fotograma de video o en un dispositivo cuyo navegador no trae selector.

El orden importa: cada escalón agrega una etapa donde el valor puede cambiar.

Hex, RGB y HSL son el mismo color escrito de tres maneras

Hex son seis dígitos hexadecimales en pares — rojo, verde, azul — y cada par es un número de 0 a 255 escrito en base dieciséis. Es compacto y es lo que suelen entregar las herramientas de diseño.

RGB son esos mismos tres números en decimal. Es más fácil de razonar con aritmética y es lo que se usa cuando el color necesita un canal de transparencia.

HSL es el mismo color reorganizado en tono, saturación y luminosidad. No se gana precisión, pero ajustar resulta mucho más simple: aclarar un color sin cambiarle el carácter es un solo número en HSL y tres cambios coordinados en hex.

Convertir entre los tres no pierde nada, porque describen el mismo punto del mismo espacio. Si una conversión devuelve algo distinto, lo cambió otra cosa: eso es la sección siguiente.

Por qué el mismo color devuelve dos valores

Esta es la trampa. Un color tomado de la pantalla es una medición de lo que se mostró, y entre el valor escrito y el píxel hay varias etapas.

Perfiles de color. Una pantalla moderna puede mostrar colores fuera del rango estándar sRGB, y el sistema convierte los valores camino al panel. Una captura puede quedar etiquetada con el perfil de la pantalla y no con sRGB, así que el mismo color visual cae en números distintos según qué programa lo capturó y cuál lo abrió.

Composición. Lo que tomas es la mezcla final. Si arriba del color hay algo semitransparente — una capa, una sombra, el velo del modo oscuro — estás leyendo la mezcla y no la capa que querías.

Compresión. JPEG guarda el color con menos resolución que el brillo, así que los píxeles cercanos a un borde en una foto pueden estar varios pasos corridos. PNG, y las capturas guardadas como PNG, no tienen ese problema.

Si necesitas exactitud, vuelve al primer método y lee el valor escrito.

Bordes, degradados y otros lugares donde no tomar el color

El suavizado de bordes hace que el contorno del texto y el borde de cualquier curva estén formados a propósito por colores intermedios. Un píxel apenas dentro de la letra es una mezcla del color del texto y del fondo, y no es un color que alguien haya elegido. Toma la muestra en el medio de un área plana y amplia.

Un degradado, por definición, no tiene un valor único. Si necesitas uno, decide qué extremo quieres y toma la muestra bien adentro, o lee los dos extremos y trátalo como dos colores.

Sombras, resplandores y efectos de vidrio son el mismo problema con otra forma: son un cálculo sobre lo que hay detrás, así que el número cambia cuando cambia el fondo.

Dos revisiones antes de usar el color que encontraste

El contraste, si va texto encima. Esos umbrales no son folclore: WCAG 2.2, una Recomendación del W3C, fija 4,5 a 1 para texto normal y 3 a 1 para texto grande en el criterio 1.4.3. Una combinación y una combinación que se ve bien en tu pantalla puede fallar feo en una más apagada. Revisa el par en vez de confiar en la impresión.

Si el color carga información por sí solo. Si el rojo significa error y el verde significa éxito y nada más marca la diferencia, el mensaje no llega a quien no separa esos tonos, y es alrededor de un hombre cada doce. Agrega una palabra, un ícono o un cambio de forma. Nuestras páginas de visión del color y de percepción sirven para ver cómo se ve realmente esa diferencia.

Ninguna de las dos lleva un minuto, y las dos salen mucho más baratas ahora que cuando el color ya está en cincuenta lugares.

Cuando ese número no es el que necesitas

Para impresión, el hex es directamente otro espacio. Las pantallas emiten luz y mezclan rojo, verde y azul; la tinta la absorbe y mezcla cian, magenta, amarillo y negro. No hay una conversión fija entre ambos: la respuesta depende del papel, la tinta y la máquina. Por eso una imprenta pide un valor CMYK o una referencia de color plano, no tu hex.

Para un color de marca, pide la especificación en vez de tomarlo del logo de un sitio. El valor publicado manda; un píxel muestreado es lo que sobrevivió a esa exportación en particular.

Y si solo quieres reutilizar el mismo color de forma consistente, anótalo una vez en la notación que usan tus herramientas y convierte siempre desde esa fuente en lugar de volver a muestrear. Cada nueva muestra es otra oportunidad para que el número se corra.