Подтвердить что ты не робот

Преобразование цветаПримечание к цветуPrimaryDark (насколько темнее)

В руководстве с 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);

Но я не уверен, как его затемнить.

4b9b3361

Ответ 1

Цветовая палитра материала не создавалась путем манипулирования цветом в HSV. Это было сделано с помощью HSL (Hue, Saturation, Lightness).

Вот класс утилиты, который будет затемнить/осветлить цвет, используя 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. Вот как создать полную цветовую палитру точно как Конструктор цветов для материалов:

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

Ответ 2

Google предлагает использовать 500 цветов в качестве основных цветов в вашем приложении, а другие цвета - как цвета акцентов.

Панели инструментов и более крупные блоки цвета должны использовать цвет 500 основного цвета вашего приложения.

Итак, primaryColor должен быть оттенком 500.

Строка состояния должна быть более темным оттенком 700 вашего основного цвета.

Итак, primaryColorDark должен быть оттенком 700.

Итак, я думаю, что primaryColorDark должен быть на 200 оттенков более темным, чем primaryColor.

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

Ответ 3

Один из способов узнать, насколько темнее он должен быть, - Material Color Tool. Просто введите шестнадцатеричное значение основного цвета, и оно будет генерировать для вас светлые и темные версии.

Ответ 4

ИМХО, как "темнее" он должен быть, он сам по себе.

Если вы используете Android Studio, когда в colors.xml, дважды щелкните предварительный просмотр цвета, переключитесь в режим HSV и уменьшите яркость. (аналогично тому, что вы делаете программно)