模板:ColorOps
跳至導覽
跳至搜尋
模板文檔簡介
該模板包含數個操作顏色值的方法：
- 顏色加深/減淡(操作明度)
- 修改顏色飽和度
- 反轉顏色
- 添加不透明度
- 隨機顏色
- 混合兩種顏色
以及兩個判斷方法：
- 判斷顏色是否為亮色
- 判斷顏色是否為暗色
用法
該模板所有方法都只支持傳入這些格式的顏色值：hex顏色(井號加6位16進位數字)、hex簡寫顏色(井號加3位16進位數字)、rgb函數、rgba函數、hsl函數、hsla函數、css顏色關鍵字。
除添加透明度以外，該函數的輸出格式均為hex顏色。另外請注意：「Infobox」系列模板的left-column-color屬性只支持hex顏色（原因是其實現使用了過時的HTML屬性bgcolor）。
以下示例中使用的{{color_block}}模板用於展示顏色。
操作顏色的明度與飽和度
通過第一個參數進行控制。
該方法的典型使用情景是在選定大家族模板的主要顏色後，利用該方法衍生出各部分(title、group、list等)的顏色。
{{ColorOps|属性符(可选) 操作符 操作值|颜色值}}
- 屬性符：
- 默認：反向的操作明度(也就是說，+是降低明度，-是增加明度。為了方便記憶你可以理解為默認是「顏色加深」和「顏色減淡」)你問為什麼會設計得這麼彆扭？這個模板最開始只能操作這個屬性←說到底還是最開始沒考慮擴展性
- l：操作明度，明度增加則顏色泛白，反之泛黑
- s：操作飽和度，飽和度增加顏色變得更加鮮艷，反之逐漸趨向於灰色
- 操作符：+和-，可以理解為對應屬性提高與降低
- 操作值：1 ~ 100之間的整數，默認為10
栗子一
颜色加深(降低明度)前：{{color_block|#FF8040}}
颜色加深(降低明度)后：{{color_block|{{ColorOps|+32|#FF8040}}}}
提高明度前：{{color_block|#FF8040}}
提高明度后：{{color_block|{{ColorOps|l+32|#FF8040}}}}
顏色加深(降低明度)前：
顏色加深(降低明度)後：
提高明度前：
提高明度後：
栗子二
降低饱和度前：{{color_block|#FF8040}}
降低饱和度后：{{color_block|{{ColorOps|s-80|#FF8040}}}}
降低飽和度前：
降低飽和度後：
栗子三
傳入的原始值將作為加深和減淡的初始值和臨界值。若想預覽所有顏色，可以在第一個參數的位置使用test:属性符，如：
{{ColorOps|test:l|#FF8040}}
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
{{ColorOps|test:s|#FF8040}}
■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■
注意，顏色預覽雖然是整數倍的，但可選範圍是0~100之間任意的。
反轉
{{ColorOps|reverse|颜色值}}
栗子：
反转前：{{color_block|#FF8040}}
反转后：{{color_block|{{ColorOps|reverse|#FF8040}}}}
反轉前：
反轉後：
添加不透明度
該處返回值使用css的rgba函數。不透明度範圍為0到1。
栗子：
添加前：{{color_block|red}}
添加后：{{color_block|{{ColorOps|opacity|red|0.5}}}}
添加前：
添加後：
混合
{{ColorOps|mix|颜色1|颜色2|颜色1所占比重}}
栗子：
{{color_block|{{ColorOps|mix|red|blue}}}}
隨機顏色
{{ColorOps|random}} <!-- 完全随机 -->
{{ColorOps|random|最小值|最大值}} <!-- 设置rgb颜色范围，从0至255 -->
栗子：
{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random}}}}
{{color_block|{{ColorOps|random|150|250}}}}
{{color_block|{{ColorOps|random|150|250}}}}
{{color_block|{{ColorOps|random|150|250}}}}
{{color_block|{{ColorOps|random|150|250}}}}
{{color_block|{{ColorOps|random|150|250}}}}
判斷顏色明暗
{{#vardefine:color|{{ColorOps|random}}}}
这是一个随机的颜色：{{color_block|{{#var:color}}}}，它是一个
{{#if:{{ColorOps|isDark|{{#var:color}}}}
|暗色
|亮色
}}
這是一個隨機的顏色：，它是一個 亮色
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||