How image editors often get color wrong

Traditional image editing tools often get color wrong. Color science has come a long way since the early days of computing. Most image editors either don’t have modern methods of handling color or have the more modern options tucked away in obscure menus.

papaya.io is a fresh take on image editing, with non-destructive editing right in your browser. Last month, we introduced new ways of blending multiple images. On a similar theme, today, we’re releasing improved color mixing in papaya.io.

We aspire to handle color correctly by default, without you having to understand the technical details behind color science. We’ll dig into some examples and a little bit of theory in this blog post.

The current problem with color mixing

A simple way to look at the problem with color mixing is to draw a soft red circle on a green background. Many image editors will draw this with a dark ring around the circle, where the red foreground mixes with the green background, as seen in the left half of the image below. This problem arises from color mixing and affects many image editors and web browsers. However, there is a better way to mix colors.

Modern color science will allow more visually pleasing results, as shown on the right half of the image. Observe how the red blends smoothly into green without any noticeable dark (or bright) ring.

What are pixels, and how do you mix them?

A pixel is just a group of numbers in an image. Each of these numbers is called a channel. In papaya.io, each pixel has four channels: Red, Green, Blue, and Alpha. Alpha controls how opaque the pixel is. The rest contain color information and are collectively called sRGB (standard Red Green Blue).

When mixing two images, a computer combines one pixel from each image to produce a new pixel.

A history lesson: sRGB color and linear color

In the example image below, the middle color is the simple average of the green color on the left and the red color on the right. The result is a dark, muddy color. Many image editors incorrectly mix colors this way, which leads to suboptimal results. This kind of simple blending is called mixing in sRGB space.


	colors mixed in sRGB space

It turns out that sRGB doesn’t directly indicate the actual amount of red, green, or blue present in a color. Instead, engineers originally designed sRGB for Cathode Ray Tube (CRT) monitors. The original intent was to take the actual amounts of red, green, and blue and then apply a transfer function, which produced an sRGB image. A CRT monitor could then directly display this image without any additional processing.

CRT monitors have become nearly extinct today, but computers still store almost all images in sRGB format. Engineers discovered that sRGB also accidentally correlates to human visual perception, allowing us to store more information in fewer bytes of data.

It doesn’t make much sense to mix these encoded sRGB values directly since they result in the muddy in-between colors. Instead, if we get the original amounts of red, green, and blue back, we can sensibly mix them and then convert the result back into sRGB to display more correct colors. The actual amounts of each color are said to be in linear color space, in technical jargon. Here’s a comparison of naive mixing using sRGB vs. linear mixing:


	colors mixed in sRGB space
	colors mixed in linear space

The result mixed in linear color space is significantly smoother. The unwanted dark band in the middle has disappeared, and the colors in-between look pleasant and vibrant. Despite the improved results, only using linear color will not solve all of our problems.


	colors mixed in sRGB space
	colors mixed in linear space

The sRGB version has a darker band in the middle. The linear version solves this problem, but it still has some issues. The brightness of the linear gradient is uneven. It starts out dark blue but then gets bright very quickly. In other words, the linear color space results in better hues but uneven brightness for this particular gradient.

Perceptual color

The above problems occur because the linear color space simulates what would happen when you mix different intensities of light, but it doesn’t match the human perception of color. In other words, when colors are mixed in linear color space, an image editor creates a color with 50% blue photons and 50% yellow photons. In contrast, we want to see a result that looks like 50% blue and 50% yellow.

This can be done by mixing colors in another color space called a perceptual color space. A perceptual color space bridges the gap between the number of photons in a color and how the human visual system sees those photons. We use the Oklab color space for this in papaya.io. I won’t go over the exact math in this blog post, but you can find further links at the end.

Let’s see what the last example looks like in Oklab:


	colors mixed in sRGB space
	colors mixed in linear space
	colors mixed in Oklab space

The Oklab color space makes a big difference! The hue changes smoothly, with the blue and yellow meeting in the middle. Notice the more accurate hue transition from blue to yellow instead of the light purple shade seen in the other two versions.

Video games often use linear color because they want to simulate the behavior of light and shadow. But in image editing, perceptual color makes the most sense.

Color science in papaya.io

Today, we’re announcing that papaya.io uses the Oklab color space to mix colors everywhere, from the brush tool to all the nodes.

We’re also releasing two new blend modes, called “darker color” and “lighter color,” which use the perceptual color space to decide which colors appear darker or lighter to human perception.

Today, papaya.io gets a significant upgrade in the way it handles colors. All of these changes work automatically, without you having to do anything. This is another step toward building a modern image editor that works right inside your browser.

This year, we are focused on adding more nodes and more editing tools to our image editor. If you miss your favorite feature from papaya.io, let us know on Twitter. We are looking forward to hearing from you!