Mixing colors

You simply pass two colors to Color.mix() to get a new color, which is their blend.

mixedColor = Color.mix "Red", "Blue"

There are a few optional arguments, though, for when you want more control: ‘fraction,’ ‘limit,’ and ‘model’.

Color.mix colorA, colorB, fraction, limit, model

fraction — A number. The amount of colorB to add to colorA.
limit — A Boolean. Whether fraction should be capped between 0 and 1 or not. ‘no’ by default.
model — A string. The color model to use.

The fraction is like the quantity of the second color.

Here only 10% blue is used instead of the default 50%:

mixedColor = Color.mix "Red", "Blue", 0.1

When the fraction is lower than 0 or higher than 1, the resulting color can transition past the original values. At a fraction of -0.3, for example, it’s like blue would be subtracted from the original red.

By enabling ‘limit,’ the resulting color will not transition beyond its original range. It’s comparable to how ‘limit’ works in 🛠 Modulate.

# Top layer: Mix WITHOUT transition limit (default)
draggableTop.backgroundColor =
    Color.mix leftColor, rightColor, fraction
# Bottom layer: Mix WITH transition limit
draggableBottom.backgroundColor =
    Color.mix leftColor, rightColor, fraction, yes

Lastly, ‘model’ defines which color model to use. "hsul" is the default, and the other options are "rgb" and "hsl".

Check Animating colors in the Animation chapter for an explanation of the different color models.