![]() ![]() Modify the saturation and value/brightness for each color to get a gradient effect when the colors are stacked on top of each other. Once you enter your hex/RGB value of the brand color, switch to HSV/HSB mode. This is hue, saturation, and value/brightness. Use Illustrator, Photoshop, or a website such as to find the HSV/HSB value. 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). Now, to create each different shade, first find the hex or RGB value of your brand color. ![]() I’ll show you how to do that in a later post. However, I found it difficult to find enough shades that were accessible on white, so I customized the theme to use the 700 shade. Material UI uses the 500 shade as their default for each hue. 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. However, you can define which colors can be used as button colors, with either white or your dark text color. 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. You can use a color contrast calculator such as WebAIM to check your color values and make sure they’re accessible. Before we go into how to create each different shade from your brand color, let’s discuss accessibility standards. It took me about a day to define the first iteration of the full color scheme. These exact color values are easily changed to suit your brand.įor each color you choose to include in your palette, you’ll need to define 14 different shades. You’ll definitely want either blue grey or grey as your secondary color. For instance, You may decide you don’t need lime green, deep purple, or deep orange colors, depending on your brand colors. 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. The next step is to choose which colors you’ll include in your palette. 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. I also chose a third default color that is worked into the theme. Primary and secondary colors will be used for links, buttons, navigation, etc. Pick your primary and secondary colors, based on your brand colors. When starting a color scheme, I suggest starting with brand colors if available. Saturation – how much of the hue is in the color value. ![]() When implementing Material UI, you would reference a hue and shade as hue (i.e. Material UI uses 14 different shades for each hue, the darkest being 900 and the lightest 50. Shade – this is the darkness of the color. You may find that you don’t need all of the hues for your project. The standard theme comes with 19 different hues. There are 360 hues available, so it’s a bit more complicated than just blue, orange, red, etc. Hue – In simplified terms, this is the color. 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. The standard Material UI color palette is extensive – and for good reason. ![]()
0 Comments
Leave a Reply. |