置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

模板:Hct/doc

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
跳到导航 跳到搜索
Icon-info.png

本模板可以被替换引用(使用{{subst:hct|...}})。

出于MediaWiki的原因,此模板返回的颜色值前有一个空格,替换引用时请注意,避免留下不美观的源代码。如果不期望空格,请这样:#{{subst:hct|...|#=}}。详见#技术限制

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
0
360

色相的取值范围为[0, 360),低于0或高于360的值会被进行模360运算。

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

色度 chroma
0
max

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

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

明度 tone
0
100

明度的取值范围为[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#RRGGBBrgb()这样的格式。暂不支持透明度。
  • 按需选择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,如果<个数>小于这个值,则会被忽略。

示例:

<div style="background:linear-gradient(to right, {{hct|50~220|66|70|num=10}})">用法示例喵</div>
用法示例喵

如果不在HCT色彩空间插值,将会是这样:

中间比较暗淡

使用情景

大家族模板

这里提供一种为大家族模板配色的方法——当然,并不是必须遵守。

  1. 通常保持title、group、list的背景色色相一致,色相根据需求选择,也可以在已知颜色的基础上调整
  2. 色度通常一致。不应太高否则会很刺眼。
  3. 明度,通常title ≤ group < subgroup < list。
    • groupstyle:相同层级的明度相等,层级越深明度越高。
    • liststyle / oddstyle / evenstyle:明度控制在95~100。
  4. 注意文字背景对比度——明度差一般要大于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——长度最短、对于其他模板兼容性最好、替换引用时最干净的方法,缺点后面会讲。
  • &#35;RRGGBB——用于展示颜色代码(即用在CSS之外)时坑最少的方法,但在替换引用时,会留下丑陋的&#35;
  • <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|#=&#35;}}是<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

参考