Convert colorPrimary to colorPrimaryDark (how much darker)
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);
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.
Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.
Toolbars and larger color blocks should use the 500 color of the primary color of your app.
So primaryColor should be tint 500.
The status bar should be the darker 700 tint of your primary color.
So primaryColorDark should be tint 700.
So I guess the primaryColorDark should be 200 tint darker than the primaryColor.
https://www.google.com/design/spec/style/color.html