2023年政策修订增补工作正在进行中，欢迎参与！
  • Moegirl.ICU：萌娘百科流亡社群 581077156（QQ），欢迎对萌娘百科运营感到失望的编辑者加入！
  • Moegirl.ICU：账号认领正在试运行，有意者请参照账号认领流程。

Template:Hct

萌娘百科，万物皆可萌的百科全书！转载请标注来源页面的网页链接，并声明引自萌娘百科。内容不可商用。
跳转到导航 跳转到搜索
Template-info.svg 模板文档  [查看] [编辑] [历史] [刷新]
这个文档嵌入自Template: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、#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，如果<个数>小于这个值，则会被忽略。

示例： 

<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
  }}
}}
 
查 · 论 · 编
HCT在大家族模板中的运用
group
subgroup
list
subgroup
list
subgroup
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。

 
查 · 论 · 编
格式模板
排版
元素浮动
浮动{{Float}} • 清除浮动{{Clear}} • 修改浮动方向{{Clear2}} • 多行{{Stack}}{{Stack begin}}{{Stack end}} • {{Flex}}
分栏
内联{{Columns-list}} • 多行{{Multicol}}{{Multicol-break}}{{Multicol-end}}
对齐
向下对齐{{Bottom}} • 水平居中{{Center}}
特殊字符
文字连接符{{Wj}}/&#x2060; • 零宽空格{{Zwsp}}/&#x200B; • 不换行空格{{Nbsp}}/&nbsp;
表格
{{Table}} • 单列统一样式{{Table column style}}
书写方向
修改书写方向{{Writing-mode}} • 竖排文本{{VText}} • 竖排页面{{Tategaki}} • 镜像文本{{镜像}}
悬停效果
{{Moe-hover}} • {{Hover}} • {{HoverInline}} • {{Hovers}} • {{TextHover}} • {{PicHover}}
颜色
文字颜色
标准{{Color}} • 链接{{Coloredlink}} • 带颜色的日文{{Cj}}
背景颜色
文字背景色{{Background color}} • 荧光笔效果{{荧光笔}} • {{背景图片区域}}
文字及背景颜色
行内文字颜色{{Color2}} • 自动化彩幕{{彩幕}} • 高亮文字含上标{{高亮文字}}
交叉颜色
阴影
渐变
颜色块
颜色操作
颜色计算{{ColorOps}} • “色相·色度·明度”色彩空间{{Hct}}
格式
字体
Emoji{{Emojifont}}
文字样式
全功能{{Font}} • 边框{{Border}}{{文字框}} • 代码格式化{{Pre}} • 强调{{Text-emphasis}} • 上划线{{上划线}} • 文字描边{{文字描边}} • 文字描边2{{文字描边2}} • 文字外发光{{文字外发光}}{{文字外发光/stroke}}{{渐变发光}}
假样式
{{假黑幕}} • {{假链}} • {{Falselink}} • {{假折叠}}
格式化
不可见0{{0}} • 交替文本{{Crosstext}} • 空格生成/重复文字{{Space}} • 填充空间/占位{{Pad}}{{Padding}} • 小数舍入/补零{{Strformat}}
梗
自动化黑幕 {{黑幕}} • 灰色删除线 {{胡话}} • 模糊文字{{文字模糊}}
注音
Ruby系列
标准{{Ruby}} • 黑幕{{Rubyh}} • 多行{{Ruby-begin}}{{Ruby-item}}{{Ruby-end}} • 单字{{Rubya}} • 简化版{{RawRuby}}
其它
可开关注音{{Photrans}}{{Photrans2}} • 逐词可开关注音{{Photransa}} • {{日本人名}} • 国际音标{{IPA}}
其它
定型文
{{配音表}} • {{提问箱}} • {{UnicodeTable}}
链接及分类相关
内链分类{{Cate}}{{萌点}} • 名字分类{{Catn}} • ISBN链接{{ISBN}} • 隐藏红链{{Link}} • 无标记外链{{Plain link}} • 换色链接{{Coloredlink}} • 链接语言标识{{Languageicon}}
导航框
导航框组件{{Navbox}}{{Navbox subgroup}}{{Navbox with columns}}{{Navbox with collapsible groups}}{{Navbar}} • 大家族简易模板{{大家族}}{{大家族模板子项}}{{大家族内容行}}{{Linksplit}} • 横向列表{{Hlist}}
注释
来源请求{{Citation needed}} • 已故人物{{Dead}}{{已故人物标注}} • 上标{{Supt}} • 分级标志{{游戏分级}}/{{电影分级}} • 适龄提示标志{{适龄提示}} • 引言{{Cquote}}{{Quote frame}} • 附注{{Ps}}

参考

  1. ↑ Material color utilities - GitHub
  2. ↑ The Science of Color & Design - Material Design
  3. ↑ Color system – Material Design 3
取自“https://moegirl.icu/index.php?title=Template:Hct&oldid=6417321”