5/18/2023 0 Comments Color ui themeChoose one or more primary variant colors (any other color than the primary color).This is how you can use the generated shades: In the example above the primary color has a tonal value of 500. These numbers are tonal values and are used to identify a certain shade. Each shade is assigned with a number from 50-900. Based on the primary color the tool creates different shades by increasing and decreasing the saturation. The ‘P’ stands for your chosen primary color. When you have your desired color it is time to create a color palette with the help of this color picking tool. The next step is to choose a primary color that represents your brand. In part 1 we discussed the background color and surface colors. Part 2: Add some colors □ The color palette explained Create different shades from the background color for elevated components.Decide whether you want a gray background color or a dark version of your brand color.This results in the darker purple used on the background of our app. To make a dark version of this we give it an opacity of 12% on a black background. In the example below we have a purple color as our brand color. If you are in love with your brand color, there are ways to translate this to your dark theme. You could copy the colors for 10 levels of elevation from Google Material Design or create them yourself.Ī good way to do this is using a white overlay on your base surface color and play with the transparency.īackground and surfaces with a brand colorĭark themes don’t necessarily have to be black and gray only. This means that you need to create different shades (lighter) from your base surface color (primary background color). For a dark theme Google advises to use a lighter surface color to indicate that a component is ‘on top’ of the other. ![]() ElevationĮlevation is the relative distance between components along the z-axis. (don’t worry for now, more of this in part 2). However, make sure there is enough contrast to meet the accessibility standards outlined in the WCAG 2.0. This will be especially noticeable with longer areas of text. When designing a dark theme, it is recommended to use dark gray as a primary background color (Google recommends #121212).Īs you can see, white text on a dark gray surface has less contrast than white text on a true black surface and is therefore more comfortable for the eyes. True white (#FFFFFF) on true black (#000000) – or the other way around – creates a high contrast, but is not comfortable for our eyes. This applies to all color palettes, whether light or dark. One aspect that is very important when choosing the right colors for a design, isĬreating enough contrast while reducing eye strain. Part 1: Choosing the right surface colors □□ Use a dark gray instead of true black
0 Comments
Leave a Reply. |