How to create custom palette with custom color for Material Design App? [closed]

问题

How could I generate a custom material design palette like the following one?

Is there a tool around or something?

回答1:

It seems that someone asked this into Graphic Design: link here.

The accepted answer will lead you to the author site which is what i was looking for (a tool which generate your palette for you, GG to him!).

Also, the answer with the highest vote explain very well how palette are made, IMHO.

Both of them satisfied my curiosity.

UPDATE 22/06/2016

There is a new option available now on this link.

UPDATE 03/08/2016

I think that this answer and relative app deserve a mention too.

UPDATE 07/04/17

After 2 years, Big G released this tool: https://material.io/ .

回答2:

I have closely analyzed Material Design Color Palette and made some conclusions.

There is no program-logic in the Color Palette recommended by Google, it's absolutely hand made. Swatches were picked manually by the designer, but they have some pattern. I will briefly tell about this magic.

We have a custom primary base color (index 500). To generate a custom palette, mix the base color with white (#FFFFFF) in rates of base color: 12%, 30%, 50%, 70%, 85% (indices 50-400). Next mix the base color with some “deep dark color” in rates of base color close to: 87%, 70%, 54%, 25%. In Material Color Palette this “deep dark color” is chosen manually by the designer, but I calculate this color by multiplying the base color to itself as long as the result has an acceptable difference in contrast.

For accent base colors (index A200) you should use color in a triad color harmony to the base color (index 500). Other accent colors have high Saturation (0.75 < S <= 1) and picked individually in Lightness variations.

I implemented this logic in the free Android application Material Palette Generator, that may create and demonstrate a custom Material Design Color Palette on real application UI.

回答3:

There is a website you can use to generate a material design palette.

To use it first select two colors:

Then check out your suggested palette:

回答4:

I found that here you can generate a color pallete with all the accent color (missed in the original answer)

Color Pallete

回答5:

if you want a code sample for that, you could use this code:

public int[] GetMaterialColors(String color){
    int[] result = new int[14];

    result[0] = shadeColor(color, 0.9   ); //----> 50
    result[1] = shadeColor(color, 0.7   ); //----> 100
    result[2] = shadeColor(color, 0.5   ); //----> 200
    result[3] = shadeColor(color, 0.333 ); //----> 300
    result[4] = shadeColor(color, 0.166 ); //----> 400
    result[5] = shadeColor(color, 0     ); //----> 500
    result[6] = shadeColor(color, -0.125); //----> 600
    result[7] = shadeColor(color, -0.25 ); //----> 700
    result[8] = shadeColor(color, -0.375); //----> 800
    result[9] = shadeColor(color, -0.5  ); //----> 900

    result[10] = shadeColor(color, 0.7  ); //----> A100
    result[11] = shadeColor(color, 0.5  ); //----> A200
    result[12] = shadeColor(color, 0.166); //----> A400
    result[13] = shadeColor(color, -0.25); //----> A700

    return result;
}

private static int shadeColor(String color, double percent) {
    long f = Long.parseLong(color.substring(1), 16);
    double t = percent < 0 ? 0 : 255;
    double p = percent < 0 ? percent * -1 : percent;
    long R = f >> 16;
    long G = f >> 8 & 0x00FF;
    long B = f & 0x0000FF;
    int red = (int) (Math.round((t - R) * p) + R);
    int green = (int) (Math.round((t - G) * p) + G);
    int blue = (int) (Math.round((t - B) * p) + B);
    return Color.rgb(red, green, blue);
}

回答6:

If you are using android studio then you can find the closest material color of your given color.

回答7:

There is actually a proper Google-made tool for doing this right here: https://material.io/inline-tools/color/

It's used as an iFrame buried in their docs, way down here: https://material.io/design/color/the-color-system.html#tools-for-picking-colors

None of the other answers here or on graphic design seem to mention this.

回答8:

You should check the Palette API, provided by Google. It's included in the support library. From what I understood from your question, this library does exactly what you are looking for.

来源：https://stackoverflow.com/questions/28503998/how-to-create-custom-palette-with-custom-color-for-material-design-app

标签

android

colors

material-design