12

I look at Google's material color guidelines and can understand that 500 means the primary color. Higher values, like 900, mean "darker" versions of the primary color. Correspondingly, lower values means "lighter" versions of the primary color, like 50.

However, what about A100, A700, etc? What is the meaning of "A" prefix?

1
  • 1
    Haven't got time to find a reference now but it means Accent color
    – Cai
    Apr 5, 2016 at 17:44

2 Answers 2

17

As mentioned on the page you linked, the A in front of the number stands for "Accent". The numbers are lighter the lower they are and darker the higher they are, just like non-accent colors.

Usage guidelines of these accent colors are as follows:

The accent should be used for the floating action button and interactive elements, such as:

  • Text fields and cursors
  • Text selection
  • Progress bars
  • Selection controls, buttons, and sliders Links

How these numbers are calculated is discussed in another post. How to create these type of palettes yourself has also been discussed.

1

Different resources say different things, and no, that link you sent does not say "A stands for accent" as simply as Zach is smugly saying it does. ;)

In fact, the text he is referencing is discussing how you might use SECONDARY color palette colors to accent those things. Other resources outside of Google say that the A stands for "accent" but the Angular-Material documentation says that a combination of primary values without the A as well as one or two with the A are best used for non-accent while some secondary values are best for accenting including some A#s. Basically... it's not clear. Set those values as you please. It doesn't seem that, without diving into the code, you will ever fully define what the "A"s stand for.

https://material.angularjs.org/1.1.3/Theming/03_configuring_a_theme#specifying-custom-hues-for-color-intentions

enter image description here

this is a screenshot of the full text that Zach grabbed his answer from... clearly referencing that secondary colors (not A-colors specifically) are used for those types of components to create an "accent".

In the end... "accent" and "accent colors" and the "A" just don't necessarily line up, and are not clearly defined anywhere.

enter image description here

2
  • Interesting! But while this answer is likely correct, "accent" isn't a bad way to think about these colors most of the time. My guess is that it originally stood for "accent" but then its purpose changed over time Jan 12, 2023 at 4:04
  • Yeah you're prob right. Hope I didn't sound too critical. I've been so frustrated as a designer trying to identify all of the specs used in these components. All of the documentation is very develop focused unfortunately for me... :) Jan 20, 2023 at 12:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.