Template:Hct/doc
此模板使用Lua語言: |
HCT色彩空间
HCT是Google推出的色彩空间,被Material Design 3所使用[1]。
HCT包含三个量度:hue、chroma、tone——色相、色度、明度。HCT是基于现有成果设计的,其hue、chroma与CAM16的hue、chroma相同,tone与L*a*b*(圆柱坐标系版为LCH)的lightness相同。之所以不直接采用LCH的hue和chroma是因为它们与视觉感官太不一致了。[2]
- 色相 hue
-
0360
色相的取值范围为[0, 360),低于0或高于360的值会被进行模360运算。
色相从0°到360°的顺序大致为“红橙黄绿蓝靛紫红”。
- 色度 chroma
-
0max
色度的最小值为0,最大值取决于色相和明度——这是受sRGB色彩空间的限制。当设定的色度超出最大值时,仍可正常使用,只是会被截断。
色度越大,颜色越鲜艳,反之越黯淡。色度为0时,颜色将是灰度色。
- 明度 tone
-
0100
明度的取值范围为[0, 100]。
明度越大,颜色越亮,反之越暗。明度为0时是黑色,为100时是白色。
优势
HCT色彩空间与HSL色彩空间都采用圆柱坐标系,不同的是,HCT更符合视觉感官。HSL只是简单地将直角坐标系的RGB映射到圆柱坐标系,虽然快速但与视觉感官很不一致。
示例颜色 | ||||
---|---|---|---|---|
观感亮度 | ||||
HSL中的L | 50 | 50 | 50 | 50 |
HCT中的T | 96 | 90 | 53 | 33 |
上面的例子中的四个颜色,尽管在HSL中L(lightness)都相等,但我们可以看出黄色、青色明显要比红色、蓝色亮——HCT中的T正确表示了这一结果。
下面是HCT与HSL分别在T=80/L=80时,色相-色度/色相-饱和度变化图,HCT的结果更为平滑自然:
通过HCT,我们可以很方便地得到一组鲜艳程度、明亮程度一致,色相均匀变化的颜色。
同时,在HCT中,能够直接从tone的数值判断对比度。根据两个颜色的tone的差值:
- ∆tone ≥ 40时,对比度可近似达到3:1——大文本AA级(WCAG成功标准,下同);
- ∆tone ≥ 50时,对比度可近似达到4.5:1——AA级/大文本AAA级;
- ∆tone ≥ 70时,对比度可近似达到7:1——AAA级。[3]
这意味着,在白色背景(tone ≈ 100)下,指定文字颜色的tone小于50即可使对比度达到AA级。
总之,HCT对显示器或色感不好的编辑者有很大的帮助。
模板功能
由HCT得RGB颜色值
{{hct|<hue>|<chroma>|<tone>}} {{hct|<hue> <chroma> <tone>}} {{hct|<hue>, <chroma>, <tone>}} {{hct|hct(<hue> <chroma> <tone>)}}
以上四种语法均可,逗号后面的空格不是必须的。例:{{hct|123|60|50}}
→ #688000。
对于<chroma>
,还支持max
关键字,表示在调整色相与明度后,取尽量大的色度。
对原有的颜色进行操作
{{hct|<颜色>|h=<新hue>|c=<新chroma>|t=<新tone>}} {{hct|<颜色>|h+=<hue增加量>|c+=<chroma增加量>|t+=<tone增加量>}} {{hct|<颜色>|h-=<hue减少量>|c-=<chroma减少量>|t-=<tone减少量>}}
<颜色>
可以是#由HCT得RGB颜色值中的格式,也可以是#RGB
、#RRGGBB
、rgb()
这样的格式。暂不支持透明度。- 按需选择
h
/c
/t
、=
//
+=
/-=
操作。- 对于
<新chroma>
,还支持max
关键字,表示在调整色相与明度后,取尽量大的色度。
- 对于
- 加减号前可以添加空白符以配合编辑风格,如
{{ hct | #123 | h += 180 | c = max }}
示例:
- 将颜色反转:
{{hct|123|50|50|h+=180}}
→ #8666C1 ; - 提高易读性:不易读的颜色
{{hct|#0dd|t=45}}
→ #007777 易读的颜色; - 三个参数均用上:
{{hct|#114514|h=0|c=max|t+=40}}
→ #FF6AA2 。
获取某个颜色的HCT属性
{{hct|<颜色>|get=h/c/t/hct}}
<颜色>
与#颜色操作中的定义相同。get=h/c/t
将返回当前hue、chroma或tone;get=hct
的返回结果是“hct(h c t)”。
可以与#颜色操作的参数一同使用,得到操作后的属性。
示例:
- 获取tone:
{{hct|rgb(192, 168, 0)|get=t}}
→ 68.904。tone > 50,可知该颜色是亮色。 - 获取HCT:
{{hct|270|50|50|get=hct}}
→ hct(269.948 50.167 49.99)。我们输入的是整数,可获取到的HCT却是小数,这是因为从HCT到RGB的映射是一个多对一的映射,模板返回的是最接近后者的HCT。
线性插值
{{hct|<hue范围>|<chroma范围>|<tone范围>}} {{hct|<hue范围>|<chroma范围>|<tone范围>|num=<个数>}}
得到给定的几个颜色之间在HCT色彩空间内的线性过渡,将输出“颜色1, 颜色2, 颜色3, ……, 颜色n”,常用于渐变。
<hue范围>
、<chroma范围>
、<tone范围>
:可以是单个值,也可以是多个值,值与值之间用“~”分隔,如0 ~ 100 ~ 20
表示由0均匀变化到100,再均匀变化到20。<chroma范围>
可以包含max
,但只能出现在首尾,可能的情况有:- 单独的
max
:每个插值点的tone都尽可能大; … ~ max
/max ~ …
/max ~ … ~ max
:先计算端点的max,再根据这个计算值插值。
- 单独的
<个数>
:输出的颜色的个数,变化幅度大时应相应地增加颜色个数,以更好地拟合。- 默认个数是2n − 1(n是hue、chroma、tone的个数中的最大值,下同)。例如,
{{hct|10~20~30~50|0~50|0~20~80}}
的n为4,将输出7个颜色。 - 最小值是n,如果
<个数>
小于这个值,则会被忽略。
- 默认个数是2n − 1(n是hue、chroma、tone的个数中的最大值,下同)。例如,
示例:
<div style="background:linear-gradient(to right, {{hct|50~220|66|70|num=10}})">用法示例喵</div>
如果不在HCT色彩空间插值,将会是这样:
使用情景
大家族模板
这里提供一种为大家族模板配色的方法——当然,并不是必须遵守。
- 通常保持title、group、list的背景色色相一致,色相根据需求选择,也可以在已知颜色的基础上调整。
- 色度通常一致。不应太高否则会很刺眼。
- 明度,通常title ≤ group < subgroup < list。
- groupstyle:相同层级的明度相等,层级越深明度越高。
- liststyle / oddstyle / evenstyle:明度控制在95~100。
- 注意文字背景对比度——明度差一般要大于50(下面的titlestyle就是个例子,调整背景色的同时调整了文字颜色)。
{{Navbox |name = …… |title = HCT在大家族模板中的运用 |titlestyle= background-color:{{hct|250|50|40}};color:{{hct|250|50|95}} |groupstyle= background-color:{{hct|250|50|80}} |group1= group |list1 = {{Navbox subgroup |groupstyle= background-color:{{hct|250|50|90}} |evenstyle= background-color:{{hct|250|50|98}} |group1= subgroup |list1 = list |group2= subgroup |list2 = list |group3= subgroup |list3 = list }} }}
|
处理瞎眼颜色
对于文字来说,瞎眼颜色通常由以下情况之一或综合导致:
- 色度太高——刺眼。
解决方法:降低色度。 - 与背景的对比度太低——看不清。
解决方法:在浅色背景上,降低文字的明度;在深色背景上,升高文字的明度。
处理前:#fcc
这是一段瞎眼文字。
处理后:{{hct|#fcc|t=47}}
这是处理后的文字。
觉得偏灰了,不好看?加色度:{{hct|#fcc|c+=30|t=47}}
这是处理后的文字。
技术限制
模板返回的颜色值为HEX颜色,它们以“#”开头。然而,当一个模板展开后的结果以“#”开头时,会触发解析器的自动换行机制,这使得不期望自动换行的模板不得不以各种方式规避该机制,例如:
#RRGGBB
——长度最短、对于其他模板兼容性最好、替换引用时最干净的方法,缺点后面会讲。#RRGGBB
——用于展示颜色代码(即用在CSS之外)时坑最少的方法,但在替换引用时,会留下丑陋的#
。<nowiki>#RRGGBB</nowiki>
——存在于某些模板的方法。该方法展开长度长;某些对颜色进行二次操作的模板、模块无法正确读取。
本模板采用的方法是第一种,即在“#”前加一个空格。添加的空格在CSS中——这也是模板的主要用途——没有任何影响。但当模板用于文本时会很恼人,稍后可以看下面的例子。
为了规避这些问题,本模板提供了一个参数#
,可以更改“#”的呈现方式。下面列举了一些现象及解决方式。
例一
下面不该有代码块。 {{hct|0|0|0}}是<code><nowiki>{{hct|0|0|0}}</nowiki></code>返回的结果。 上面不该有代码块。
得到
下面不该有代码块。
#000000是{{hct|0|0|0}}
返回的结果。
上面不该有代码块。
上面的代码块不是我们所期望的。解决方式:
下面不会有代码块。 {{hct|0|0|0|#=#}}是<code><nowiki>{{hct|0|0|0}}</nowiki></code>返回的结果。 {{hct|0|0|0|#=<nowiki>#</nowiki>}}是<code><nowiki>{{hct|0|0|0}}</nowiki></code>返回的结果。 上面不会有代码块。
得到
下面不会有代码块。
#000000是{{hct|0|0|0}}
返回的结果。
#000000是{{hct|0|0|0}}
返回的结果。
上面不会有代码块。
例二
黑色的颜色代码是<code>{{hct|0|0|0}}</code>。
得到
黑色的颜色代码是 #000000
。
要解决这一问题,除了使用上一个例子中的两种解决方式,还可以通过#
参数将原本输出的“空格+井号”替换为空,再手动在模板外加上井号。这在你想要替换引用时十分有用。
黑色的颜色代码是<code>#{{hct|0|0|0|#=}}</code>。
得到
黑色的颜色代码是#000000
。
|