19

Google has designed a color palette. Given a color, I want to dynamically create the palette in Android.

There was a similar question in the Graphic Design site and an open source javascript solution which generates a similar color palette. The factors for each color are found here and the function used to create the color is found in this stackoverflow answer.

I used that answer and project to generate a palette that is similar to Google's. However, I want an algorithm that would return the exact values which Google has generated (see the first link).

Question: How does Google calculate the palette colors for material design?


What I have tried so far:

Based off the information above, I created this example to show how I generated a similar palette. Again, I want the exact values.

import android.app.Activity;
import android.app.AlertDialog;
import android.graphics.Color;
import android.os.AsyncTask;
import android.view.Gravity;
import android.widget.LinearLayout;
import android.widget.ScrollView;
import android.widget.TextView;

import java.lang.ref.WeakReference;
import java.util.LinkedList;
import java.util.List;

/**
 * @author Jared Rummler <[email protected]>
 */
public class PaletteTask extends AsyncTask<Integer, Void, List<PaletteTask.Shade>> {

  private static int shadeColor(int color, double percent) {
    return shadeColor(String.format("#%06X", (0xFFFFFF & color)), percent);
  }

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

  private final WeakReference<Activity> activityWeakReference;

  private final List<Shade> shades = new LinkedList<>();

  {
    shades.add(new Shade(0.9, "50"));
    shades.add(new Shade(0.7, "100"));
    shades.add(new Shade(0.5, "200"));
    shades.add(new Shade(0.333, "300"));
    shades.add(new Shade(0.166, "400"));
    shades.add(new Shade(0, "500"));
    shades.add(new Shade(-0.125, "600"));
    shades.add(new Shade(-0.25, "700"));
    shades.add(new Shade(-0.375, "800"));
    shades.add(new Shade(-0.5, "900"));
    shades.add(new Shade(0.7, "A100"));
    shades.add(new Shade(0.5, "A200"));
    shades.add(new Shade(0.166, "A400"));
    shades.add(new Shade(-0.25, "A700"));
  }

  public PaletteTask(Activity activity) {
    activityWeakReference = new WeakReference<>(activity);
  }

  @Override protected List<Shade> doInBackground(Integer... colors) {

    for (Shade shade : shades) {
      shade.color = shadeColor(colors[0], shade.percent);
    }

    return shades;
  }

  @Override protected void onPostExecute(List<Shade> shades) {
    Activity activity = activityWeakReference.get();
    if (activity == null || activity.isFinishing()) {
      return;
    }

    // Create a dialog that shows our generated colors:

    ScrollView scrollView = new ScrollView(activity);
    LinearLayout linearLayout = new LinearLayout(activity);
    linearLayout.setOrientation(LinearLayout.VERTICAL);

    int width, height;
    width = LinearLayout.LayoutParams.MATCH_PARENT;
    height = (int) (30/*dp*/ * (activity.getResources().getDisplayMetrics().densityDpi / 160f));

    // add each color
    for (Shade shade : shades) {
      LinearLayout layoutColor = new LinearLayout(activity);
      TextView textView = new TextView(activity);

      layoutColor.setLayoutParams(new LinearLayout.LayoutParams(width, height));
      layoutColor.setBackgroundColor(shade.color);
      layoutColor.setGravity(Gravity.CENTER);

      textView.setText(shade.name + "    " + String.format("#%06X", (0xFFFFFF & shade.color)));

      layoutColor.addView(textView);
      linearLayout.addView(layoutColor);
    }

    scrollView.addView(linearLayout);

    new AlertDialog.Builder(activity).setView(scrollView).show();
  }

  public static class Shade {

    final double percent;
    final String name;
    int color;

    public Shade(double percent, String name) {
      this.percent = percent;
      this.name = name;
    }
  }

}

Invoking the AsynTask:

int materialRed500 = 0xFFF44336;
new PaletteTask(this).executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, materialRed500);

Dialog created from the above code:

color palette dialog

7
  • Curious why you'd need to dynamically create it; can't you just have it as a resource in the app? Oct 5, 2015 at 6:48
  • @ChiefTwoPencils, yes, I could have all the colors as a resource. Why? For science. :) Oct 5, 2015 at 7:58
  • 1
    My algorithm that you used from my answer isn't 100% accurate. It doesn't use HSL to lighten or darken. Google's palette probably uses proper HSL conversions to Lighten (raise the L). A comment to my answer suggested using TinyColor... if accuracy is needed. Mine is for speed. Oct 5, 2015 at 22:23
  • 1
    Also, while the Google color palette does have 9 accent colors for each primary color, for a total of 10. Its unclear if the shading they are doing is exactly 10% per level as it would lead one to believe. I mean, the range they got listed is 50-900... not exactly 100-1000 i would say... as you can see 900 doesnt get as close to black as i would think 90% would Oct 5, 2015 at 22:29
  • I was gonna write a proper answer, but then I realized I didnt have my Android Dev Env setup and couldn't test it or properly code it. But somewhere along the lines of using RGBToHSV to convert it... then raise/lower the B or V or L or whatever the flip they call it on Android.. 10%.... then use HSVToColor to convert back Oct 6, 2015 at 0:20

