CSS & Design FXShader

SVG FeColorMatrix & Duotone Shader

Manipulate RGBA color channels with mathematical precision using SVG feColorMatrix filter primitives. Includes Spotify duotone presets, Brettel/Vienot color blindness simulation matrices (protanopia, deuteranopia, tritanopia), and live custom 4x5 matrix sliders with CSS export.

Color Matrix Shaders

Upload Photo

Duotone Styles

A11y Color Blindness Simulation

Stylized & Thermal FX

4x5 Matrix Coefficients[R G B A Offset]

Real-Time GPU Hardware ShaderCSS filter: url(#fe-live-matrix)

Original Asset

Shader Output (Real-time)

SVG & CSS DefinitionfeColorMatrix

<svg style="display: none;">
  <filter id="color-matrix-shader">
    <feColorMatrix 
      type="matrix" 
      values="
        0.21 0.72 0.07 0.00 0.04
        0.21 0.72 0.07 0.00 0.85
        0.21 0.72 0.07 0.00 0.55
        0.00 0.00 0.00 1.00 0.00" 
    />
  </filter>
</svg>

SVG feColorMatrix RGBA Transformation & Color Vision Accessibility

Technical guide on 4x5 linear color matrices, duotone shaders, and dichromatic simulation algorithms.

Architecture Overview

The SVG <feColorMatrix> filter primitive provides hardware-accelerated linear algebraic color transformations on RGBA channels directly in the browser DOM. Unlike simple CSS opacity or hue-rotate filters, a 4x5 color matrix enables independent remapping of all color components, allowing advanced duotone styling, high-contrast thermal visualizations, and precise WCAG color blindness simulations.

Core Mechanics & Implementation Details

The 4x5 Linear Color Matrix Equation

The filter computes output color values [R', G', B', A'] by multiplying the input pixel vector [R, G, B, A, 1] by a 20-element transformation matrix: R' = a00*R + a01*G + a02*B + a03*A + a04. The first four columns represent scale multipliers for each channel, while the fifth column provides a constant additive bias value.

Duotone Shader Mathematics

Duotone effects map luminance to a two-color gradient. Luminance Y is first calculated via human perceptual weights (0.2126R + 0.7152G + 0.0722B). The target highlights and shadows colors (C_high, C_low) are then linearly blended along the luminance axis: Output = Y * C_high + (1 - Y) * C_low.

Dichromatic Color Blindness Simulation (Brettel & Vienot)

Simulating human color vision deficiency requires projecting the trichromatic sRGB color space onto a dichromatic confusion plane. For protanopia (missing L-cones), reds and greens collapse along confusion lines. The matrix multiplies input colors by physiologically measured transformation coefficients to render what color-blind users experience.

Engineering Specifications

Parameter	Standard / Value	Engineering Scope
W3C Standard	Filter Effects Module Level 1 (feColorMatrix)	Hardware-accelerated DOM filter primitive
Matrix Dimensions	4 Rows by 5 Columns (20 floating point values)	Linear transformation plus constant offset
Performance	GPU Shader Acceleration via CSS filter: url(#id)	60fps hardware-composited rendering
Supported Deficiencies	Protanopia, Deuteranopia, Tritanopia, Achromatopsia	Physiological color confusion projections
Export Targets	Inline SVG Filter, CSS class, Transcoded PNG	Universal web and graphic asset outputs

Recommended Best Practices

•Use color blindness simulation matrices during UI design audits to ensure crucial alert states (red/green) remain distinguishable.
•Combine duotone SVG filters with CSS mix-blend-mode to create immersive brand imagery without editing master photo assets.
•Declare the SVG filter definition once in the root document and reference it across multiple elements via filter: url(#filter-id).

Common Pitfalls & Anti-Patterns

•Forgetting that feColorMatrix operates on normalized [0, 1] floating-point values, not [0, 255] byte integers.
•Setting the alpha row (fourth row) multipliers incorrectly, causing unintentional transparency or black cutouts.

SVG feColorMatrix Filter Definition & CSS Binding

<svg style="display: none;">
  <defs>
    <filter id="spotify-duotone">
      <feColorMatrix type="matrix" values="
        0.21 0.72 0.07 0 0.1
        0.21 0.72 0.07 0 0.85
        0.21 0.72 0.07 0 0.65
        0    0    0    1 0" />
    </filter>
  </defs>
</svg>

<style>
  .brand-hero-image {
    filter: url(#spotify-duotone);
  }
</style>

Key Capabilities & Highlights

Interactive 4x5 RGBA color transformation matrix sliders

Curated Duotone presets (Cyberpunk, Spotify Emerald, Sunset, Midnight)

A11y Color Blindness simulators: Protanopia, Deuteranopia, Tritanopia, Achromatopsia

Retro Kodachrome, Sepia, and Thermal vision color mappings

Split-view interactive before/after preview comparison

Copy pure SVG <filter> code, CSS filter property, or download filtered PNG

Explore More Developer Utilities

View all tools

Vector & SVGPopular

SVG to Code Studio

Convert SVGs into clean React (JSX/TSX), Vue 3, Flutter, React Native, SwiftUI components and CSS Data URIs.

Open tool

App & Mobile IconsEssential

Universal App Icon & Favicon Studio

Generate complete iOS, Android Adaptive Icons, PWA, and Web Favicon asset packages with single-click ZIP download.

Open tool

Social & Code MockupTrending

Terminal & Code Screenshot Styler

Transform code snippets, bash logs, and SQL into stunning social media cards with macOS window frames and gradients.

Open tool