【问题标题】:Calculating css gradient difference [duplicate]计算css梯度差异[重复]
【发布时间】:2015-08-15 17:25:50
【问题描述】:

作为对称性的朋友,我通常会在设计时考虑到这一点。最近我一直在使用很多线性渐变来设计我的按钮。大概每个开发人员都花了很多时间在在线渐变生成器上,在两点之间随机选择颜色,几乎只是“眼球”。

但是,如果我想要更精确怎么办?假设我有一个以#ff5db1 开头并以#ef017c 结尾的渐变。如果我想确保我以后使用的所有其他渐变在两种颜色之间的强度和百分比差异都与前两种相同。

有没有一种工具可以计算两种颜色之间的度量,所以我 可以根据这些指标创建一种一致的配色方案吗?

【问题讨论】:

  • 在下面的答案中查看我的评论。这是demo 来说明: 1. 任何算术指标通常都非常有限。 2. 如果您仍然决定使用它 - 您将不需要任何外部工具,因为这可以在预处理器中完全自动化。

标签: css sass less


【解决方案1】:

基本上,我认为你可以。例如,选择你的颜色 - #ef017c 和 #ff5db1。因此,每 2 个数字或字母,它是 HEX 中的一种颜色。例如,在#ff5db1 ff - 红色,5d - 绿色,b1 - 蓝色。您可以计算它在 DEC 中的数量。

对于#ff5db1: (ff)16 = (255)10, (5d)16 = (93)10, (b1)16 = (177)10。

ff5db1 = (255, 93, 177)

对于#ef017c: (ef)16 = (239)10, (01)16 = (1)10, (7c)16 = (124)10

ef017c = (239, 1, 124)。

然后你计算它们之间的差异。

ff5db1 - ef017c = ((255 - 239), (93 - 1), (177 - 124)) = (16, 92, 53) - 这是两种颜色之间的区别。

【讨论】:

  • 嗯,计算颜色的 RGB 值之间的算术差异(或者更好地在它们的 HSL/HSB 之间)是非常简单的 - 但两者都没有为 perceptual 差异提供真正有价值的信息两种颜色之间。 (即使Luminance/Luma 应该代表两种颜色的亮度/亮度之间的感知差异,其用途也非常有限)。换句话说,HSL差异在一定程度上会起作用,但它永远无法达到手动设计的配色方案的感知一致性。
猜你喜欢
  • 2020-05-12
  • 2013-07-10
  • 1970-01-01
  • 2018-11-17
  • 2016-04-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多