关于颜色的推理

2020-11-27 07:55:49

2020年7月,我进行了色彩方案的视觉追求。这导致对各种颜色空间及其实用程序进行了一些研究,对base16项目概述的样式指南进行了一些调查,以及GNU Emacs文本编辑器中随附的颜色实用程序。本文将是您可以对每种颜色可以做的事情的旋风之旅,最后是我如何将这些块组合在一起。

自大约2013年以来,我一直是多个Linux桌面自定义社区的成员。其中一个重要方面是在各种情况下使用的颜色–对我来说,游戏的一部分正在尝试构建一种具有凝聚力的,相互关联的颜色系统。以一种可以理解(并因此可以调整)的方式彼此交流–知道在制作“色彩框架”时我可以对各种色彩做些什么。

我是色盲。这意味着我可能对某些颜色真的很挑剔。例如,我不喜欢用红色强调文本–红色细线对我来说看起来像黑色细线(因此,红色文本对我而言通常> POP #000000)。这在“您可以考虑颜色的方式”方面不是特别灵活。

为了显示照明效果,让我们重复上面的渐变,但是不是使用33填充,而是使用99 –这是第二色的三倍(!):

HSL中的饱和度是色度(“距灰色的距离”)的受控形式。有关更多详细信息,请参见Wiki部分。

色相有几个定义的点(旋转60°角),我喜欢将其像一个色罗盘:

hsluv是HSL的变体,试图在亮度方面保持感知上的统一。比较起来,HSL亮度很难进行对比。

这对我们意味着什么?好吧,让我们以上述示例为例,并在HSLuv空间中重新创建它们:

当对亮度值进行推理时,这些比例肯定看起来更加一致。相比较而言,HSL的色调无处不在-尽管同时可能是更自然的混色感觉。

CIE XYZ空间中从显示图像的角度定义“白色”的点

白点是定义的标准照明,不是颜色值固有的。这是在转换为CIELAB颜色空间和从中转换出来时为函数提供的附加信息。

标准白点定义为d65 –在本节中,每次转换都将使用d65进行。这是常用白点及其含义的表格(有关值,请参见Wikipedia链接的底部)。

旋钮A和B使您可以使用LAB空间的4种原色。如果您看一下这些值,您可能会注意到,负值越多,我们得到的颜色就越“凉爽”,而正数时,我们就得到“温暖”的颜色。

让我们看一些LAB颜色。以下标签的值将为(LA B)–请记住,A是绿色到红色,B是蓝色到黄色(每个值都是-100到100)

LCH是cieLAB的“圆柱形”版本。对我们而言,意味着色相是不同的。除了使用我们的色罗盘可以定义的6个定义的岛屿之外,还有4个:

色度,“与灰色之间的距离”-与饱和度非常相似(我已经将其称为色度简称):

让我们比较一些空间。我们将从上方获取一些RGB梯度以标准化HSLuv中的亮度,然后最大化l [100] H,H [s] 50和H [s] Luv:

以上三个分支:LCH最大化100,HSL最大化S,S最大化HSLuv

对于文本,《 Web内容组装指南》(WCAG)建议至少使用4.5:1的对比度。让我们看一些不同的文字对比! 1将从16基灰度级设置中窃取此处使用的背景:#f7f7f7和#101010。作为参考,对比度在#000000和FFFFFF 21.0之间

3.0:lorem ipsum胡萝卜,增强了本科生的发展能力,但它们确实会占用时间和精力,例如劳动和肥胖。

4.0:lorem ipsum胡萝卜,增强了本科生的发展水平,但它们确实会占用时间和精力,例如劳动和肥胖。

5.0:lorem ipsum胡萝卜,增强了本科生的发展能力,但它们确实会占用时间和精力,例如劳动和肥胖。

6.0:胡萝卜(Lorem ipsum)胡萝卜,增强了本科生的发展水平,但它们确实会占用时间和精力,例如劳动和肥胖。

7.0:lorem ipsum胡萝卜,增强了本科生的发展水平,但它们确实会占用时间和精力,例如劳动和肥胖。

8.0:lorem ipsum胡萝卜,增强了本科生的发展能力,但它们确实会占用时间和精力,例如劳动和肥胖。

3.0:lorem ipsum胡萝卜,增强了本科生的发展能力,但它们确实会占用时间和精力,例如劳动和肥胖。

4.0:lorem ipsum胡萝卜,增强了本科生的发展水平,但它们确实会占用时间和精力,例如劳动和肥胖。

5.0:lorem ipsum胡萝卜,增强了本科生的发展能力,但它们确实会占用时间和精力,例如劳动和肥胖。

6.0:胡萝卜(Lorem ipsum)胡萝卜,增强了本科生的发展水平,但它们确实会占用时间和精力,例如劳动和肥胖。

7.0:lorem ipsum胡萝卜,增强了本科生的开发能力,但它们确实会占用时间和精力,例如劳动和肥胖。

8.0:洛雷姆·伊普苏姆·多洛尔(Lorem ipsum dolor)坐下来,奉献己任,圣埃斯莫德(Eiusmod tempor)禁止劳动和劳动者(dolore magna aliqua)。

我认为从这些示例中可以很明显地看出,在深色方案中,更高的对比度大有帮助。

色距是空间中的颜色对颜色相隔多远的度量。例如,让我们从上方获取“洋红色”颜色,并增加其亮度和色度,直到我们相距最小距离为止。我们的目标是在CIELAB空间中测出33(满分100):

颜色距离非常有用,因为它可以让我们测量颜色之间的相似度。您可以使用它来控制停止转换的位置(色彩空间属性调整)。

渐变是您从一种颜色的初始属性值移动到另一种颜色的属性值并收集中间步骤的地方。

HSL中描述的“浅色”具有较高的亮度和较低的饱和度。这意味着我们可以发明一种功能来一点一点“淡化”颜色(增加亮度和降低饱和度)。让我们采用一种较深的已定义颜色#2d249f,并以与页面顶部相同的效果对其进行遍历,使其更柔和,直到变得很亮为止:

色轮旋转与色调有关。色相形成的圆圈是该色彩空间的色轮。此处相对的颜色(彼此相距180°)是互补色。尝试生成调色板的一种方法是进行“色轮旋转”,即在色轮周围的等距点周围获取颜色。我们一直显示的色相值是色轮旋转的示例(60度周围6个点)

假设我们已经在LAB空间中玩耍,找到了看起来温暖的浅色背景LAB(90,90,10),然后我们将其变暗,直到达到某种最低对比度(例如3.9)为止,以此作为初始颜色。#822f65745784 ,其色相为3.8°。让我们来看看在这种颜色下进行色调旋转的样子:

在不同颜色空间中围绕色相的旋转将产生不同的结果。这可以是导出用于配色方案的强调色的方法。

CIELAB具有进入和离开空间时使用的白点组件。您可以调整进入空间然后离开空间时使用的白点值,从而可以“按白点调整颜色”。这是一个奇怪的概念。让我们以本页顶部的渐变为例,使用d65(标准假设,sRGB)将其传递到LAB,但使用d50(“ Horizo​​n Light,ICC配置文件PCS”)将其拉出。 (这种效果通常在灰度颜色上可见,尤其是在较亮的一端):

通过此变换映射调色板大概可以在不同的光照条件下获得更好的效果。我没有玩太多。

本节是关于我实施和实际使用该工具的工具。

Emacs附带了很多转换功能,但是使用它们在色彩空间之间进行转换可能很麻烦。最后,您将获得许多管道来将颜色名称粘贴到rgb,将颜色srgb粘贴到实验室,将颜色实验室的粘贴到lch并通过管道进行回输。为了解决这个问题,我实现了一些包装器,这些包装器将转换为您选择的空间(来自“名称”,例如“#c930e8”字符串)。这是一个示例–假设您想将该颜色的亮度提高1.5倍:

此处的注释旁注:Emacs颜色使用4个字节,而不是2个字节,这就是为什么我们在那里有一个这么长的男孩。当我导出为HTML时,我使用了将颜色缩短到2字节空间的过程,以便浏览器可以呈现它。

是彩色灯吗?只需检查LAB空间中的亮度值即可(请注意:65值为〜观点〜):

您可以使用的一种巧妙技巧是决定是否对颜色使用深色或浅色前景:

这些片段(变压器和比较函数)可以组合起来以进行“使颜色变暗,直到达到最小对比度为止”(这就是我如何对前景和重点色进行主题级对比度调整的方法)。输入ns / color-iterate-一个具有初始颜色的函数,并将其应用到该函数,直到满足条件为止(或者,如果变换不执行任何操作,则不能使#000000变暗!)

(ns / color-iterate“ #eeeeee” ;;在LAB空间中一次变暗一点:(lambda(c)(ns / color-lab-transform c(lambda(LAB)(list(-L 0.1) AB))));;;检查是否已达到所需的对比度;; 4.5,此处是在#f7f7f7背景下(lambda(c)(>(ns / color-contrast-ratio“#f7f7f7” c)4.5) ));; =>“#2d662ca72d1b” ;; (已转换:#2d2c2c)

好了,我们已经经历了很多种可以使用各种颜色的方式。我们怎么用这个?我最终要做的是列出想要在不同情况下使用的颜色类型列表。经过一番修补和考虑,我得出了以下清单:

这对accent2颜色在这里是最尴尬的。我个人认为,字符串对于获得独立的颜色非常重要,这就是accent2_变成的颜色。 “较小和较大”配对的accent1概念涵盖了很多领域,这意味着accent2变成了一种很少使用的颜色-在我写这篇文章时,我意识到也许我可以使用accent2来对标量类型进行一般着色(或扩展所有标量类型的accent2_定义)。

现在,我已经导出了想要的东西类型,是时候尝试上面的技术来创建适合插槽的颜色了:

在撰写本文时,我在LCH空间中使用了45°的颜色旋转(从我的foreground_开始,这是背景的暗色版本)着重于事物偏蓝的一面。通过使accent2(降低LCH中的C)变灰,然后使其变亮直到与背景之间的对比度非常低,我得到了我的背景+。为了后代,我将在这里分享这个主题:

我将它们存储在emacs的哈希表中,以便始终可以从任何地方查询当前主题(例如elisp -r'(ht-get ns / theme:accent1)),从而使我可以在多种情况下使用预期的颜色首选项。

我喜欢免费的东西。有许多base16生成器,其中包括一个用于emacs的构建器–如果我可以将其调色板映射到它,则可以免费支持各种emacs插件和内置软件包!

这看起来可能很全面,但是在特定于编辑器的情况下仍有很大的歧义空间– base16的构建器被迫做出您可能不同意的风格决策。至少在使用emacs base16构建器后,我发现自己做了一些调整。

既然已经创建了映射,并且可以使用一些胶水,那么我可以使用任何base16构建器,从而可以访问用于我的调色板的各种模板和输出!在许多不同的应用程序之间留有空间来“回显”您的色彩决定是非常令人满意的。

当我发布过多的彩色图片时,感谢Eval,camille和xero的所有反馈。