基于百分比，在两种颜色之间生成Android颜色？

Question

我想根据百分比值计算颜色：

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);
}

我该如何计算最后一件事情？如果黄色出现在50%的话也可以。

我尝试了这个：

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));
}

这个方法是可行的，但我希望颜色在大约50%时变浅，因为我将它们用于灰色背景..。我该怎么做呢？

谢谢！

更新 我尝试按照评论中建议的转换为YUV格式。但是我仍然有同样的问题，在50%时太暗了。 此外，在这个解决方案中，如果我不计算float y = ave(...);，而只是取float y = c0.y，效果会稍微好一点，但在小于20%时会出现青色...我对颜色格式不是很了解 :-/ 也许我在计算方面做错了什么？常数是从维基百科获得的。

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));
    }
}

- Stuck

---

你有考虑过转换为YUV并比较亮度值吗？ - SRM

是的，我编辑了问题...那里是同样的问题。 - Stuck

Answer 1

您可以尝试使用 Android API 中的 ArgbEvaluator 类：http://developer.android.com/reference/android/animation/ArgbEvaluator.html ：

new ArgbEvaluator().evaluate(0.75, 0x00ff00, 0xff0000);

请注意，存在一个bug（http://code.google.com/p/android/issues/detail?id=36158）在alpha通道计算中，因此您应该使用没有alpha值的值。

- Equidamoid

---

对这个答案点赞。将结果转换为整数：int color = (Integer) new ArgbEvaluator().evaluate(0.75, 0x00ff00, 0xff0000); - ashakirov

为了使用颜色资源，应该使用ContextCompat.getColor(context, R.color.my_color)而不是仅仅使用R.color.my_color整数。 - Eric B.

我想知道为什么他们让ArgbEvaluator使用对象而不是整数。在动画期间进行如此多的强制转换和包装是不必要的开销。 - Amir Uval

导入 android.animation.ArgbEvaluator; - CoolMind

@auval 这就是 Java 的工作方式。evaluate(float, X, X) 是通用接口 TypeEvaluator 的一部分。通用参数必须是对象（不像 C++ 模板，例如），因此这里必须使用 Integer。 - Equidamoid

Answer 2

我的个人意见是，我找到了这个答案并编写了正确的解决方案。（感谢Alnitak提供的HSV提示！）

复制粘贴：

  private float interpolate(float a, float b, float proportion) {
    return (a + ((b - a) * proportion));
  }

  /** Returns an interpoloated color, between <code>a</code> and <code>b</code> */
  private int interpolateColor(int a, int b, float proportion) {
    float[] hsva = new float[3];
    float[] hsvb = new float[3];
    Color.colorToHSV(a, hsva);
    Color.colorToHSV(b, hsvb);
    for (int i = 0; i < 3; i++) {
      hsvb[i] = interpolate(hsva[i], hsvb[i], proportion);
    }
    return Color.HSVToColor(hsvb);
  }

- Mark Renouf

---

应注意，此方法不能处理 alpha 通道。根据 Color.colorToHSV 的文档：“color - 要转换的 ARGB 颜色，alpha 分量将被忽略。” - tir38

我更新了你的答案以处理alpha，链接在这里：https://dev59.com/Cm855IYBdhLWcg3wUSgW#38536770 - tir38

当我在蓝色和红色之间插值时，几乎得到了黄色，但我想要粉色。 - Lothar

Answer 3

作为更新的解决方案，您可以使用Android支持库或AndroidX API中的ColorUtils＃blendARGB：

val startColor = ContextCompat.getColor(context, R.color.white)
val endColor = ContextCompat.getColor(context, R.color.yellow)
ColorUtils.blendARGB(startColor, endColor, 0.75)

- mrstif

---

短小精悍，运行良好！ - Karan Sharma

Answer 4

这样的插值最好在 HSL 或 HSV 颜色空间中完成（而不是 YUV）。

