9

In Google's spec for material design, I see colors specified as percentages:

To convey a hierarchy of information, you can use different shades for text. The standard alpha value for text on a white background is 87% (#000000). Secondary text, which is lower in the visual hierarchy, should have an alpha value of 54% (#000000).

I don't understand how these percentages work. For example, if the background color is white, what is the color of the text?

What if my background were say #607D8B. What would my text color be? Is it just the background color with the opacity (alpha) set to the percentage?

Johann
  • 27,536
  • 39
  • 165
  • 279

4 Answers4

10

The percentage are for visibility of the color

When we specify any color using hex format :

First 2 digit : visibility

After 6 digit : RRGGBB

So, the calculation example is : 

(87)% of (100) decimel = 87 %   ->    convert to (87)% of (256) in hex 222.72 rounding to 223 which is (DF) in hex

So your color code = #DF607D8B -- primary

Same way, any perentage should be converted to hex

You can check table : here

Community
  • 1
  • 1
Kushal
  • 8,100
  • 9
  • 63
  • 82
  • 2
    So when the spec says "The standard alpha value for text on a white background is 87% (#000000)." - It means that whatever your foreground color happens to be (in this case #000000), set it's alpha to 87% but leave the RGB the same. What the spec is not saying is that if your background is white, you HAVE to use black as your foreground fore text. Is that correct? – Johann Apr 09 '15 at 07:20
  • Could you please provide a link to that text in the specification? – Rafa Sanchez Sep 30 '15 at 13:18
  • You need to calculate percentage from 255 not 256, so 87% is DE. – dzikovskyy Oct 23 '16 at 05:01
  • @dzikovskyy : No, we should calculate percentage from 256 and convert it to Hexadecimel (at this time, we will have base 16 and rage 0-255) – Kushal Oct 24 '16 at 06:18
  • @Kushal: There are 256 possible values including zero, but max value possible is 255 as long as zero is considered. It is easy to check as long as we know that 100% capacity is FF what is hex for 255. – dzikovskyy Oct 24 '16 at 07:52
1

your color (#607D8B) is RGB, while the documentation is referring to ARGB (#FF607D8B), and the percentage refers to the alpha channel. FF is 255 decimal. For pressed you want 40% of the alpha, which makes 102, which should be 66 in hex. So the pressed color should be #66607D8B

Blackbelt
  • 156,034
  • 29
  • 297
  • 305
  • But there must be more to this than just the opacity. If my background is white, I can choose to have any color (that is defined by the material design spec) to be my primary color. Do I then set the alpha of that primary color to that required by the spec? Yet there are colors in the material spec that have no alpha set and yet are almost equivalent to taking a different color and setting the alpha on it. – Johann Apr 09 '15 at 07:14
  • 1
    *Yet there are colors in the material spec that have no alpha set and yet are almost equivalent to taking a different color and setting the alpha on it*, can you post an example of those? Still the documentation refers to the alpha channel – Blackbelt Apr 09 '15 at 07:16
  • I guess what I am saying is that you can have a color with an alpha value less than 100% that is visually the same as some other color where the alpha is set to 100%. For example, 039be5 with opacity set to 100% is visually the same as the color 00999b set to 54%. So why use opacity at all? The only valid reason for using percentages is probably to reduce the number of colors and rely upon the alpha to distinguish the various states (normal, disabled, hover, etc). – Johann Apr 09 '15 at 07:31
  • *So why use opacity at all?* you should check the difference between 24bits colours and 32bits colours :) – Blackbelt Apr 09 '15 at 07:37
1

I guess that means if you use #607D8B as your color then:

Hovered: 20% #607D8B = #33607D8B

Pressed: 40% #607D8B = #66607D8B

etc.

here is the table with hex alpha values

Also if you would like to know the RGB hex value of a color based on an RGBA value and background color, this site might help you.

Community
  • 1
  • 1
Chris K.
  • 977
  • 8
  • 18
0

Kushal's answer, although containing good information, can be a little misleading based on the context of your question.

The standard alpha value for text on a white background is 87% (#000000).

The quoted text you provide explicitly states that the percentages refer to alpha values.

I don't understand how these percentages work. For example, if the background color is white, what is the color of the text?

In this example the background is white (#FFFFFF) and the text is black (#000000). The alpha value of the text is 0.87.

What if my background were say #607D8B. What would my text color be? Is it just the background color with the opacity (alpha) set to the percentage?

That would be a blue-grey color, which in my opinion would fall under the "dark background" category. Use white text at full opacity.

Text opacity
Text may be displayed with different degrees of opacity to convey how important certain information is relative to other information. The level of opacity used for text depends on whether your background is darker or lighter.

Refer to this section of the guidelines for more detail.

Also, if you're choosing your colors from here, take note of what color font they use on top of it.

young_souvlaki
  • 1,886
  • 4
  • 24
  • 28