来自萌娘百科
|
模板文档简介
该模板包含数个操作颜色值的方法：
- 颜色加深/减淡(操作明度)
- 修改颜色饱和度
- 反转颜色
- 添加不透明度
- 随机颜色
- 混合两种颜色
以及两个判断方法：
- 判断颜色是否为亮色
- 判断颜色是否为暗色
用法
该模板所有方法都只支持传入这些格式的颜色值：hex颜色(井号加6位16进制数字)、hex简写颜色(井号加3位16进制数字)、rgb函数、rgba函数、hsl函数、hsla函数、css颜色关键字。
除添加透明度以外，该函数的输出格式均为hex颜色。另外请注意：“Infobox”系列模板只支持hex颜色。
以下示例中使用的{{color_block}}模板用于展示颜色。
操作颜色的明度与饱和度
通过第一个参数进行控制。
该方法的典型使用情景是在选定大家族模板的主要颜色后，利用该方法衍生出各部分(title、group、list等)的颜色。
{{ColorOps|属性符(可选) 操作符 操作值|颜色值}}
- 属性符：
- 默认：反向的操作明度(也就是说，+是降低明度，-是增加明度。为了方便记忆你可以理解为默认是“颜色加深”和“颜色减淡”)你问为什么会设计得这么别扭？这个模板最开始只能操作这个属性←说到底还是最开始没考虑扩展性
- l：操作明度，明度增加则颜色泛白，反之泛黑
- s：操作饱和度，饱和度增加颜色变得更加鲜艳，反之逐渐趋向于灰色
- 操作符：+和-，可以理解为对应属性提高与降低
- 操作值：1 ~ 100之间的整数，默认为10
栗子一
栗子二
栗子三
传入的原始值将作为加深和减淡的初始值和临界值。若想预览所有颜色，可以在第一个参数的位置使用test:属性符，如：
注意，颜色预览虽然是整数倍的，但可选范围是0~100之间任意的。
反转
{{ColorOps|reverse|颜色值}}
栗子：
反转前：{{color_block|#FF8040}}
反转后：{{color_block|{{ColorOps|reverse|#FF8040}}}}
反转前：
反转后：<span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;">
添加不透明度
该处返回值使用css的rgba函数。不透明度范围为0到1。
栗子：
添加前：{{color_block|red}}
添加后：{{color_block|{{ColorOps|opacity|red|0.5}}}}
添加前：
添加后：<span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;">
混合
{{ColorOps|mix|颜色1|颜色2|颜色1所占比重}}
栗子： 模板:Example
随机颜色
{{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}}}}
<span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;"> <span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;"> <span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;"> <span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;"> <span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;">
<span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;"> <span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;"> <span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;"> <span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;"> <span title="脚本错误：没有“ColorOps”这个模块。" style="width:10px;height:10px;background-color:脚本错误：没有“ColorOps”这个模块。;display:inline-block;">