本站页面（多半）转载自萌娘百科的同名页面，依CC BY-NC-SA 3.0引入，贡献者可以在历史页查询。
因各种原因页面内容可能和源页面有所出入，非本站特有页面内容请以萌娘百科为准。此外，因萌百的api限制，本站部分页面和图片同步自另一个镜像站。
置顶公告：【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好～！欢迎来到萌娘百科镜像站！如需查看或编辑，请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关，请注意分别。

模板: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.uk/index.php?title=Template:Hct&oldid=214737"