Question

在使用Material Design的指导中，状态栏应该比动作栏更暗？我在运行时为操作栏设置了一个颜色集，并且无法在编程时知道这种颜色，那么如何才能获得正确的状态栏颜色？

我知道我可以用这个

来变暗颜色

this.getSupportActionBar().setBackgroundDrawable(new ColorDrawable(colorPrimary));                              
float[] hsv = new float[3];
Color.colorToHSV(colorPrimary, hsv);
hsv[2] *= 0.8f;
int colorPrimaryDark = Color.HSVToColor(hsv);

if(Build.VERSION.SDK_INT>=21)
    Chat.this.getWindow().setStatusBarColor(colorPrimaryDark);

但是我不确定它会变暗多少

Answer 1

通过操纵HSV中的颜色不会生成材质设计调色板。它是用HSL（色调，饱和度，亮度）完成的。

这是一个实用程序类，它将使用HSL

使颜色变暗/变亮

package com.ammar.materialcolorizer;

import android.graphics.Color;

/**
 * A utility class for darkening and lightening colors in the same way as
 * material design color palettes
 * Created by Ammar Mardawi on 12/4/16.
 */

public class ColorUtil {

    /**
     * Darkens a given color
     * @param base base color
     * @param amount amount between 0 and 100
     * @return darken color
     */
    public static int darken(int base, int amount) {
        float[] hsv = new float[3];
        Color.colorToHSV(base, hsv);
        float[] hsl = hsv2hsl(hsv);
        hsl[2] -= amount / 100f;
        if (hsl[2] < 0)
            hsl[2] = 0f;
        hsv = hsl2hsv(hsl);
        return Color.HSVToColor(hsv);
    }

    /**
     * lightens a given color
     * @param base base color
     * @param amount amount between 0 and 100
     * @return lightened
     */
    public static int lighten(int base, int amount) {
        float[] hsv = new float[3];
        Color.colorToHSV(base, hsv);
        float[] hsl = hsv2hsl(hsv);
        hsl[2] += amount / 100f;
        if (hsl[2] > 1)
            hsl[2] = 1f;
        hsv = hsl2hsv(hsl);
        return Color.HSVToColor(hsv);
    }


    /**
     * Converts HSV (Hue, Saturation, Value) color to HSL (Hue, Saturation, Lightness)
     * Credit goes to xpansive
     * https://gist.github.com/xpansive/1337890
     * @param hsv HSV color array
     * @return hsl
     */
    private static float[] hsv2hsl(float[] hsv) {
        float hue = hsv[0];
        float sat = hsv[1];
        float val = hsv[2];

        //Saturation is very different between the two color spaces
        //If (2-sat)*val < 1 set it to sat*val/((2-sat)*val)
        //Otherwise sat*val/(2-(2-sat)*val)
        //Conditional is not operating with hue, it is reassigned!
        // sat*val/((hue=(2-sat)*val)<1?hue:2-hue)
        float nhue = (2f - sat) * val;
        float nsat = sat * val / (nhue < 1f ? nhue : 2f - nhue);
        if (nsat > 1f)
            nsat = 1f;

        return new float[]{
                //[hue, saturation, lightness]
                //Range should be between 0 - 1
                hue, //Hue stays the same

                // check nhue and nsat logic
                nsat,

                nhue / 2f //Lightness is (2-sat)*val/2
                //See reassignment of hue above
        };
    }

    /**
     * Reverses hsv2hsl
     * Credit goes to xpansive
     * https://gist.github.com/xpansive/1337890
     * @param hsl HSL color array
     * @return hsv color array
     */
    private static float[] hsl2hsv(float[] hsl) {
        float hue = hsl[0];
        float sat = hsl[1];
        float light = hsl[2];

        sat *= light < .5 ? light : 1 - light;

        return new float[]{
                //[hue, saturation, value]
                //Range should be between 0 - 1

                hue, //Hue stays the same
                2f * sat / (light + sat), //Saturation
                light + sat //Value
        };
    }
}

根据Material Design Color Generator，要生成primaryColorDark，您需要变暗12。以下是如何生成与Material Design Color Generator完全相同的完整调色板：

    setColor("50", ColorUtil.lighten(color, 52), mTv50);
    setColor("100", ColorUtil.lighten(color, 37), mTv100);
    setColor("200", ColorUtil.lighten(color, 26), mTv200);
    setColor("300", ColorUtil.lighten(color, 12), mTv300);
    setColor("400", ColorUtil.lighten(color, 6), mTv400);

    setColor("500", ColorUtil.lighten(color, 0), mTv500);

    setColor("600", ColorUtil.darken(color, 6), mTv600);
    setColor("700", ColorUtil.darken(color, 12), mTv700);
    setColor("800", ColorUtil.darken(color, 18), mTv800);
    setColor("900", ColorUtil.darken(color, 24), mTv900);

Answer 2

使用Material Color Tool确切知道它应该有多深的一种方法。只需输入原色的十六进制值，它就会为您生成浅色和深色版本。

Answer 3

Google建议在应用中使用500种颜色作为主要颜色，将其他颜色用作重音颜色。

工具栏和较大的颜色块应使用应用程序原色的500色。

所以primaryColor应该是500色。

状态栏应该是原色的深色700色。

所以primaryColorDark应该是700色。

所以我猜primaryColorDark应该比primaryColor暗200色。

https://www.google.com/design/spec/style/color.html

Answer 4

官方Material Color Tool使用 chroma.darken（） / chroma.brighten（），基于JS库chroma.js计算深色/深色。 函数，其算法基于CIELAB color space。

来自Github上source code的

片段

Color.prototype.darken = function(amount=1) {
  const me = this;
  const lab = me.lab();
  lab[0] -= LAB_CONSTANTS.Kn * amount;
  return new Color(lab, 'lab').alpha(me.alpha(), true);
}

材质颜色工具仅使用数量参数的后备值，而LAB_CONSTANTS.Kn为18时，它会向亮度组件L减去18（变暗）/增加18（变亮） *。

Answer 5

恕我直言，如何＆＃34;更黑＆＃34;它应该是，它是你自己的。

如果您使用的是Android Studio，请在colors.xml中双击颜色预览，切换到HSV模式，然后降低亮度。（类似于你以编程方式做的事情）

Answer 6

Android Java代码：

public static int darkenColor(int color) {
    int alpha = Color.alpha(color);
    int red = Color.red(color);
    int green = Color.green(color);
    int blue = Color.blue(color);

    return Color.argb(alpha, (int) (red * 0.9), (int) (green * 0.9), (int) (blue * 0.9));
}

public static String intColor2String(int intColor) {
    String strColor = String.format("#%06X", 0xFFFFFF & intColor);
    return strColor;
}

如何使用？

String dakenColor = Utils.intColor2String(
        Utils.darkenColor(Color.parseColor("#21BBA6")));

将colorPrimary转换为colorPrimaryDark（暗多少）

6 个答案: