How do I smoothly change color of layout?

I'm currently working on a mobile app and I want to introduce a feature which makes the screen gradually transition from one color to another depending on events the user triggers. At first I thought of using effects, however AFAIK they're all WebGL and iOS/Android don't support WebGL. Next I thought about having 3 semitransparent objects, one red, one green, and one blue, as an overlay and have them slowly change opacity to add/subtract color. This technically works, but sounds like a resource hog (especially for mobile). So, is there a more efficient solution to this that works on mobile devices?

make a sprite with the color transitions you want and make it the size of the game window (actual sprite can be 1x1 pixel) and just change to the frames you need. You can change the opacity however you need it.

you could make a group thats set active by your color change event and increases or decreases the rgb values of the layerbackground for a pre set time, it would look like "color change event"->"set group active","wait X seconds","set group inactive" and in the group "every tick"->"layerbackgroundcolor->set r to: r-1.." and so on.

Just an example, i bet there are a million more ways to do that

Is there a way to alter the color channels of an object without using effects? Maybe I'm overlooking it. Seems layers have this option though, perhaps I'll try using another layer on top of everything, see how that works. Thanks for the ideas.