11

I'm trying to understand the following paragraph in Google's Material Design guidelines:

Other elements, such as icons and dividers, also benefit from having an alpha value of black instead of a solid color, to make sure that they work on backgrounds of any color.

source

What does this mean? A 00 alpha value would be completely transparent, right?

migrated from ux.stackexchange.com Apr 9 '15 at 18:26

This question came from our site for user experience researchers and experts.

  • I think "of black" was/is a typo. Or at the very least very poorly worded meaning "an alpha value FOR black" – Scott Apr 9 '15 at 20:16
  • Yes you are right, the Alpha value does refer to transparency of a color. The value goes from 00 to FF in hexadecimal where 00 being complete transparent and FF is solid/opaque. In Android, you specify it as the first two chars in hex format, For e.g #FF000000 is solid black. – Samy S.Rathore Apr 10 '15 at 9:50
5

The full context is as follows:

Use alpha values for grey text, icons, and dividers

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). Text hints for users, like those in text fields and labels, have an even lower visual prominence and should have an alpha value of 26% (#000000).

Other elements, such as icons and dividers, also benefit from having an alpha value of black instead of a solid color, to make sure that they work on backgrounds of any color.

Additionally, there are two example images.

The problem is: they appear to be using a novel definition of "alpha value."

Additionally, their quoted hex-rgb values are not correct, and the example percentages are for their illustrated example of white text on a black background (the text says the values are for black text on white).

From what I can tell, they are suggesting that you use a transparency value in addition to your color values when specifying text and rules.

For icons, perhaps they are suggesting you silhouette the item and provide a non-white alpha channel as opposed to a fixed color matte so that you can programatically change the colors without providing new art for every conceivable value.

TLDNR; the section is poorly written and needs copyediting

  • 2
    If you look at the illustration besides that paragraph, I think what they say, for example, 26% (#000000) is RGBA (0,0,0,0.26) or "black with an opacity of 27% ", which on top of white would look light gray, like in the image. – cockypup Apr 9 '15 at 20:11
  • @cockypup That makes sense. I still think they have a clarity issue here: it may be that they are suggesting using black in all cases and and using an alpha value as a way to simulate "overlay blend mode" or something of that nature – Yorik Apr 9 '15 at 21:15
  • 1
    @yorik that's my interpretation as well. They want you to use an alpha of black rather than gray so that it 'overlays' the color. – DA01 Apr 9 '15 at 21:33
  • @DA01: "instead of a solid color" = not just of grey but any color (?) No idea! – Yorik Apr 9 '15 at 21:39
16

The alpha value is used in the RGBA colour space to indicate the transparency of a colour. The alpha value goes from 0 to 1 where 0 is completely transparent and 1 not transparent at all.

This allows to do "alpha compositing" which, in lay terms, is the process of placing an image on top of a background and to combine the colours to create the illusion of transparency. For more information on this colour space, you can Google "rgba color space" or visit this Wikipedia page

An RGBA colour is usually denoted with 4 values, 3 for each of the RGB components and a last one for the alpha value (e.g. (0,0,0,0.5)), although in the Colour Style document you have referenced they are denoted with a % value in front of an hexadecimal RGB value (e.g. 50% (#000000)).

An "alpha value of black", at least in the scope of the referenced document, would be a short way to indicate any of the colours in a the RGBA space that have black as their RGB value, (0,0,0). They range from from 100% solid black (0,0,0,1) to completely translucent black (0,0,0,0) passing through all the possible values of transparency.

So, for example a 57% alpha value of black, denoted as 57% (#000000), would be an "alpha value of black" where the alpha is equal to 0.57 meaning it is 57% opaque.

In this image you can see the "alpha values of black" suggested in the Colour Style document. I have placed them on top of white and red so you can see the "alpha compositing" in action.

enter image description here

  • You are correct, but looking at the google doc the OP is referencing, it appears to be using a novel definition of alpha value. – Yorik Apr 9 '15 at 19:17
  • How does this answer what the "Alpha value of black" is? I'm not familiar with that terminology either and this doesn't clarify it IMO. Your Black Square has an Alpha Value of 100% (1), but what is an Alpha Value of Black? Say on the Red Square how would you give it an Alpha Value of Black? – Ryan Apr 9 '15 at 19:17
  • 3
    Good point. Edited to answer both the question's title and the question at the end of the body. Also added references to the document the OP has referenced and used the colour of the document as the examples in the image. – cockypup Apr 9 '15 at 20:05
  • I think you cracked the riddle of the enigma of the mystery – Yorik Apr 9 '15 at 21:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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