模板文档 | 此模板使用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。
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||