Creating a Custom Material UI Theme Part 1: Customizing a Color Scheme

The standard Material UI color palette is extensive – and for good reason. If you’ve ever built a website or a software application, you’ll quickly realize that you need more colors than you could ever imagine.

First, let’s cover some terminology.

Hue – In simplified terms, this is the color. There are 360 hues available, so it’s a bit more complicated than just blue, orange, red, etc. The standard theme comes with 19 different hues. You may find that you don’t need all of the hues for your project.

Shade – this is the darkness of the color. Material UI uses 14 different shades for each hue, the darkest being 900 and the lightest 50. When implementing Material UI, you would reference a hue and shade as hue[shade] (i.e. blue[500]).

Saturation – how much of the hue is in the color value. Values range from 1 – 100.

When starting a color scheme, I suggest starting with brand colors if available. Pick your primary and secondary colors, based on your brand colors. Primary and secondary colors will be used for links, buttons, navigation, etc. I also chose a third default color that is worked into the theme.

Pro tip: Test out your main colors (primary, secondary, etc.) in a hi-fi prototype before creating the full palette to avoid having to re-create the palette or make major modifications.

The next step is to choose which colors you’ll include in your palette. Material UI has 19 colors: red, pink, purple, deep purple, indigo, blue, light blue, cyan, teal, green, light green, lime, yellow, amber, orange, deep orange, brown, grey, and blue grey. For instance, You may decide you don’t need lime green, deep purple, or deep orange colors, depending on your brand colors. You’ll definitely want either blue grey or grey as your secondary color. These exact color values are easily changed to suit your brand.

For each color you choose to include in your palette, you’ll need to define 14 different shades. It took me about a day to define the first iteration of the full color scheme. Before we go into how to create each different shade from your brand color, let’s discuss accessibility standards. You can use a color contrast calculator such as WebAIM to check your color values and make sure they’re accessible. It’s very difficult to find a suitable color of orange that has enough contrast to use as a button color with white text – and it’s flat-out impossible to find a yellow that’s accessible with white text. However, you can define which colors can be used as button colors, with either white or your dark text color. Because I work with a large team of designers, I chose to make all 700, 800, and 900 shades (except for yellow) accessible with white text, and all 50, 100, and 200 shades accessible with a dark text color. Material UI uses the 500 shade as their default for each hue. However, I found it difficult to find enough shades that were accessible on white, so I customized the theme to use the 700 shade. I’ll show you how to do that in a later post.

Now, to create each different shade, first find the hex or RGB value of your brand color. As an example,. I do not suggest trying to calculate 14 different shades of a particular hue using Hex or RGB values – it’ll drive you madder than a Targaryan (if you don’t get this reference, you can’t be my friend). Use Illustrator, Photoshop, or a website such as color.adobe.com to find the HSV/HSB value. This is hue, saturation, and value/brightness. Once you enter your hex/RGB value of the brand color, switch to HSV/HSB mode. For each shade, use the same hue. Modify the saturation and value/brightness for each color to get a gradient effect when the colors are stacked on top of each other. The easiest way to create the four accent colors is to copy the values for the corresponding shades and raise the saturation value.

If brand colors for a particular color don’t exist, compare brand colors you do have. For instance, if red and blue are brand colors, purple hue should be close to middle of the hue colors. I suggest laying the colors out similar to the material UI color palette. Don’t trust only your visual judgment – use the hue, saturation, and value/brightness to calculate the different shades of each color.

There’s one exception to this method, and that’s calculating values for grey. If you already have a grey in your color palette, you can easily create different shades using the RGB values – just increment or decrement the values for RGB the same amount for each shade. For instance, if your RGB values for grey[700] are (50, 55, 60), then grey [600] could be (60, 65, 70). For the grey color, it will add some life to your grey if you vary the RGB values a bit. For instance, (100, 102, 104) is much more visually appealing than a flat grey (100, 100, 100). I suggest increments of 2-5 for each RGB color.

Good luck creating your color scheme – the next blog post in this series will cover how to implement your custom theme.