Menu
I want my Android app to have its background color set as #F1F1F1. The Material design guidelines suggest 'The status bar should be the darker 700 tint of your primary color.' What does it mean ?
Should I use #(F1*0.7)(F1*0.7)(F1*0.7) as my status bar color ?
458
Picking colors The Material Design team has also built an awesome palette configuration tool: material.io/resources/color/. This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
The Material Design color system supports alternative colors, which are colors used as alternatives to your brand's primary and secondary colors (they constitute additional colors to your theme). Alternative colors can be used to distinguish different sections of a UI.
import { green, purple } from "./colors"; import { ThemeProvider, createTheme } from "@mui/material/styles"; const theme = createTheme({ palette: { primary: { main: green[300], dark: green[500] }, secondary: { main: purple[600], dark: purple[800] } } });
colorPrimary and colorSecondary represent the colors of your brand colorPrimaryVariant and colorSecondaryVariant are lighter or darker shades of your brand colors colorSurface is used for “sheets” of material (like cards and bottom sheets) android:colorBackground is the window background color of your app colorError is ...
Look at the color palettes on the material design spec page (http://www.google.com/design/spec/style/color.html#color-color-palette). Each tint in a palette has a number—that's what the 700 refers to.
129
There is actually an online tool you can use to generate a material palette from a custom color. Check it out: Material Design Palette Generator.
Your original color will be set as the 500 hue value.
Also, check out this question for a somewhat working calculation formula: Convert colorPrimary to colorPrimaryDark (how much darker)
Color.colorToHSV(colorPrimary, hsv);
hsv[2] *= 0.7f;
int colorPrimaryDark = Color.HSVToColor(hsv);
While testing, I noticed that changing the brightness value gets you close to the corresponding colorPrimaryDark, but it's not exactly the value that corresponds to the Google color palette.
The tool I mentioned in the beginning gets it right though.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
