Skip to main content
added 30 characters in body
Source Link
stradled
  • 2.6k
  • 1
  • 16
  • 22

Why three different shades of accents?

My understanding is so that the additional accent shades are in case there is a need to have a lighter or darker accent. This mightAn example could be because itthe floating button sits half on a particular image for example where the contrast between the image and the related action is not as strong as it could be. From

From the documentation, most of the time it mentions just one "accent" as I guess you should normally only need 1, but in their guidelines, there is scope for others if need be.

See : https://www.google.com/design/spec/style/color.html#color-color-schemes

enter image description here

The site Material Palette (https://www.materialpalette.com) also mentions "Divider color". What is that for?

When lists don’t have an anchoring element such as an avatar or icon, spacing alone isn’t always enough to separate tiles. In this case, full-bleed dividers can help create rhythm and separate individual tiles.

So it is used to define the colour between lists of content.

See : https://www.google.com/design/spec/components/dividers.html#dividers-usage

Materialpalette.com also has colors for text/icons, primary text, secondary text. What's the difference between "text/icons" and "primary text"?

This one I am unsure about the difference so much, but I feel this might just be a bit of an oversight on MaterialPalette's part as it does not even change anything within their preview. But I think it is meant to change the colour of the icon within the floating button and would also be the same colour that is used for the text within a raised button.

See : https://www.google.com/design/spec/components/buttons.html#

enter image description here

Here is also a quick screenshot showing the Primary and Secondary.

enter image description here

Why three different shades of accents?

My understanding is so that the additional accent shades are in case there is a need to have a lighter or darker accent. This might be because it sits on a particular image for example where the contrast between the image and the related action is not as strong as it could be. From the documentation, most of the time it mentions just one "accent" as I guess you should normally only need 1, but in their guidelines, there is scope for others if need be.

See : https://www.google.com/design/spec/style/color.html#color-color-schemes

enter image description here

The site Material Palette (https://www.materialpalette.com) also mentions "Divider color". What is that for?

When lists don’t have an anchoring element such as an avatar or icon, spacing alone isn’t always enough to separate tiles. In this case, full-bleed dividers can help create rhythm and separate individual tiles.

So it is used to define the colour between lists of content.

See : https://www.google.com/design/spec/components/dividers.html#dividers-usage

Materialpalette.com also has colors for text/icons, primary text, secondary text. What's the difference between "text/icons" and "primary text"?

This one I am unsure about the difference so much, but I feel this might just be a bit of an oversight on MaterialPalette's part as it does not even change anything within their preview. But I think it is meant to change the colour of the icon within the floating button and would also be the same colour that is used for the text within a raised button.

See : https://www.google.com/design/spec/components/buttons.html#

enter image description here

Here is also a quick screenshot showing the Primary and Secondary.

enter image description here

Why three different shades of accents?

My understanding is so that the additional accent shades are in case there is a need to have a lighter or darker accent. An example could be because the floating button sits half on a particular image for example where the contrast between the image and the related action is not as strong as it could be.

From the documentation, most of the time it mentions just one "accent" as I guess you should normally only need 1, but in their guidelines, there is scope for others if need be.

See : https://www.google.com/design/spec/style/color.html#color-color-schemes

enter image description here

The site Material Palette (https://www.materialpalette.com) also mentions "Divider color". What is that for?

When lists don’t have an anchoring element such as an avatar or icon, spacing alone isn’t always enough to separate tiles. In this case, full-bleed dividers can help create rhythm and separate individual tiles.

So it is used to define the colour between lists of content.

See : https://www.google.com/design/spec/components/dividers.html#dividers-usage

Materialpalette.com also has colors for text/icons, primary text, secondary text. What's the difference between "text/icons" and "primary text"?

This one I am unsure about the difference so much, but I feel this might just be a bit of an oversight on MaterialPalette's part as it does not even change anything within their preview. But I think it is meant to change the colour of the icon within the floating button and would also be the same colour that is used for the text within a raised button.

See : https://www.google.com/design/spec/components/buttons.html#

enter image description here

Here is also a quick screenshot showing the Primary and Secondary.

enter image description here

Source Link
stradled
  • 2.6k
  • 1
  • 16
  • 22

Why three different shades of accents?

My understanding is so that the additional accent shades are in case there is a need to have a lighter or darker accent. This might be because it sits on a particular image for example where the contrast between the image and the related action is not as strong as it could be. From the documentation, most of the time it mentions just one "accent" as I guess you should normally only need 1, but in their guidelines, there is scope for others if need be.

See : https://www.google.com/design/spec/style/color.html#color-color-schemes

enter image description here

The site Material Palette (https://www.materialpalette.com) also mentions "Divider color". What is that for?

When lists don’t have an anchoring element such as an avatar or icon, spacing alone isn’t always enough to separate tiles. In this case, full-bleed dividers can help create rhythm and separate individual tiles.

So it is used to define the colour between lists of content.

See : https://www.google.com/design/spec/components/dividers.html#dividers-usage

Materialpalette.com also has colors for text/icons, primary text, secondary text. What's the difference between "text/icons" and "primary text"?

This one I am unsure about the difference so much, but I feel this might just be a bit of an oversight on MaterialPalette's part as it does not even change anything within their preview. But I think it is meant to change the colour of the icon within the floating button and would also be the same colour that is used for the text within a raised button.

See : https://www.google.com/design/spec/components/buttons.html#

enter image description here

Here is also a quick screenshot showing the Primary and Secondary.

enter image description here