Skip to content

Filtro Sepia online

En el navegador — sin subida
Última verificación mayo 2026 — corre en tu navegador

Filtro Sepia — Transformación Microsoft .NET / GDI+ ColorMatrix vía Loop per-píxel de Canvas ImageData

Aplica un tono sepia vía la transformación canónica ColorMatrix de Microsoft .NET / GDI+ publicada por Stephen Toub en MSDN Magazine de enero de 2005 (artículo 'Sepia Tone, StringLogicalComparer, and More') y propagada ampliamente a través de tutoriales de procesamiento de imagen C# / .NET desde entonces. La matriz de color 3×3 mapea cada píxel (R, G, B) a (R', G', B') vía: R' = min(255, 0,393R + 0,769G + 0,189B); G' = min(255, 0,349R + 0,686G + 0,168B); B' = min(255, 0,272R + 0,534G + 0,131B). Cada canal de salida es la misma combinación lineal del RGB original con pesos cargados al verde (0,769 para R', 0,686 para G', 0,534 para B' — el canal de alta luminancia domina) y recortados al techo de 8 bits de 255. El resultado es un rango tonal marrón-amarillo cálido imitando el proceso fotoquímico de viraje a sepia (conversión de la imagen plateada en soluciones alcalinas de tiosulfato o polisulfuro, usado en fotografía de los siglos XIX-XX para extender la vida útil de impresiones de archivo sustituyendo la plata metálica por sulfuro de plata químicamente más estable). La conversión corre localmente vía WHATWG Canvas ctx.getImageData() → multiplicación matricial per-píxel → ctx.putImageData(). La salida preserva el formato origen: PNG → PNG (alfa RGBA preservado); JPG → JPG calidad 0,92 vía canvas.toBlob (Anexo K de ITU-T T.81). La propia documentación de Microsoft .NET ColorMatrix señala que estos coeficientes son 'una solución posible' — están ampliamente adoptados pero no son la única matriz sepia canónica; otras variantes publicadas (estilo Polaroid, derivadas de Hunter-Lab, derivadas de ACES) producen perfiles tonales sutilmente distintos. Los archivos nunca salen del dispositivo.

Relacionado: Escala de Grises Filtros de Imagen Enfocar Imagen Imagen Sepia Desenfocar Imagen Brillo y Contraste

Cómo aplicar un tono sepia

  1. Arrastra tu imagen a la herramienta o haz clic para seleccionarla. El decodificador integrado del navegador carga el origen al Canvas a dimensiones nativas.
  2. La herramienta auto-aplica la matriz sepia .NET por defecto — alterna los botones Sepia/Original para comparar el filtro contra el origen.
  3. El loop per-píxel ejecuta la matriz de color 3×3 en cada triple (R, G, B), con cada canal de salida una combinación lineal distinta del RGB origen; el peso del canal verde domina cada salida para el mapeo tonal marrón-amarillo cálido canónico.
  4. Previsualiza el resultado. Para un efecto más sutil, mezcla la salida sepia con el original en un editor de imagen a opacidad reducida (p. ej. 50% sepia, 50% original).
  5. Pulsa Descargar para guardar la copia sepia. El original queda intacto en el disco — los archivos nunca salen del dispositivo.

Casos de uso comunes

  • Dar a retratos un aire fotográfico vintage reminiscente de impresiones de gelatina-plata del siglo XIX sin abrir un editor entero de fotos.
  • Crear una estética de 'foto envejecida' para elementos de diseño de línea temporal o retrospectiva (sección historia-de-la-empresa, páginas estilo museo-exhibit).
  • Producir una pasada tonal cálida para un set de fotos de viaje antes de publicarlas como álbum coherente.
  • Estilizar un set de fotos B-roll de fondo para una presentación para que se sientan coherentes como telón sin competir con el primer plano.
  • Producir una referencia de vista previa de un solo tono para proyectos estilo impresión-de-archivo donde la salida final será viraje sepia fotoquímico real (el sepia digital aproxima la estética visual).

Preguntas frecuentes

¿De dónde viene la matriz sepia?

