谷歌的“500”色板到底是什么?

平面设计 颜色 谷歌 谷歌材料设计
2022-01-01 01:23:36

我一直在阅读谷歌的材料设计,当我阅读风格时,他们一直在提到主要的 500 种颜色(以及从几乎是白色的 50 到 900 的任何其他数字),但是什么这个意思?

我很想尝试创建自己的“材料启发”色样,但由于它们颜色的命名让我感到困惑,我不太确定从哪里开始。我尝试在谷歌上搜索答案(不知何故感觉有点讽刺),但到目前为止我还没有找到太多确凿的答案。如果我不得不猜测,它似乎与颜色的波长有关?

还提到了A100到A700的颜色...

4个回答

我自己也一直在想。

首先,“500”似乎并不表示有多少种颜色,而是他们使用的奇怪的编号系统。500是底座,400比底座亮,600比底座暗。这与字体权重的编号方式( info )非常相似,所以也许这与它有关。

我发现一些小于 500 的数字是通过将它们淡化为白色(Photoshop 中的“屏幕”混合模式)或黑色(“相乘”)来找到的。

  • 900:59%(收盘价)
  • 600:10%(几乎准确)
  • 500:基础
  • 400:15%(精确)
  • 300:30%(精确)
  • 200:50%(精确)
  • 100:70%(关闭)
  • 50:88%(准确)

我在这里没有看到模式。也许没有。或者我忽略了一些明显的东西;我很不擅长配色。

我将把它留在这里,因为它是关于该主题的新信息。

https://www.youtube.com/watch?t=73&v=xYkz0Ueg0L4

发表于 2015 年 5 月 28 日

你的色彩理论有点生疏?材料设计使颜色变得容易。在 www.google.com/design 上了解有关颜色和材料设计的更多信息

ETA: 原色(500 种)是 Google 选择作为您设计基础的“主要颜色”(或颜色)的颜色。您从主要的 500 开始,然后从浅色到深色;这些颜色应用于 UI 中的不同元素。

500 描述了产品中的主要主题(并且非常适合工具栏)从那里扩展到状态栏的 700 或次要信息的 300 A 颜色是强调色 - 更明亮和更饱和鼓励交互。这些非常适合突出显示主要操作按钮、标准按钮、开关和滑块。

有趣的是,这段视频中的信息似乎与谷歌在上面提到的调色板页面上提供的信息相矛盾,或者至少在阐述上不一致(http://www.google.com/design/spec/style/color .html#color-color-palette)。

在调色板页面上,他们说“Google 建议在您的应用中使用 500 种颜色作为原色,其他颜色作为强调色”在视频中他们说“A 颜色是强调色......”

诚然,细微的差别,但如果谷歌要开发风格指南,它们应该与“口音”一词的使用保持一致。

也许你已经找到了这个资源,但谷歌已经整理了一个非常方便的指南来帮助开发人员和设计师与新的 Material 氛围同步。

整个指南可以在这里找到 - http://www.google.com/design/spec/material-design/introduction.html#

具体来说,此页面提供了他们最喜欢的所有颜色可供下载 - http://www.google.com/design/spec/style/color.html#color-color-palette

这是您问题的答案..看看这个视频

500 色是完美描述产品主要主题的原色,非常适合工具栏。

700s用于状态栏

300s用于次要信息

所以基本上这些数字代表设计的特定部分/部分的原色的预定义阴影和色调。