安卓中材料设计的百分比颜色

Question

在Google的物料设计规范中，我看到颜色以百分比指定：

为了传达信息的层次结构，您可以使用不同的文本阴影。在白色背景上的文本的标准alpha值为87％（#000000）。较低视觉层次结构的辅助文本应具有54％（#000000）的alpha值。

我不明白这些百分比是如何工作的。例如，如果背景颜色是白色，文本的颜色是什么？

如果我的背景颜色是#607D8B，那么我的文本颜色会是什么？它只是将背景颜色的不透明度（alpha）设置为百分比吗？

- Johann

Answer 1

百分比是指颜色的可见度

当我们使用十六进制格式来指定任何颜色时：

First 2 digit : visibility

After 6 digit : RRGGBB

因此，计算示例如下：

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

所以你的颜色代码是：#DF607D8B--primary

同样的，任何百分比都应该转换成十六进制

你可以在这里查看表格：here

- Kushal

---

因此，当规范中说“白色背景上文本的标准 alpha 值为 87% (#000000)”时，这意味着无论你的前景色是什么（在这种情况下是 #000000），都将其 alpha 设为 87%，但 RGB 不变。规范没有说如果你的背景是白色，你必须使用黑色作为前景文本。这样正确吗？ - Johann

请问您能否提供规范中该文本的链接？ - Rafa Sanchez

你需要从255而不是256计算百分比，因此87%为DE。 - dzikovskyy

@dzikovskyy：不，我们应该从256计算百分比并将其转换为十六进制（此时，我们将具有基数16和范围0-255）。 - Kushal

@Kushal：包括零在内，有256个可能的值，但只要将零视为一个值，最大可能值就是255。只要我们知道100%容量是十六进制255（FF），检查它就很容易了。 - dzikovskyy

Answer 2

你的颜色 (#607D8B) 是 RGB，而文档所指的是 ARGB (#FF607D8B)，百分比指的是 alpha 通道。 FF 是十进制的 255。对于按下状态，你需要 40% 的 alpha，这使得它为 102，应该是十六进制的 66。因此，按下的颜色应该是 #66607D8B。

- Blackbelt

---

但这一定不仅仅是透明度的问题。如果我的背景是白色的，我可以选择任何颜色（由材料设计规范定义）作为我的主要颜色。那么我是否应该将该主要颜色的 alpha 值设置为规范所需的值？然而，在材料规范中有一些颜色没有设置 alpha 值，但几乎等同于取另一种颜色并在其上设置 alpha 值。 - Johann

然而，在材料规范中有一些颜色没有设置alpha，但几乎等同于选择不同的颜色并设置其alpha。你能否举个例子？尽管如此，文档仍然提到了alpha通道。 - Blackbelt

我想说的是，你可以有一个带有小于100％ alpha 值的颜色，它在视觉上与另一种 alpha 设置为 100％ 的颜色相同。例如，alpha 设置为 100％ 的 039be5 在视觉上与 alpha 设置为 54％ 的颜色 00999b 相同。那么为什么要使用不透明度呢？使用百分比的唯一有效原因可能是减少颜色数量并依靠 alpha 来区分各种状态（正常、禁用、悬停等）。 - Johann

那么为什么要使用不透明度呢？你应该检查一下24位颜色和32位颜色之间的区别 :) - Blackbelt

Answer 3

我猜这意味着如果你使用 #607D8B 作为颜色，则：

悬停：20% #607D8B = #33607D8B

按下：40% #607D8B = #66607D8B

等等。 在这里 是带有十六进制 alpha 值的表格。

此外，如果您想根据 RGBA 值和背景颜色知道颜色的 RGB 十六进制值，这个 网站可能会对您有所帮助。

- Chris K.

Answer 4

Kushal的回答虽然包含了很好的信息，但基于你问题的上下文，可能会有一点误导。

白色背景上文本的标准alpha值为87％（＃000000）。

你提供的引用文本明确说明百分比是指alpha值。

---

我不明白这些百分比是如何工作的。例如，如果背景颜色是白色，文本的颜色是什么？

在这个例子中，背景是白色(#FFFFFF)，文本是黑色(#000000)。文本的alpha值为0.87。

---

如果我的背景色是#607D8B，那么我的文本颜色会是什么？它只是将背景颜色的不透明度（alpha）设置为百分比吗？

这将是一种蓝灰色，我认为它属于“深色背景”类别。请使用完全不透明的白色文本。

---

文本不透明度
为了传达某些信息相对于其他信息的重要性，文本可以以不同程度的不透明度显示。文本使用的不透明度水平取决于您的背景是较暗还是较亮。

有关更多详细信息，请参阅指南的this部分。

此外，如果您从here选择颜色，请注意它们在其上方使用什么颜色字体。

- young_souvlaki