Color Matrix Guide
Comprehensive guide on using 5x5 Color Matrices for advanced image manipulation in Novadesk.
Table of Contents
TIP
Learning Tip: Start with simple transformations like grayscale and invert before moving to complex effects like sepia or polaroid. Each example builds upon fundamental matrix concepts.
The colormatrix property in Image Elements enables advanced color manipulation using a 5x5 transformation matrix. This comprehensive guide explains the mathematical foundations and provides practical examples for creating stunning visual effects.
Understanding Color Matrix Fundamentals
A color matrix is a mathematical tool that transforms the color values of every pixel in an image. Think of it as a recipe that tells the computer how to mix the original red, green, blue, and alpha channels to create new colors.
How Color Matrices Work
Every pixel in a digital image has four color components:
- Red (R): Controls the red intensity (0.0 to 1.0)
- Green (G): Controls the green intensity (0.0 to 1.0)
- Blue (B): Controls the blue intensity (0.0 to 1.0)
- Alpha (A): Controls transparency (0.0 = transparent, 1.0 = opaque)
The color matrix takes these four values and calculates new values for each component using weighted combinations.
The 5x5 Matrix Structure
While we work with RGBA values (4 components), the matrix is 5x5 to enable translations (adding constant values). The extra dimension allows us to:
- Mix channels: Blend R, G, B, A components in different proportions
- Add offsets: Shift all colors by fixed amounts
- Combine operations: Perform multiple transformations in one step
Visualizing the Transformation
Imagine each pixel's color as a point in 4-dimensional space. The matrix defines:
- How much each original channel contributes to each new channel
- Constant offsets to add to the final result
For example, to make all colors warmer:
- Increase red contribution from green and blue channels
- Decrease blue contribution from all channels
- Add a small positive offset to red
Mathematical Representation
For a pixel with original values [R, G, B, A], the new values [R', G', B', A'] are calculated as:
R' = (RR×R) + (RG×G) + (RB×B) + (RA×A) + RW
G' = (GR×R) + (GG×G) + (GB×B) + (GA×A) + GW
B' = (BR×R) + (BG×G) + (BB×B) + (BA×A) + BW
A' = (AR×R) + (AG×G) + (AB×B) + (AA×A) + AWWhere:
- RR, RG, RB, RA: Weights for calculating new Red
- GR, GG, GB, GA: Weights for calculating new Green
- BR, BG, BB, BA: Weights for calculating new Blue
- AR, AG, AB, AA: Weights for calculating new Alpha
- RW, GW, BW, AW: Constant offsets added to each channel
Key Matrix Properties
Identity Matrix: Leaves colors unchanged
javascript[1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1]Scaling: Multiplies channel values
- Values > 1: Brighten/amplify
- Values < 1: Darken/reduce
- Negative values: Invert
Translation: Adds constant values
- Positive values: Shift toward white
- Negative values: Shift toward black
Channel Mixing: Cross-pollinates color channels
- Non-zero off-diagonal elements create color blending effects
Practical Applications
Color matrices enable countless creative possibilities:
- Color Correction: Adjust white balance, contrast, saturation
- Stylization: Create vintage, cinematic, or artistic looks
- Special Effects: Simulate lighting conditions, film stocks, or filters
- Technical Processing: Remove backgrounds, isolate colors, enhance details
Understanding these fundamentals will help you craft precisely the visual effects you want to achieve.
Understanding the Matrix
The color matrix operates on the RGBA color vector of each pixel. While pixels are typically represented as [R, G, B, A], the matrix transformation uses a 5-element vector [R, G, B, A, 1] to enable color translations (offsets) and more complex transformations.
INFO
Mathematical Foundation: Think of each pixel's color as a point in 4-dimensional space. The matrix defines how to transform this point to create new colors.
The 5x5 matrix is flattened into a 25-element array in your code. Here's how to visualize the transformation:
javascript
colorMatrix: [
RR, RG, RB, RA, RW, // Red component weights
GR, GG, GB, GA, GW, // Green component weights
BR, BG, BB, BA, BW, // Blue component weights
AR, AG, AB, AA, AW, // Alpha component weights
TR, TG, TB, TA, TW // Translations (offsets)
]- Rows 1-4: Determine how much each input channel contributes to the output Red, Green, Blue, and Alpha values respectively.
- Row 5: Represents global color shifts (translations) added to all pixels.
- Column W: Usually 0 for color weights and 1 for the bottom-right identity element.
TIP
Visualization: Each row shows the "recipe" for creating one output channel from all input channels. Row 1 creates the new Red value by mixing the original R, G, B, and A values according to the coefficients.
TIP
Novadesk supports both 20 numbers (5x4 Direct2D format) and 25 numbers (5x5 standard format). If 25 numbers are provided, Novadesk automatically converts them to the 5x4 format by skipping the 5th column ("W") of each row.
Combining Effects
Image elements process effects in a specific sequence:
- Grayscale Stage: If
grayscale: trueis set, it converts the image to grayscale first using luminance weights (0.33R + 0.59G + 0.11B). - Modification Stage: Your
colormatrixorimageTintis then applied to either the original color image or the grayscale result.
TIP
Creative Workflow: Use grayscale: true + color matrix to create duotone effects, or apply color matrices to full-color images for dramatic color grading.
This allows you to, for example, turn an image into grayscale and then use a Color Matrix to apply a custom sepia or duotone tint.
Original Image
All examples below apply transformations to this original image:
Usage Examples
Grayscale
Converts the image to grayscale by calculating luminance (perceived brightness) using weighted averages of RGB channels.
TIP
Key Concept: Human eyes perceive green as brighter than red, and red as brighter than blue. That's why green gets the highest weight (0.59) in the luminance calculation.
javascript
// Grayscale - preserves luminance perception
colorMatrix: [
0.33, 0.33, 0.33, 0, 0, // New Red = avg(R,G,B)
0.59, 0.59, 0.59, 0, 0, // New Green = avg(R,G,B)
0.11, 0.11, 0.11, 0, 0, // New Blue = avg(R,G,B)
0, 0, 0, 1, 0, // Alpha unchanged
0, 0, 0, 0, 1 // No color shift
]Mathematical Formula: Luminance = 0.33×R + 0.59×G + 0.11×B
Invert
Inverts all color channels by subtracting each value from 1.0 (or 255 in 8-bit), producing a photographic negative effect.
INFO
Formula: New_Value = 1.0 - Original_Value
This is achieved by multiplying by -1 and adding 1: (-1 × Original) + 1
javascript
// Invert - creates photographic negative
colorMatrix: [
-1, 0, 0, 0, 0, // New Red = -Old_Red
0, -1, 0, 0, 0, // New Green = -Old_Green
0, 0, -1, 0, 0, // New Blue = -Old_Blue
0, 0, 0, 1, 0, // Alpha unchanged
1, 1, 1, 0, 1 // Add 1 to each RGB channel
]Result: Light colors become dark, dark colors become light, creating a classic negative film effect.
Swap RGB to BGR
Swaps the Red and Blue channels, effectively converting between RGB and BGR color formats.
INFO
Use Case: Different graphics APIs and file formats use different channel orders. This transformation helps convert between RGB (most common) and BGR (used in some Windows APIs).
javascript
// Swap RGB to BGR - channel reordering
colorMatrix: [
0, 0, 1, 0, 0, // New Red = Old Blue
0, 1, 0, 0, 0, // New Green = Old Green (unchanged)
1, 0, 0, 0, 0, // New Blue = Old Red
0, 0, 0, 1, 0, // Alpha unchanged
0, 0, 0, 0, 1 // No color shift
]Matrix Logic: This is essentially a permutation matrix that rearranges the color channels without changing their values.
Sepia
Applies a warm, brownish tone characteristic of vintage photographs from the early 1900s.
INFO
Historical Context: Sepia toning was originally used to increase the archival life of photographs and became associated with nostalgia and antiquity.
javascript
// Sepia - vintage photographic effect
colorMatrix: [
0.393, 0.349, 0.272, 0, 0, // New Red emphasizes warm tones
0.769, 0.686, 0.534, 0, 0, // New Green boosted for golden effect
0.189, 0.168, 0.131, 0, 0, // New Blue reduced for warmth
0, 0, 0, 1, 0, // Alpha unchanged
0, 0, 0, 0, 1 // No additional color shift
]Color Theory: The matrix reduces blue contribution while boosting red and green, creating the characteristic amber-brown tone.
High Contrast Black & White
Creates a stark black and white effect by amplifying differences and shifting the mid-tones.
TIP
Contrast Enhancement: Values above 1.0 amplify the signal, while negative translations in the last row push mid-values toward extremes (black or white).
javascript
// High Contrast Black & White
colorMatrix: [
1.5, 1.5, 1.5, 0, 0, // Amplify all channels by 1.5x
1.5, 1.5, 1.5, 0, 0, // Same amplification for consistency
1.5, 1.5, 1.5, 0, 0, // Uniform treatment
0, 0, 0, 1, 0, // Alpha unchanged
-1, -1, -1, 0, 1 // Subtract 1 from each channel
]Effect: Light areas become whiter, dark areas become darker, eliminating subtle gray tones.
Polaroid
Simulates the high-contrast, slightly shifted look of instant film.
javascript
// Polaroid Color
colorMatrix: [
1.438, -0.062, -0.062, 0, 0,
-0.122, 1.378, -0.122, 0, 0,
-0.016, -0.016, 1.483, 0, 0,
0, 0, 0, 1, 0,
-0.03, 0.05, -0.02, 0, 1
]
White to Alpha
Converts white pixels to transparent by subtracting RGB values from the alpha channel.
TIP
Real-world Application: Perfect for preparing logos or icons with white backgrounds for overlay on different colored surfaces.
javascript
// White to Alpha - makes white areas transparent
colorMatrix: [
1, 0, 0, -1, 0, // New Red = Old_Red - Alpha
0, 1, 0, -1, 0, // New Green = Old_Green - Alpha
0, 0, 1, -1, 0, // New Blue = Old_Blue - Alpha
0, 0, 0, 1, 0, // Preserve original alpha
0, 0, 0, 0, 1 // No additional shift
]Logic: Pure white pixels (R=1, G=1, B=1) become transparent because New_RGB = 1 - 1 = 0. Other colors remain visible.