La ColorMatrix 0,393/0,769/0,189 + 0,349/0,686/0,168 + 0,272/0,534/0,131 fue publicada primero por Stephen Toub en el artículo de MSDN Magazine de enero de 2005 'Sepia Tone, StringLogicalComparer, and More' (learn.microsoft.com/en-us/archive/msdn-magazine/2005/january/net-matters-sepia-tone-stringlogicalcomparer-and-more) para la transformación matriz-de-color del Graphics.DrawImage de Microsoft .NET / GDI+. La matriz se ha propagado ampliamente desde entonces a través de tutoriales de procesamiento de imagen C# / .NET, Adobe AS3, y ports de JavaScript canvas-filter. La propia documentación de Microsoft señala que estos coeficientes son 'una solución posible' — no hay una matriz sepia canónica única; variantes estilo Polaroid y derivadas de Hunter-Lab existen con perfiles tonales sutilmente distintos.

¿En qué se diferencia sepia de grises?

Los grises (cluster 15 OI herramienta grayscale-image) conservan solo la luminancia Y según ITU-R BT.601 (0,299R + 0,587G + 0,114B) — los tres canales de salida iguales a Y. El sepia mantiene tres canales de salida distintos pero cada uno es una combinación lineal con peso al verde del RGB origen, produciendo un rango tonal marrón-amarillo cálido en lugar de grises puros. La transformación sepia es lo que se convierte el grises si remapeas el único canal Y de vuelta a (R', G', B') con el patrón de ponderación verde-dominante característico del viraje fotográfico a sulfuro de plata.

¿Puedo ajustar la intensidad del sepia?

Esta herramienta aplica la matriz fija de Microsoft .NET / GDI+ sin un deslizador de intensidad. Para un efecto más sutil, mezcla la salida sepia con el original en un editor de imagen a opacidad reducida (p. ej. capa sepia al 50% sobre el original para obtener sepia a media-intensidad). Para un efecto más fuerte, aplica el sepia dos veces en secuencia — pero la matriz es no-lineal en los límites de recorte (valores que llegan a 255 se quedan en 255), así que doble-sepia produce una amplificación no-uniforme.

¿Es reversible?

No. La matriz 3×3 tiene filas linealmente-dependientes (cada canal de salida es aproximadamente verde-ponderado) así que el mapeo `(R, G, B) → (R', G', B')` es muchos-a-uno — múltiples colores origen mapean a la misma salida sepia. Desde un valor sepia por sí solo, no hay forma de recuperar el triple (R, G, B) original. Guarda el archivo original en color si puedes necesitar la versión en color más tarde.

¿Se sube mi imagen?

No. La cadena decodificar + ctx.getImageData + multiplicación matricial per-píxel + 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.

Transformación sepia Microsoft .NET / GDI+ ColorMatrix + herencia fotoquímica del sepia

La transformación sepia aplica los coeficientes canónicos del Microsoft .NET / GDI+ ColorMatrix publicados primero en el artículo de MSDN Magazine de Stephen Toub de enero de 2005 'Sepia Tone, StringLogicalComparer, and More' (learn.microsoft.com/en-us/archive/msdn-magazine/2005/january). La matriz de color 3×3 mapea cada píxel (R, G, B) a (R', G', B') vía tres combinaciones lineales independientes del triple RGB origen, con el peso del canal verde dominando cada canal de salida (0,769 para R', 0,686 para G', 0,534 para B') porque el verde carga la mayor luminancia perceptual según ITU-R BT.601 (cluster 15 OI estándar de escala de grises). La matriz se propaga ampliamente a través de tutoriales de procesamiento de imagen C# / .NET, Adobe AS3, muestras de código GDI+ Graphics.DrawImage, y ports de JavaScript canvas-filter desde 2005. La propia documentación de Microsoft reconoce que estos números son 'una solución posible, y los números pueden ajustarse para adaptarse mejor a necesidades individuales' — no hay una matriz sepia canónica única; variantes estilo Polaroid (algo más frías), variantes derivadas de Hunter-Lab (más saturadas), y variantes derivadas de ACES (HDR-aware) producen todas perfiles tonales sutilmente distintos. Contexto histórico: el proceso fotográfico de viraje a sepia se originó en la fotografía de plata-impresión del siglo XIX (uso comercial ~década de 1880) — las impresiones blanco-y-negro de gelatina-plata se sumergían en soluciones alcalinas de tiosulfato o polisulfuro que convertían la imagen plateada metálica en sulfuro de plata, produciendo simultáneamente el característico tinte marrón-amarillo cálido Y extendiendo la vida útil de impresiones de archivo al sustituir la plata metálica más químicamente reactiva. El sepia digital moderno es una simulación de matriz de color de este proceso fotoquímico; produce la estética visual pero obviamente no replica la química archivística. La conversión corre localmente vía WHATWG Canvas ctx.getImageData() → multiplicación matricial per-píxel con recorte a 8 bits → ctx.putImageData(). 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, aproximadamente 1-2% pérdida adicional perceptualmente invisible respecto al origen).

  • Transformación sepia Microsoft .NET / GDI+ ColorMatrix (Toub 2005 MSDN Magazine 'Sepia Tone, StringLogicalComparer, and More')
  • Multiplicación matricial 3×3 per-píxel: R' = 0,393R + 0,769G + 0,189B; G' = 0,349R + 0,686G + 0,168B; B' = 0,272R + 0,534G + 0,131B (recortado a 255)
  • Peso del canal verde dominante en cada canal de salida (según la herencia de luminancia perceptual de ITU-R BT.601)
  • WHATWG Canvas ctx.getImageData() + for-loop sobre Uint8ClampedArray + ctx.putImageData()
  • Alterna entre sepia-activado 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
  • 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)
  • Toub, S. (Microsoft Corporation) (2005). .NET Matters: Sepia Tone, StringLogicalComparer, and More. MSDN Magazine, January 2005 (learn.microsoft.com/en-us/archive/msdn-magazine/2005/january/net-matters-sepia-tone-stringlogicalcomparer-and-more) — the canonical source for the Microsoft .NET / GDI+ ColorMatrix sepia transform: R' = 0.393R + 0.769G + 0.189B; G' = 0.349R + 0.686G + 0.168B; B' = 0.272R + 0.534G + 0.131B. Microsoft's own documentation notes these coefficients are 'one possible solution' — they're widely propagated through C# / .NET image-processing tutorials, Adobe AS3, and JavaScript canvas-filter ports since 2005.
  • Microsoft Corporation (live). System.Drawing.Imaging.ColorMatrix — Graphics.DrawImage colour-matrix transform. learn.microsoft.com/en-us/dotnet/api/system.drawing.imaging.colormatrix — the .NET / GDI+ API for applying 5×5 colour matrix transforms to images via Graphics.DrawImage; the sepia matrix here is one common 3×3 variant published in Toub 2005.
  • International Telecommunication Union (ITU-R, formerly CCIR) (1982). ITU-R BT.601 — Luma weighting that dominates sepia matrix coefficients. itu.int/rec/R-REC-BT.601 — the canonical luma weighting (0.299R + 0.587G + 0.114B) underlies why the green-channel weights dominate each output channel of the sepia matrix (0.769 for R', 0.686 for G', 0.534 for B'); green carries the most perceptual luminance per BT.601.
  • WHATWG (live). HTML Living Standard — Canvas 2D Context: getImageData() + putImageData(). html.spec.whatwg.org/#dom-context-2d-getimagedata + html.spec.whatwg.org/#dom-context-2d-putimagedata — per-pixel ImageData manipulation pipeline; the sepia matrix multiplies the source RGB triple by the 3×3 matrix with 8-bit clamping.
  • WHATWG (live). HTML Living Standard — HTMLImageElement (browser-native raster decoding). html.spec.whatwg.org/#htmlimageelement — universal browser entry point for raster format decode.
  • WHATWG (live). HTML Living Standard — HTMLCanvasElement.toBlob(). html.spec.whatwg.org/#dom-canvas-toblob — re-encodes canvas pixel buffer to Blob.
  • 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.
  • 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.
  • 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.

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.

Patrocinado

Por ·