本网站正在建设中(~ ̄▽ ̄)~

  • 你好~!欢迎来到中文歌声合成个人收集站-VCPedia.cn!
  • 若发现页面信息有误投稿至本站,请联系管理员。

模板:ColorOps/doc

出自中文歌聲合成個人收集站
跳至導覽 跳至搜尋

簡介

該模板包含數個操作顏色值的方法:

  • 顏色加深/減淡(操作明度)
  • 修改顏色飽和度
  • 反轉顏色
  • 添加不透明度
  • 隨機顏色
  • 混合兩種顏色

以及兩個判斷方法:

  • 判斷顏色是否為亮色
  • 判斷顏色是否為暗色

用法

該模板所有方法都只支持傳入這些格式的顏色值: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}}
-90 -80 -70 -60 -50 -40 -30 -20 -10  +10 +20 +30 +40 +50 +60 +70 +80 +90 
{{ColorOps|test:s|#FF8040}}
-90 -80 -70 -60 -50 -40 -30 -20 -10  +10 +20 +30 +40 +50 +60 +70 +80 +90 

注意,顏色預覽雖然是整數倍的,但可選範圍是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}}}}
|暗色
|亮色
}}

這是一個隨機的顏色:,它是一個 亮色