Forem: Anthony Dito

Learn the Difference Between Exposure and Brightness

Anthony Dito — Thu, 29 Jan 2026 05:10:25 +0000

BrushCue contains two tools that appear to do the same thing: the Exposure Adjustment and the Brightness Adjustment tools. This post will explain the difference between the two. In doing so, we will learn a bit about color modifications in image editing workflows.

How Exposure Adjustments Work

An exposure adjustment is simpler to implement technically, so let's start there. As you probably know, digital cameras and displays work by using R, G, and B colors. R, G, and B correspond to the amount of red, green, and blue light. The exposure adjustment simply multiplies each component by a factor. This has a similar effect to changing the exposure duration on a camera.

How Brightness Adjustments Work

The Brightness Adjust tool has an intermediate step: it converts the color to OkLab, adjusts the lightness, then converts back to RGB. If you have read other posts of mine, you probably know where this is going. OkLab is a perceptual color space, which means equal steps in OkLab are meant to feel like equal steps to the human eye. Doing the adjustment in OkLab lets us change brightness more uniformly across different hues.

When you would use each

If you want to make a scene lighter or darker for aesthetic purposes, use Brightness Adjust. Because it works in OkLab, the change tends to look more even across colors and better matches how we perceive lightness.

Exposure Adjust still has a place. It behaves like a camera exposure change, so it is useful when you want a more “photographic” effect or you are matching exposure changes elsewhere in a pipeline. It is also simple and predictable in linear RGB, which can be helpful for technical tweaks.

Vibrancy vs Saturation

Anthony Dito — Sat, 24 Jan 2026 00:01:07 +0000

What a Vibrancy Adjustment Looks Like

What a Saturation Adjustment Looks Like

First, Understanding OkLab

On BrushCue, we do our saturation and vibrancy adjustment using OkLab color. This is a perceptual color space — meaning it is designed to store colors similarly to how humans visualize them. This is opposed to RGB colors which stores color as how they will be used on the display. The R, G and B control how much red, green and blue light comes out from each pixel on the display.

Mathematical distances between R, G, B do not correspond to distance in how far a color is perceived to be from another. This is what OkLab solves for and why we use it for many color adjustments.

OkLab has two parts. There is an L component which specifies the lightness of the color. There are A and B components that specifies the hue and chroma of the color. You can think of the A and B as plotting a point on a graph and the angle of that point being the hue of the color.

The A and B components of the OkLab color can be visualized with the interactive component on our website here. The key point - colors toward the center are more muted than colors toward the edge.

How saturation works

OkLab cleanly separates the color (A and B) from the lightness (L). To modify the saturation, we increase or decrease the distance of the A and B components are from the origin. This is straightforward, multiply the A and B components by a scale. The code for how we do this is below.

fn perform_saturation_adjustment(input: vec4<f32>, scale: f32) -> vec4<f32> {
    let l = input.x;
    let a = input.y;
    let b = input.z;
    let alpha = input.w;
    return vec4<f32>(l, a * scale, b * scale, input.w);
}

How vibrancy works

Instead of uniformly increasing the A and B of a color like we do for saturation, vibrancy changes are subtler. Vibrancy changes selectively increase more muted colors (color closer to the origin) at a higher rate than more vibrant colors (colors further from the origin). Doing this allows for more natural-looking color enhancements. The code for how we do this is shared below. We calculate the saturation of the image, flip it so we have a value closer to 1 for muted colors and a value closer to 0 for saturated colors, apply the boost to the chroma and then recompute the A and B components.

fn perform_vibrancy_adjustment(input: vec4<f32>, vibrance_boost: f32) -> vec4<f32> {
    let l = input.x;
    let a = input.y;
    let b = input.z;
    let alpha = input.w;

    // measure the current saturation
    let chroma = sqrt(a * a + b * b); 

    // calculates a factor to scale by. chromas close to 0 get 1, chromas close to the max get 0.
    let saturation_factor = 1.0 - pow(chroma, 0.5);

    // apply the boost by multiplying the chroma by the boost scaled boost amount.
    let adaptive_boost = mix(vibrance_boost, 1.0, saturation_factor);
    let boosted_chroma = chroma * adaptive_boost;

    // recalculate the A and B
    let hue = atan2(b, a);
    let new_a = cos(hue) * boosted_chroma;
    let new_b = sin(hue) * boosted_chroma;

    return vec4<f32>(l, new_a, new_b, alpha);
}

Compared

As you can see in the above images, the vibrancy is a subtler, more natural effect. We boost the more muted colors while leaving the vibrant colors mostly unchanged. When you want realistic enhancements to the colors of your images, vibrance modifications are typically better.

This doesn't mean that saturation adjustments are always inferior. In practice, it rarely makes sense to reduce the vibrancy of an image. Doing so makes muted colors even more muted. A better way to make an image more muted would be to perform a saturation adjustment with a value less than 1. Additionally, saturation adjustments are uniform across the color range, which is an advantage in some cases—particularly when correcting an error in the original image.

Check out our saturation tool and our vibrancy tool.

