模板: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的值会被进行模运算。

色相从0°到360°的顺序大致为“红橙黄绿蓝靛紫红”。

色度 chroma

0max

色度的最小值为0，最大值取决于色相和明度——这是由于sRGB色彩空间的限制。当设定的色度超出sRGB色彩空间时，仍可正常使用，但会被截断。

色度越大，颜色越鲜艳，反之越黯淡。色度为0时，颜色将是灰度色。

明度 tone

0100

明度的取值范围为[0, 100]。

明度越大，颜色越亮，反之越暗。明度为0时是黑色，明度为100时是白色。

优势

HCT色彩空间与HSL色彩空间都是极坐标系，与HSL不同，HCT更符合视觉。HSL是一种将RGB映射到圆柱坐标系的一种简单的变换方法，虽然快速但与视觉并不一致。

示例颜色
观感亮度
HSL中的L	50	50	50	50
HCT中的T	96	90	53	33

上面的例子中的四个颜色，尽管在HSL中L（lightness）都相等，但我们可以看出黄色、青色明显要比红色、蓝色亮——在HCT中正确表示了这一结果。

下面是HCT与HSL分别在T=80/L=80时，色相-色度/色相-饱和度变化图，HCT的结果更为平滑自然：

通过HCT，我们可以很方便地得到一组鲜艳程度、明亮程度一致，色相均匀变化的颜色（另附HSL的效果喵，忽亮忽暗）。

同时，在HCT中，能够直接从tone的数值判断对比度比率。根据两个颜色的tone的差值：

∆tone ≥ 40时，对比度比率可近似达到3:1（AA for large text）
∆tone ≥ 50时，对比度比率可近似达到4.5:1（AA）
∆tone ≥ 70时，对比度比率可近似达到7:1（AAA）^[3]

这意味着，在白色背景（tone ≈ 100）下，指定文字颜色的tone小于50即可使之达到AA级。

总之，HCT对显示器或色感不好的编辑者有很大的帮助。

功能

由HCT得颜色值

{{hct|<hue>|<chroma>|<tone>}}
{{hct|<hue> <chroma> <tone>}}
{{hct|<hue>, <chroma>, <tone>}}
{{hct|hct(<hue>, <chroma>, <tone>)}}

以上四种语法均可，逗号后面的空格不是必须的。例：{{hct|123|60|50}} → #688000。

上面的“色相均匀变化的颜色”即是通过此功能得到。

颜色操作

-{}-
{{hct|<颜色>|h=<新hue>|c=<新chroma>|t=<新tone>}}

-{}-<颜色>可以是#由HCT得颜色值中的格式，也可以是#RGB、#RRGGBB、rgb()这样的格式。暂不支持透明度。
-{}-<新hue>、-{}-<新chroma>、-{}-<新tone>至少选择一个。可以是直接赋值，也可以是相对值（+x/-x）。
- 对于-{}-<新chroma>，还支持max关键字，表示在调整后的色相与明度中最大的色度。

示例：

反转颜色：模板:Color block {{hct|123|50|50|h=+180}} → #8666C1 模板:Color block；
易读性：不易读的颜色 {{hct|#0dd|t=45}} → #007777 易读的颜色；
三个参数均用上：模板:Color block {{hct|#114514|h=0|c=max|t=+40}} → #FF6AA2 模板:Color block。

获取属性

-{}-
{{hct|<颜色>|get=h/c/t/hct}}

-{}-<颜色>与#颜色操作中的定义相同。
get=h/c/t将返回当前hue、chroma或tone；
get=hct的返回结果是“hct(h, c, t)”。

可以与#颜色操作的参数一同使用，得到操作后的属性。

示例：

获取tone：模板:Color block {{hct|rgb(192, 168, 0)|get=t}} → 68.90436041269。tone > 50，可知该颜色是亮色。
获取HCT：{{hct|270|50|50|get=hct}} → hct(269.94840547384, 50.166716382906, 49.989955120435)。我们输入的是整数，可获取到的HCT却是小数，这是由于在映射到sRGB色彩空间时，由于RGB是离散的，HctSolver对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（n的定义同上），如果-{}-<个数>小于这个值，则忽略设定的个数。

用法示例：

<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}}