Convert colorPrimary to colorPrimaryDark (how much darker)

Question

In guidance with Material Design, how much darker should the statusbar be than the actionbar? I have a color set for the actionbar at runtime and have no way of knowing this colour at programming time, so how can I get the correct statusbar colour?

I know i can darken a colour using this

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

But I'm not sure how much to darken it

Answer 1

Material design color palette was not generated by manipulating the color in HSV. It was done with HSL (Hue, Saturation, Lightness).

Here is a utility class that will darken/lighten a color using 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
        };
    }
}

According to Material Design Color Generator, to generate primaryColorDark, you need to darken by 12. Here is how to generate the full color palette exactly as 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

One way of knowing exactly how much darker it should be is using Material Color Tool. Just enter the hex value of your primary color and it will generate the light and dark versions for you.