First-class colors (Part 2)

If you mix yellow and cyan pigments and then illuminate it with white light, the yellow pigment subtracts all light except for the red, yellow and green, and the cyan pigment subtracts all light except for the yellow, green and cyan. What you get left with is green, and as a result, mixing yellow and cyan subtractively yields green.

In order to express this using RGB colour values, you would start with white, subtract the opposites of yellow and cyan, which are blue and red, and then you get green. Alternatively, if the values are 0 to 1, you can also imagine it as multiplying the RGB channels of the yellow and cyan together, as only the light that both colours of pigment let through is visible. (These two ways to think about it give different results, and the multiplicative way is more accurate to real life, but both agree on the basics of subtractive colour mixing.)


I've been experimenting, and I think I've found a better way to mix two colours. Square the components of both colours before averaging them, and then take the square root of the result.

Here is the result of mixing a bright red with a bright lime, using the "regular" method:

colour mixing bad

And here is how it looks if you square and square root:

colour mixing good

It looks a lot better. The reason this works is complicated, and relates to how computers store colour values perceptually rather than linearly, but this is close to how the two colours would blur together in real life, such as with an out of focus camera.


For inspiration for a good set of colour operators, I would look at 3D vector operations. Our perception of colours inherently has three degrees of freedom, whether they be red, green and blue, cyan, magenta and yellow, or hue, saturation and brightness, and mathematics has plenty of ideas on how to operate on three-dimensional values like that.

but to needs to be RIGHT. please share the project link so I can see.

This isn't the exact same project (the screenshots came from an experimental fork of Snap!), but you can test both colour-mixing methods with this project:

what is naively?

In this context, it's the one that doesn't do the squaring and square rooting.

ok, but which one is RIGHT? (not which one looks better)

The "naively" would be right, see this YouTube video for more info

@bh If you just want to mix colours like how different colours of light mix, you can just add together the R, G and B channels (and clamp the results if you don't want colours outside whatever gamut you're using).

were you replying to me?

He wasn't.

ok lol

Well, never mind gamuts, we only get eight bits per color, so each is limited to 255 for maximum intensity. But let's say I'm adding (255, 100, 0) and (255, 0, 100), are the colors limited independently, so the result is (255, 100, 100), or do I preserve ratios, so the result is (255, 50, 50)?

Uh, I have actually no idea what this is, we should probably move the discussion of making the blocks to Advanced Topics? And also add an explanation for what you are even saying. I do not want conversations that should be in Advanced Topics be in other categories.

Although I am not either of them, I will do my best to help explain some of this.

Have you heard of the term "8-bit game"?

First, some other context: A bit is a single character that's either a 1 or a 0. Think of it like an on/off switch. If you only had one bit to work with, there would only be two possible combinations, right? On and off.
But when you add more bits, you can make more combinations. With 2 bits, you can have on/on, off/on, on/off, off/off, ... right?
A byte is a collection of however many bits. The amount of combinations for the byte is two to the power of its amount of bits. The maximum amount of values for an 8-bit byte to have is 255.
Now, remember how number values are handled in colors. The red, green, blue, and alpha values are all 8-bit bytes.

To simulate the mixing of light-based colors, add up the red of color 1 to the red of color 2, the green of color 1 to the ... etc, etc. and make a new color with those values.
(While I was typing this, I remembered: @rdococ, you can set an R/G/B/A value larger than 255 in a costume and it will automatically shorten it for you.)

Thank you, I already understand bits and sometimes use them In scratch games! You have explained perfectly

You can't have it both ways! :~) And I don't think you're entitled to tell other people not to discuss something that's clearly on-topic.

Minor quibble: There are 256 values, from 0 to 255 inclusive.

Ah, right.

@rdococ , just wanted to ask, would this YouTube video be right? (sort of)

You need to press the up button actually

i'm just confused---whats the diff between a color and a first class color