Conversor a Escala de Grises — Coeficientes de Luma ITU-R BT.601 vía Loop per-píxel de Canvas ImageData
Convierte cualquier imagen a escala de grises usando la fórmula de luma ITU-R BT.601 (0,299R + 0,587G + 0,114B) — los coeficientes heredados del NTSC YIQ estandarizados por el CCIR en 1982 como los parámetros de codificación de estudio para televisión digital de definición estándar (según la Plenary Assembly del CCIR de febrero de 1982; renombrado a ITU-R BT.601 cuando el CCIR se convirtió en ITU-R en 1992). Estos coeficientes reflejan el modelado del estándar NTSC FCC de 1953 de la respuesta perceptual humana a los canales rojo, verde y azul en los puntos primarios de fósforo CRT de los años 50 (estándar NTSC FCC ratificado el 17 de diciembre de 1953 según FCC docket 9019); se aplican ampliamente en código de conversión a grises moderno pese a anteceder a las primarias modernas sRGB CRT/LCD/OLED porque el cociente perceptual (verde ≈ 2× rojo ≈ 5× azul de contribución a la luminancia percibida) es aproximadamente estable entre generaciones de pantalla. La conversión corre localmente vía WHATWG Canvas ctx.getImageData() → per-píxel Y = 0,299R + 0,587G + 0,114B → ctx.putImageData() de vuelta. La salida preserva el formato origen: PNG → PNG (alfa RGBA preservado); JPG → JPG calidad 0,92 (recodificado vía canvas.toBlob con cuantización del Anexo K según ITU-T T.81). Los archivos nunca salen del dispositivo.
Cómo convertir una imagen a escala de grises
- Arrastra tu imagen a la herramienta o haz clic para seleccionarla. El decodificador integrado del navegador carga el origen al Canvas a dimensiones nativas.
- La herramienta auto-aplica el grises BT.601 por defecto — alterna los botones Escala de Grises/Original para comparar el filtro contra el origen.
- El loop per-píxel ejecuta `Y = 0,299*R + 0,587*G + 0,114*B` para cada píxel, escribiendo el mismo valor Y a los tres canales R/G/B (el alfa no se toca).
- Previsualiza el resultado. Si regiones específicas se ven demasiado oscuras o claras, post-procesa con herramientas de brillo/contraste — esta herramienta no expone controles de curva tonal.
- Pulsa Descargar para guardar la copia en grises. El original queda intacto en el disco — los archivos nunca salen del dispositivo.
Casos de uso comunes
- Dar a un set de fotos un look editorial blanco-y-negro consistente sin colorización manual por imagen.
- Preparar imágenes para salida de impresión (papel prensa, láser monocromo) donde el color se reproduciría de forma inconsistente entre plataformas.
- Reducir ruido visual de tonos inconsistentes con la marca antes de añadir fotos a una presentación de estilo guiado o pitch.
- Producir una imagen de referencia de luminancia perceptual para tareas de análisis de imagen (detección de bordes, matching de características, pre-proceso OCR).
- Convertir fotos para proyectos con estética de era-película (fotografía callejera blanco-y-negro imitando el grano Tri-X o Plus-X).
Preguntas frecuentes
¿Cómo se calcula la escala de grises y por qué estos pesos específicos?
La herramienta usa la fórmula de luma ITU-R BT.601 `Y = 0,299R + 0,587G + 0,114B` — los coeficientes heredados del NTSC YIQ del estándar NTSC FCC de 1953 (FCC docket 9019, ratificado el 17 de diciembre de 1953), codificados después por el CCIR en ITU-R BT.601 en 1982 (renombrado a ITU-R BT.601 cuando el CCIR se convirtió en ITU-R en 1992). Los coeficientes reflejan la respuesta perceptual humana: el verde contribuye ~58% de la luminancia percibida (mayor densidad M-cono), el rojo ~30%, el azul ~11% (menor densidad S-cono). Promediar ingenuamente `(R+G+B)/3` ignora esta ponderación perceptual y produce resultados más planos y embarrados porque trata los tres canales por igual pese a las distintas sensibilidades del ojo.
¿Por qué no los coeficientes modernos ITU-R Rec. 709 (0,2126/0,7152/0,0722)?
ITU-R Rec. 709 (1989-1993, cluster 14 OI estándar HDTV 16:9) usa coeficientes distintos reflejando las primarias de gamut más amplio de Rec. 709. Sin embargo, los 0,299/0,587/0,114 de herencia NTSC del BT.601 siguen siendo la fórmula dominante de grises en código de procesamiento de imagen porque la mayoría de imágenes digitales son sRGB codificado en gamma (casando con la herencia NTSC lo bastante de cerca para grises perceptual). Los coeficientes BT.709 sobre-ponderarían el verde y sub-ponderarían el azul para orígenes sRGB codificados en gamma.
¿Es reversible?
No. El paso a grises descarta la información de crominancia (la componente dirección-de-color); solo queda la luminancia Y. Desde un valor en escala de grises por sí solo, no hay forma de recuperar el triple (R, G, B) original — el mapeo `(R, G, B) → Y` es muchos-a-uno. Guarda el archivo original en color si puedes necesitar la versión en color más tarde.
¿Cambia el tamaño del archivo?
Un poco. La salida en grises sigue codificando tres canales RGB idénticos por píxel (R=G=B=Y), así que PNG comprime ~10-20% más pequeño (los tres canales son idénticos → DEFLATE codifica la redundancia eficientemente) y JPG comprime ~5-10% más pequeño (los canales croma submuestreados en YCbCr cuantizan a ~0 ya que Cb/Cr ≈ 0 para grises, reduciendo el bitstream ligeramente). Para grises de tamaño mínimo verdadero, codifica como PNG de un solo canal vía una herramienta de escritorio — el Canvas del navegador siempre emite RGBA de 4 canales / YCbCr de 3 canales.
¿Se sube mi imagen?
No. La cadena decodificar + ctx.getImageData + loop per-píxel de grises + ctx.putImageData + canvas.toBlob corre toda del lado cliente vía WHATWG Canvas. La pestaña Network de DevTools muestra cero peticiones de subida durante la conversión.
Herencia de luma ITU-R BT.601 NTSC YIQ + loop per-píxel de Canvas ImageData
La conversión a grises aplica la fórmula canónica de luma ITU-R BT.601 `Y = 0,299R + 0,587G + 0,114B` a cada píxel vía WHATWG Canvas ctx.getImageData() según html.spec.whatwg.org/#dom-context-2d-getimagedata + un for-loop per-píxel iterando sobre el Uint8ClampedArray devuelto + ctx.putImageData() según html.spec.whatwg.org/#dom-context-2d-putimagedata. Los tres coeficientes vienen del estándar NTSC FCC de 1953 (FCC docket 9019, ratificado el 17 de diciembre de 1953) modelando la ponderación de respuesta humana de luminosidad de las primarias de fósforo CRT de los años 50 — verde ≈ 0,587 (mayor sensibilidad perceptual), rojo ≈ 0,299 (sensibilidad media), azul ≈ 0,114 (menor sensibilidad); los cocientes coinciden con la densidad y sensibilidad espectral M-cono : L-cono : S-cono del ojo humano. El CCIR codificó los coeficientes en ITU-R BT.601 en 1982 como los parámetros de codificación de estudio para televisión digital de definición estándar 4:3 (cluster 14 OI estándar 4:3); HDTV posterior vía ITU-R Rec. 709 (1989-1993, cluster 14 OI estándar 16:9) usa coeficientes distintos (0,2126R + 0,7152G + 0,0722B) reflejando las primarias de gamut más amplio de Rec. 709, pero los 0,299/0,587/0,114 de herencia NTSC del BT.601 siguen siendo la fórmula dominante de escala de grises en código de procesamiento de imagen porque la mayoría de imágenes digitales son sRGB codificado en gamma (casando con la herencia NTSC lo bastante de cerca para grises perceptual). Promediar ingenuamente `(R + G + B) / 3` produce resultados más planos y embarrados porque ignora la ponderación perceptual — un píxel verde puro y un píxel azul puro de igual intensidad de byte RGB (p. ej. 255) se ven muy distintos al ojo humano, y la ponderación del BT.601 captura esa diferencia. La salida preserva el formato origen: orígenes PNG se quedan PNG con alfa; orígenes JPG producen JPG a calidad 0,92 (cuantización perceptual del Anexo K de ITU-T T.81).
- Fórmula de luma ITU-R BT.601 `Y = 0,299R + 0,587G + 0,114B` — coeficientes heredados del NTSC YIQ (FCC 1953 / ratificación CCIR 1982 / renombrado ITU-R 1992)
- Manipulación per-píxel de Canvas ImageData vía WHATWG ctx.getImageData() + for-loop sobre Uint8ClampedArray + ctx.putImageData()
- Alterna entre escala-de-grises-activada y original (comparación de un solo botón)
- Preserva el formato origen: PNG → PNG con alfa RGBA; JPG → JPG calidad 0,92 (Anexo K de ITU-T T.81)
- Vista previa en vivo del efecto de filtro antes de descargar
- Funciona con JPG, PNG, WebP, AVIF, BMP, GIF — cualquier formato ráster común que el navegador decodifique nativamente
- En el navegador vía WHATWG Canvas ctx.getImageData + loop per-píxel + ctx.putImageData — sin subida
- Opera en sRGB (IEC 61966-2-1:1999); las imágenes origen sin perfil ICC embebido se interpretan como sRGB
Gratis. Sin registro. Sin subidas. Anuncios mediante AdSense (con consentimiento).
Fuentes (9)
- International Telecommunication Union (ITU-R, formerly CCIR) (1982). ITU-R BT.601 — Studio encoding parameters of digital television for standard 4:3 and wide screen 16:9 aspect ratios. itu.int/rec/R-REC-BT.601 — the canonical luma formula source: `Y = 0.299R + 0.587G + 0.114B`. The coefficients derive from the NTSC YIQ colour encoding standard (FCC docket 9019, ratified 17 December 1953) modelling human luminosity-response weighting at 1950s CRT phosphor primaries; codified by the CCIR in BT.601 in 1982; renamed ITU-R BT.601 when the CCIR became ITU-R in 1992.
- Federal Communications Commission (FCC) (1953). Report and Order, FCC Docket 9019 — NTSC standard adoption. FCC docket 9019, adopted 17 December 1953 — the original NTSC standard ratifying the YIQ colour encoding with luma coefficients 0.299/0.587/0.114 derived from the 1950s CRT phosphor primary chromaticities. These coefficients survive in modern grayscale conversion code via ITU-R BT.601's 1982 codification.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: getImageData(). html.spec.whatwg.org/#dom-context-2d-getimagedata — returns an ImageData object whose data property is a Uint8ClampedArray of (R, G, B, A) bytes per pixel; the per-pixel grayscale loop iterates this array in stride-4 to apply the BT.601 luma formula.
- WHATWG (live). HTML Living Standard — Canvas 2D Context: putImageData(). html.spec.whatwg.org/#dom-context-2d-putimagedata — writes the modified Uint8ClampedArray back to the canvas; the subsequent canvas.toBlob() re-encodes to PNG or JPG.
- WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point for raster format decode into Canvas.
- WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob(). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes the canvas pixel buffer to a Blob via the browser's built-in encoder for the requested MIME type (image/png lossless, image/jpeg with quality argument for ITU-T T.81 Annex K perceptual quantisation).
- ITU-T (CCITT) Study Group VIII & ISO/IEC JTC 1/SC 29/WG 10 (JPEG) (1992). Information technology — Digital compression and coding of continuous-tone still images: Requirements and guidelines. ITU-T Recommendation T.81 (18 September 1992) / ISO/IEC 10918-1:1994 — JPEG baseline DCT bitstream; Annex K quantisation tables scale by the canvas.toBlob quality argument (0.92 in this tool's JPG output path).
- W3C (PNG Working Group) (2003). Portable Network Graphics (PNG) Specification (Second Edition). W3C Recommendation 10 November 2003 / ISO/IEC 15948:2004 — PNG output format for sources with alpha; preserves 8-bit alpha per RGBA pixel byte-exactly through canvas.toBlob('image/png').
- International Electrotechnical Commission (IEC) (1999). Multimedia systems and equipment — Colour measurement and management — Part 2-1: Default RGB colour space — sRGB. IEC 61966-2-1:1999 — default 8-bit RGB colour space the Canvas 2D path operates in; source images without an embedded ICC profile are interpreted as sRGB by the browser decoder during the load step.
Son las especificaciones del W3C, ISO/IEC, ITU-T e IETF que la herramienta implementa o sobre las que se apoya. Localízalas en w3.org, iso.org, itu.int o datatracker.ietf.org.
Por Marco B. ·