中间范围的颜色看起来“浑浊”的原因是，如果你简单地线性增加红色 (#ff0000) 的同时降低绿色 (#00ff00)，中间颜色最终会变成 #808000 而不是 #ffff00。

相反，找到起始颜色和结束颜色的 HSL (或 HSV) 等效值。在该颜色空间内进行插值，然后对于每个点再转换回 RGB。

由于完全饱和的红色和绿色具有相同的 S 和 L（或 V）值，因此只有 H（色相）变量会改变，从而产生正确的光谱效果。

- Alnitak

Answer 5

我只是想更新Mark Renouf的答案，以便处理alpha通道：

private float interpolate(float a, float b, float proportion) {
    return (a + ((b - a) * proportion));
}

/**
 * Returns an interpolated color, between <code>a</code> and <code>b</code>
 * proportion = 0, results in color a
 * proportion = 1, results in color b
 */
private int interpolateColor(int a, int b, float proportion) {

    if (proportion > 1 || proportion < 0) {
        throw new IllegalArgumentException("proportion must be [0 - 1]");
    }
    float[] hsva = new float[3];
    float[] hsvb = new float[3];
    float[] hsv_output = new float[3];

    Color.colorToHSV(a, hsva);
    Color.colorToHSV(b, hsvb);
    for (int i = 0; i < 3; i++) {
        hsv_output[i] = interpolate(hsva[i], hsvb[i], proportion);
    }

    int alpha_a = Color.alpha(a);
    int alpha_b = Color.alpha(b);
    float alpha_output = interpolate(alpha_a, alpha_b, proportion);

    return Color.HSVToColor((int) alpha_output, hsv_output);
}

- tir38

Answer 6

这个帖子中的一些解决方案对我来说不起作用，所以我创建了另一个解决方案。也许对某些人有用。

/**
 * Get the color between two given colors
 * @param colorStart int color start of degradate
 * @param colorEnd int color end of degradate
 * @param percent int percent to apply (0 to 100)
 * @return int color of degradate for given percent
 */
public static int getColorOfDegradate(int colorStart, int colorEnd, int percent){
    return Color.rgb(
            getColorOfDegradateCalculation(Color.red(colorStart), Color.red(colorEnd), percent),
            getColorOfDegradateCalculation(Color.green(colorStart), Color.green(colorEnd), percent),
            getColorOfDegradateCalculation(Color.blue(colorStart), Color.blue(colorEnd), percent)
    );
}

private static int getColorOfDegradateCalculation(int colorStart, int colorEnd, int percent){
    return ((Math.min(colorStart, colorEnd)*(100-percent)) + (Math.max(colorStart, colorEnd)*percent)) / 100;
}

- J.S.R - Silicornio

---

太棒了！完美运行。 - Anton Kizema

Answer 7

好的，在将其转换为YUV、HSV等格式2小时后...我放弃了。现在我只是这样做：

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));
    }
}

通过明确使用黄色作为中间颜色，生成的颜色更加明亮 :-)

总之... 如果有人有更好的解决方案，我会很感激。

- Stuck

Answer 8

在Compose中很简单，您可以使用lerp。

基本上它是：

线性插值开始颜色和停止颜色之间的分数分数。

例如：

lerp(
     Color.Red,
     Color.Black,
     fraction // @FloatRange(from = 0.0, to = 1.0)
     )

- Madhur

Answer 9

以下是两种插值的方法：

private static float interpolate(final float a, final float b, final float proportion) {
    return a + (b - a) * proportion;
}

/** Returns an interpoloated color, between <code>a</code> and <code>b</code> */
public static int interpolateColorHsv(final int a, final int b, final float proportion) {
    final float[] hsva = new float[3];
    final float[] hsvb = new float[3];
    Color.colorToHSV(a, hsva);
    Color.colorToHSV(b, hsvb);
    for (int i = 0; i < 3; ++i) {
        hsvb[i] = interpolate(hsva[i], hsvb[i], proportion);
    }
    return Color.HSVToColor(hsvb);
}

public static int interpolateRGB(final int colorA, final int colorB, final float bAmount) {
    final float aAmount = 1.0f - bAmount;
    final int red = (int) (Color.red(colorA) * aAmount + Color.red(colorB) * bAmount);
    final int green = (int) (Color.green(colorA) * aAmount + Color.green(colorB) * bAmount);
    final int blue = (int) (Color.blue(colorA) * aAmount + Color.blue(colorB) * bAmount);
    return Color.rgb(red, green, blue);
}

- android developer