2 Answers 2

11

Bottom line, you can't generate a palette using a single color that will always exactly match the corresponding Google Material Design Palette.

This is because the palettes all follow a different progression of colors. For example, the red palette is generated using the following progression (JS code using TinyColor.js, but you can still see the HSL modifications):

return [
            { hex : tinycolor( hex ).lighten( 37.7 ).saturate( 10.4 ).spin( -13 ).toHexString(), name : '50' },
            { hex : tinycolor( hex ).lighten( 31.8 ).saturate( 10.4 ).spin( -9.5 ).toHexString(), name : '100' },
            { hex : tinycolor( hex ).lighten( 18.7 ).desaturate( 17 ).spin( -3.9 ).toHexString(), name : '200' },
            { hex : tinycolor( hex ).lighten( 9.1 ).desaturate( 20.9 ).spin( -4 ).toHexString(), name : '300' },
            { hex : tinycolor( hex ).lighten( 4.1 ).desaturate( 6.6 ).spin( -3 ).toHexString(), name : '400' },
            { hex : hex, name : '500' },
            { hex : tinycolor( hex ).darken( 3.1 ).desaturate( 12.4 ).spin( -2.7 ).toHexString(), name: '600' },
            { hex : tinycolor( hex ).darken( 7.8 ).desaturate( 24.5 ).spin( -4 ).toHexString(), name: '700' },
            { hex : tinycolor( hex ).darken( 11.7 ).desaturate( 23.2 ).spin( -4 ).toHexString(), name: '800' },
            { hex : tinycolor( hex ).darken( 17 ).desaturate( 16.1 ).spin( -4 ).toHexString(), name: '900' },
            { hex : tinycolor( hex ).lighten( 16.7 ).saturate( 10.4 ).spin( 0.6 ).toHexString(), name: 'A100' },
            { hex : tinycolor( hex ).lighten( 7.7 ).saturate( 10.4 ).spin( -4 ).toHexString(), name: 'A200' },
            { hex : tinycolor( hex ).darken( 3.9 ).saturate( 10.4 ).spin( -15.5 ).toHexString(), name: 'A400' },
            { hex : tinycolor( hex ).darken( 16.6 ).saturate( 10.4 ).spin( -4 ).toHexString(), name: 'A700' }
        ];

However, when you apply that same progression to the Indigo base color (500), you can see that the palettes don't match up at all. In the following image, the far left palette is the default MD pallette and the second to the left is the palette generated with the above progression. These two palettes match exactly. When I load in the MD Indigo palette (third palette) and then generate a palette using the Indigo 500 value and the Red Palette progression code, it creates the 4th palette. As you can see, while this progression is exact for red, it's way, way off for other colors:

enter image description here

More on this subject can be found here. It's most likely that the colors google has chosen are hand-picked by a designer and not programmatically generated.

EDIT: Also, the code for that MCG has been completely revised. The new logic for the colors can be found here, and it uses tinycolor.js for the modification functions.

1
9

The logic in the accepted answer is wrong. It won't generate the true material colours for you. There is an official material palette tool here. You can try and compare if you want.

Unfortunately there is no library provided from Google for the above tool, this is a minified and packed javascript file which includes redux inside. Me and my colleague, we did a reverse engineering to get the part that generates the colours only, you can view it here. Please keep in mind that this is not my code.

you can try it here with the following line.

materialColorPicker('00ff00')

This palette has different tones of the selected colour, these are: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 but the given colour could be any of these tones.

for example, if you pick red colour, this palette will give you the following set.

50: "ffe7e6"
100: "ffc7b8"
200: "ffa28a"
300: "ff795b"
400: "ff5436"
500: "ff200c"
600: "ff1507"
700: "ff0000" // input colour
800: "f10000"
900: "da0000" 

But if you pick the colour of #17996b, the palette will produce the following values:

50: "e0f3ec"
100: "b4e0cf"
200: "84cdb1"
300: "54b893"
400: "32a97f"
500: "17996b" // input colour
600: "138c60"
700: "0d7c52"
800: "016c45"
900: "00502a"

As you see, the input colour which you think it's your primary colour, can be any of the produced colours.

7
  • Will you please post the un-minified code? Upload to GitHub? Or is this the code from material.io? Mar 23, 2019 at 15:31
  • @JaredRummler yes as I mentioned in my answer this code belongs to the material.io web site. But I converted into a library by doing some reverse engineering. You can use unminify.com to make it human readable.
    – aytek
    Mar 24, 2019 at 18:46
  • So you abstracted this code from material.io but didn't re-write it? Yes, I used an unminify tool but was hoping you re-wrote it as un-minify is still very obfuscated to a degree. Thanks for posting. Mar 25, 2019 at 1:36
  • @JaredRummler yes right, I extracted it from the material.io. I didn't rewrite it. Does it make any difference? It does the job. This library has MIT licence if you check the material.io sources. So feel free to use it.
    – aytek
    Mar 25, 2019 at 22:30
  • 1
    I was just hoping to re-write it in Java or Kotlin and not having the variable/function names obfuscated would have been nice. Mar 26, 2019 at 2:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.