Saltar al contenido principal

Herramientas de color

Estas herramientas de color convierten, comparan y generan colores en tu navegador usando las fórmulas reales de la ciencia del color en lugar de aproximaciones: la auténtica función de transferencia de sRGB, la luminancia relativa de WCAG 2.x, OKLab para todo lo perceptual y las matrices de Machado para la deficiencia de la visión de color. No se envía nada a ningún sitio, y cada número mostrado se puede comprobar a mano.

15 herramientasSolo local

Elegir

Validar

Convertir

Referencia

Generar

¿Cuándo deberías usar una herramienta color en el navegador?

Las herramientas de color tienen un modo de fallo inusual. Una herramienta de PDF rota produce un PDF roto y te enteras de inmediato. Una herramienta de color silenciosamente equivocada produce un número plausible, lo pegas en una hoja de estilos, y nada te avisa — ni el navegador, ni la compilación, ni la revisión — hasta que alguien con visión reducida no puede leer tu botón, o el azul de la marca en el folleto impreso llega con un tono desviado.

Los errores son específicos y se repiten. Elevar un canal a la potencia de 2.2 en lugar de usar la auténtica función de transferencia a tramos de sRGB, lo que desplaza ligeramente cada relación de contraste y voltea las que están al borde. Omitir el módulo en la fórmula del tono, de modo que un sexto del espacio de color reporta un ángulo negativo. Componer un primer plano semitransparente sobre la nada y reportar una relación de contraste para un color que nunca aparece en pantalla. Generar una paleta escalando la luminosidad de HSL. Cada uno de esos produce una salida que se ve completamente razonable.

Por eso la aritmética de aquí está escrita según las especificaciones y no según las aproximaciones que circulan. El contraste es la luminancia relativa de WCAG 2.x con la función a tramos, calculada después de componer el alfa contra el fondo real. Todo lo perceptual — escalas, mezclas, degradados, el color más cercano que pasa — corre en OKLab, que es la revisión de 2020 de la idea de Lab y por fin arregló la deriva del tono azul que tenían los espacios antiguos. La simulación de daltonismo usa las matrices de Machado, Oliveira y Fernandes aplicadas al RGB lineal, no a los valores codificados con gamma, que es la diferencia entre una simulación y un baño de color.

Las herramientas también se niegan a adivinar. Un hex de cinco dígitos es un error de tecleo, no un color, y se rechaza en lugar de rellenarse hasta parecer plausible; un conversor que devuelve negro en silencio ante una entrada mala te entrega una muestra sin motivo para dudar. Donde una conversión genuinamente no puede ser exacta — CMYK sin el perfil de la imprenta, una coordenada OKLCH fuera de la gama sRGB — la página lo dice en lugar de imprimir el número con la misma confianza que los exactos.

Nada de esto necesita un servidor. La conversión de color son unas pocas docenas de líneas de aritmética sobre tres números; una simulación de imagen es un bucle sobre un canvas que tu navegador ya tiene. La Content-Security-Policy del sitio establece connect-src 'self' , así que una paleta de marca o una captura de pantalla sin publicar que sueltes en el simulador no puede salir de la pestaña aunque algo aquí intentara enviarla.

Por dónde empezar: Elegir color para un color y toda su rampa, Comprobar contraste cuando una pareja tiene que pasar AA, Convertir colores para moverte entre formatos, Códigos de color para buscar el hex de un color con nombre, y Test de daltonismo para ver cómo se ve tu interfaz para el aproximadamente uno de cada doce hombres que no ve el rojo y el verde como tú.

Preguntas frecuentes

¿Qué formato de color debería usar de verdad en CSS?

Hex para un valor que escribes una vez y no vuelves a tocar — es compacto, entendido universalmente y sin pérdidas. HSL cuando una persona lo va a editar a mano, porque «un poco más oscuro» y «menos saturado» son ahí cambios de un solo número. OKLCH cuando un programa calcula el color: una escala generada, un degradado, un estado hover interpolado. OKLCH es el único de los tres cuyo número de luminosidad coincide con lo que reporta el ojo, así que los números espaciados uniformemente se ven espaciados uniformemente.

¿Por qué dos herramientas me dan valores HSL distintos para el mismo hex?

Casi siempre es redondeo más que desacuerdo. HSL tal como se escribe normalmente — un tono de número entero y una décima de porcentaje — contiene menos valores distintos que los 16,7 millones que un hex puede expresar, así que varios valores hex colapsan en el mismo HSL y la conversión de vuelta cae en el que la fórmula produzca. Donde las herramientas genuinamente difieren es en cómo reportan un gris: el tono de un color con croma cero no está definido, y algunas imprimen 0 mientras otras imprimen lo que la aritmética produjo.

¿La relación de contraste de aquí es la misma que usa Lighthouse?

Sí. Es la fórmula de WCAG 2.x: linealiza cada canal con la función de transferencia a tramos de sRGB, ponles los pesos 0.2126, 0.7152 y 0.0722, suma 0.05 a ambas luminancias y divide la mayor entre la menor. El error más común en una implementación casera es elevar los canales a la potencia de 2.2 — se acerca, pero desplaza la relación lo suficiente para voltear una pareja al borde de pasar a fallar. La cifra APCA que se muestra al lado es un modelo completamente distinto y es informativa, no una norma contra la que puedas declarar conformidad.

¿Puedo confiar en números CMYK de una herramienta web para imprenta?

Como punto de partida, no como especificación. CMYK depende del dispositivo: el mismo color sRGB se convierte en porcentajes de tinta distintos en papel estucado que en papel no estucado, y otra vez distintos en una imprenta diferente con tintas diferentes. Eso es lo que codifica un perfil ICC, y ninguna página web tiene uno para tu impresora. Envía a la imprenta la referencia sRGB o Pantone y deja que conviertan con el perfil del trabajo.

¿Cuánta precisión tiene un test de daltonismo en línea?

Es una indicación orientativa, no un diagnóstico. Un resultado clínico sale de un anomaloscopio bajo luz controlada en una pantalla calibrada, y ninguna de esas condiciones se cumple en tu escritorio. Lo que un test en línea puede hacer con honestidad es decirte si lees las mismas figuras que alguien con visión cromática típica, lo cual es suficiente para merecer un seguimiento. Las láminas de aquí se generan a partir de pares de confusión hallados por simulación en lugar de escanearse de un juego de láminas con derechos de autor, lo que elimina la mayor fuente de error de la versión en línea habitual: un JPEG de una impresión de 1917, recomprimido, con la precisión cromática que tuviera el escáner.

¿Por qué las versiones claras y oscuras de aquí se ven más uniformes que las que obtengo en otros sitios?

Porque se generan en OKLCh en lugar de escalando la luminosidad de HSL. HSL pondera los tres canales por igual cuando la visión humana pondera el verde aproximadamente diez veces más que el azul, así que una rampa construida sobre él se ve clara en los amarillos y oscura en los azules con números idénticos. Escalar la luminosidad de OKLCh sobre una curva, mantener el tono y afinar el croma en ambos extremos produce pasos que se ven tan uniformes como se miden — y cada parada se vuelve a ajustar dentro de la gama sRGB, así que ninguna se renderiza como un color plano recortado.

¿Qué más hay en ToolsByUs?

ToolsByUs — Herramientas de color