This is based on the saturation of the primary color.

Primary Color: When you input the primary color value, the color palette generator will assign a tonal value to your primary color.

They are used only to identify a certain shade of the color palette.

Tonal values: Each shade of the color palette is assigned with a number that ranges from 50–900.

Let us understand the components of a Color Palette. In this example, we will choose blue as our Primary color (#4BB2F9).Ĭolor palette generated for orange color. And so there is another way to add a little flair to your Dark Theme. Some brands like to use their brand color everywhere.

In this case, it is #272727 which is a mix of #121212 and #FFFFFF (9%).īackground and surfaces with a brand color If you are using a custom built component, then give the true color value.These code components will automatically apply the elevation and color. Ask the dev to use the code components provided by Google. There are 2 ways to hand this off to the dev. You cannot add 2 layers of color to a single element in Adobe XD. Then set the opacity of the duplicated layer to 9%.

You will have to create a duplicate of the base layer (#121212) and then change the color of the duplicate to White. If you are using a tool like Adobe XD, the process is a little different. The elevation and overlay values are available in the UI Kit provided by Google. Higher the elevation, the higher the opacity of the overlay. In this case, the App bar has an elevation of 4dp. This value varies based on the amount of elevation. The opacity of that overlay has been set to 9%. On top of the base layer, there is a white semi-transparent overlay. As you can see the app bar is made up of 2 layers.

Android studio app light and dark theme