How RGB Color Shift Effects Works

Anthony Dito — Fri, 23 Jan 2026 15:58:20 +0000

Decompose into red, green and blue components

To do this decomposition, we use the Composition Linear Transform operation. This performs a matrix multiplication on the R, G, B and A components of the pixel values. Using this trick, we can pull out the individual color stimulus value. The below table shows the individual components and the matrices created to extract them.

Red	Green	Blue

1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1	0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1	0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1

Combine Back with an Offset

Now that we have the individual components, we recombine with an addition blend with an offset. The offset causes the image to be composited askew, which creates the glitch effect.

Red + Green	(Red + Green) + Blue

After the blends are done, we apply a crop to take out that green space at the bottom and right.

Wrapping Up

With this process, we can create an RGB color shift effect which makes it look like the colors are glitching. You can use our tool by going here. Play around with different offset values and your own images.

How Pixelate Effects Work

Anthony Dito — Sat, 17 Jan 2026 22:28:09 +0000

What a pixelate effect is

To understand what the pixelate effect is doing, first, a brief introduction to what a pixel is. You may think of a pixel as a little square LED on your display. For the purposes of image editing, that is not quite right. It is better to think of a pixel as an infinitesimal sample of color at a particular point — no area, just location.

With this distinction in mind, we need to trick the display into behaving like it is low-resolution.

An initial attempt, lowering the image resolution

Now that we know that pixels are just samples of an image at a given point, pixelating an image should be easy! We just scale it to reduce the number of samples. Wrong. Doing so produces the image below.

Reducing the size of the image does not account for how computers actually display images. When scaling up an image, your computer will merge nearby pixels in a process called anti-aliasing. While this makes scaling images up and down look better, it breaks our pixelation effect. Let's now try to trick the display.

The BrushCue approach

To build a pixelation effect, we need to work around the fact that computers will blend nearby pixels when they scale. To do this, we keep the image resolution the same but just use the same color in squares of a given size in the image.

In BrushCue, the shader for how we do this is:

@group(0) @binding(0) var input_texture: texture_2d<f32>;
@group(0) @binding(1) var<uniform> pixel_size: i32;

fn do_transformation(input: vec4<f32>, position: vec2<u32>) -> vec4<f32>
let pix_size = u32(pixel_size);
let block_corner = (position / pix_size) * pix_size;
let center_coord = block_corner + pix_size / 2u;
let result = textureLoad(input_texture, center_coord, 0);
return result;
}

This code keeps the image the same size but creates squares of the same color. We take the size of a square, get the color at the center and use that color for each pixel.

And now we have our result. A pixelated image that actually looks pixelated when displayed on your screen.

To use the BrushCue tool to pixelate your own image, click here.

How to Create a Striking Grayscale Effect

Anthony Dito — Sat, 17 Jan 2026 22:21:08 +0000

In this post we will create a striking grayscale effect by examining grayscale, thresholds, and S-curves.

For this post, we will be converting the Calling of Saint Matthew by Caravaggio into grayscale. Caravaggio's paintings are striking in their use of light. We aim to preserve that quality while transforming this masterwork to grayscale.

A Simple Grayscale

First, we will use the grayscale tool provided by BrushCue. This tool works by converting each pixel from an RGB color to an XYZ color and extracting the luminance. The intricacies of doing this — and what XYZ color is for that matter — are outside the scope of this post. The key thing is that the Y in an XYZ color represents luminance. We take that Y and then set the X and Z values to 0 to create our grayscale image.

While this is a technically correct grayscale, it is far from striking. The image is too gray for my taste.

Using a Threshold

To make the grayscale more striking, we want more contrast in the image. If we take this to the extreme, we would want all the colors to either be white or black. BrushCue provides a tool to do this. This is the Lightness Threshold tool. The use of the tool can be seen below.

The colors are either white or black, effectively maximizing the possible contrast in this image. An interesting effect. Not what we were going for. What we want is something between the normal grayscale and this color threshold.

Using a Lightness S-Curve

To get a striking grayscale that pushes more of the colors toward white and black but preserves the detail, we are going to use the concept of an S-Curve. An S-Curve is one of the curve types that BrushCue allows for modifications to the color of an image. The magic of an S-Curve is that it can increase the contrast of an image by pushing values toward 0 and 1.

To visualize this, check out the interactive component in the original post here. The value of 0 corresponds to black, and the value of 1 corresponds to white. The x-axis is the input and the y-value is the output. Hover over the curve to see what happens. You will see that for x values below 0.5 the output (or y-value) is lower. For x values greater than 0.5, the y-value is higher. This trick increases the separation between the dark and light areas of the image. This creates a stark grayscale effect.

To use this mathematical concept, BrushCue provides an operation called Composition Lightness Curve. The use of this operation is demonstrated in the tool High Contrast Grayscale which you can use to test out different values for the S-Curve. Using this tool, we produce the image below.

This is the effect I was looking for. There is a striking difference between the dark and light areas of the image while still preserving the detail of the standard grayscale operation. I hope Caravaggio would approve modifying his work in such a manner — at least for learning purposes.