android color between two colors, based on percentage?

android, colors, java

Solution

Ok, after 2 hours of converting to yuv, hsv, etc pp... I give up. I now do it just like this:

public class ColorUtils {
    private static int FIRST_COLOR = Color.GREEN;
    private static int SECOND_COLOR = Color.YELLOW;
    private static int THIRD_COLOR = Color.RED;

    public static int getColor(float p) {
        int c0;
        int c1;
        if (p <= 0.5f) {
            p *= 2;
            c0 = FIRST_COLOR;
            c1 = SECOND_COLOR;
        } else {
            p = (p - 0.5f) * 2;
            c0 = SECOND_COLOR;
            c1 = THIRD_COLOR;
        }
        int a = ave(Color.alpha(c0), Color.alpha(c1), p);
        int r = ave(Color.red(c0), Color.red(c1), p);
        int g = ave(Color.green(c0), Color.green(c1), p);
        int b = ave(Color.blue(c0), Color.blue(c1), p);
        return Color.argb(a, r, g, b);
    }

    private static int ave(int src, int dst, float p) {
        return src + java.lang.Math.round(p * (dst - src));
    }
}

By explicity using yellow as the middle color, the generated colors are brighter :-)

Anyway.. if someone has a good other solution, I would appreciate it.

Problem

I would like to calculate the color depending on a percentage value: ``` float percentage = x/total; int color; if (percentage >= 0.95) { color = Color.GREEN; } else if (percentage <= 0.5) { color = Color.RED; } else { // color = getColor(Color.Green, Color.RED, percentage); } ``` How can I calculate that last thing? It would be OK if yellow appears at 50%. I tried this: ``` private int getColor(int c0, int c1, float p) { int a = ave(Color.alpha(c0), Color.alpha(c1), p); int r = ave(Color.red(c0), Color.red(c1), p); int g = ave(Color.green(c0), Color.green(c1), p); int b = ave(Color.blue(c0), Color.blue(c1), p); return Color.argb(a, r, g, b); } private int ave(int src, int dst, float p) { return src + java.lang.Math.round(p * (dst - src)); } ``` Well this works, but I would like the colors at around 50% being more lightend as I use them on a grey background.. how can I accomplish that? Thanks! UPDATE I tried to convert to YUV like it was suggested in the comments. But I still have the same problem that at 50% it's to dark. Additional in this solution I have at <5% now white as color. If I do not calculate `float y = ave(...);`, but just take `float y = c0.y` it's a little better, but at <20% I have then cyan color ... I'm not so much into color-formats :-/ Maybe I'm doing something wrong in the calculation? The constants are taken from Wikipedia ``` public class ColorUtils { private static class Yuv { public float y; public float u; public float v; public Yuv(int c) { int r = Color.red(c); int g = Color.green(c); int b = Color.blue(c); this.y = 0.299f * r + 0.587f * g + 0.114f * b; this.u = (b - y) * 0.493f; this.v = (r - y) * 0.877f; } } public static int getColor(int color0, int color1, float p) { Yuv c0 = new Yuv(color0); Yuv c1 = new Yuv(color1); float y = ave(c0.y, c1.y, p); float u = ave(c0.u, c1.u, p); float v = ave(c0.v, c1.v, p); int b = (int) (y + u / 0.493f); int r = (int) (y + v / 0.877f); int g = (int) (1.7f * y - 0.509f * r - 0.194f * b); return Color.rgb(r, g, b); } private static float ave(float src, float dst, float p) { return src + Math.round(p * (dst - src)); } } ```

Original source