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?

Improve this question
2
  • 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, 2015 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, 2015 at 9:50

2 Answers 2

Reset to default
17

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

Improve this answer
4
  • 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, 2015 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, 2015 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, 2015 at 20:05
  • I think you cracked the riddle of the enigma of the mystery
    – Yorik
    Apr 9, 2015 at 21:17
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

Improve this answer
4
  • 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, 2015 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, 2015 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, 2015 at 21:33
  • @DA01: "instead of a solid color" = not just of grey but any color (?) No idea!
    – Yorik
    Apr 9, 2015 at 21:39

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.