查看“︁模板:Color/doc”︁的源代码

'''本段内容来自萌娘百科 https://zh.moegirl.org.cn/ 感谢贡献！'''

这个模板用于为文字设定颜色。

== 用法 ==

<pre>{{color|<color>|<text>}}</pre>

为&lt;text&gt;设定颜色&lt;color&gt;，&lt;color&gt;的格式如下<ref>https://developer.mozilla.org/zh-CN/docs/Web/CSS/color 、https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value</ref>：
<ul>
<li class="colorBlock">一个 ''颜色关键字'' 单词。
{{Hide|标题=现有的关键字如下：|内容=<templatestyles src="Color/doc.css" />
{{columns-list|6|width=130px|2=<nowiki/>
* <span style="background-color: black;"></span> black
* <span style="background-color: silver;"></span> silver
* <span style="background-color: gray;"></span> gray / grey
* <span style="background-color: white;"></span> white
* <span style="background-color: maroon;"></span> maroon
* <span style="background-color: red;"></span> red
* <span style="background-color: purple;"></span> purple
* <span style="background-color: fuchsia;"></span> fuchsia / magenta
* <span style="background-color: green;"></span> green
* <span style="background-color: lime;"></span> lime
* <span style="background-color: olive;"></span> olive
* <span style="background-color: yellow;"></span> yellow
* <span style="background-color: navy;"></span> navy
* <span style="background-color: blue;"></span> blue
* <span style="background-color: teal;"></span> teal
* <span style="background-color: aqua;"></span> aqua / cyan
* <span style="background-color: orange;"></span> orange
* <span style="background-color: aliceblue;"></span> aliceblue
* <span style="background-color: antiquewhite;"></span> antiquewhite
* <span style="background-color: aquamarine;"></span> aquamarine
* <span style="background-color: azure;"></span> azure
* <span style="background-color: beige;"></span> beige
* <span style="background-color: bisque;"></span> bisque
* <span style="background-color: blanchedalmond;"></span> blanchedalmond
* <span style="background-color: blueviolet;"></span> blueviolet
* <span style="background-color: brown;"></span> brown
* <span style="background-color: burlywood;"></span> burlywood
* <span style="background-color: cadetblue;"></span> cadetblue
* <span style="background-color: chartreuse;"></span> chartreuse
* <span style="background-color: chocolate;"></span> chocolate
* <span style="background-color: coral;"></span> coral
* <span style="background-color: cornflowerblue;"></span> cornflowerblue
* <span style="background-color: cornsilk;"></span> cornsilk
* <span style="background-color: crimson;"></span> crimson
* <span style="background-color: darkblue;"></span> darkblue
* <span style="background-color: darkcyan;"></span> darkcyan
* <span style="background-color: darkgoldenrod;"></span> darkgoldenrod
* <span style="background-color: darkgray;"></span> darkgray / darkgrey
* <span style="background-color: darkgreen;"></span> darkgreen
* <span style="background-color: darkkhaki;"></span> darkkhaki
* <span style="background-color: darkmagenta;"></span> darkmagenta
* <span style="background-color: darkolivegreen;"></span> darkolivegreen
* <span style="background-color: darkorange;"></span> darkorange
* <span style="background-color: darkorchid;"></span> darkorchid
* <span style="background-color: darkred;"></span> darkred
* <span style="background-color: darksalmon;"></span> darksalmon
* <span style="background-color: darkseagreen;"></span> darkseagreen
* <span style="background-color: darkslateblue;"></span> darkslateblue
* <span style="background-color: darkslategray;"></span> darkslategray / darkslategrey
* <span style="background-color: darkturquoise;"></span> darkturquoise
* <span style="background-color: darkviolet;"></span> darkviolet
* <span style="background-color: deeppink;"></span> deeppink
* <span style="background-color: deepskyblue;"></span> deepskyblue
* <span style="background-color: dimgray;"></span> dimgray / dimgrey
* <span style="background-color: dodgerblue;"></span> dodgerblue
* <span style="background-color: firebrick;"></span> firebrick
* <span style="background-color: floralwhite;"></span> floralwhite
* <span style="background-color: forestgreen;"></span> forestgreen
* <span style="background-color: gainsboro;"></span> gainsboro
* <span style="background-color: ghostwhite;"></span> ghostwhite
* <span style="background-color: gold;"></span> gold
* <span style="background-color: goldenrod;"></span> goldenrod
* <span style="background-color: greenyellow;"></span> greenyellow
* <span style="background-color: honeydew;"></span> honeydew
* <span style="background-color: hotpink;"></span> hotpink
* <span style="background-color: indianred;"></span> indianred
* <span style="background-color: indigo;"></span> indigo
* <span style="background-color: ivory;"></span> ivory
* <span style="background-color: khaki;"></span> khaki
* <span style="background-color: lavender;"></span> lavender
* <span style="background-color: lavenderblush;"></span> lavenderblush
* <span style="background-color: lawngreen;"></span> lawngreen
* <span style="background-color: lemonchiffon;"></span> lemonchiffon
* <span style="background-color: lightblue;"></span> lightblue
* <span style="background-color: lightcoral;"></span> lightcoral
* <span style="background-color: lightcyan;"></span> lightcyan
* <span style="background-color: lightgoldenrodyellow;"></span> lightgoldenrodyellow
* <span style="background-color: lightgray;"></span> lightgray / lightgrey
* <span style="background-color: lightgreen;"></span> lightgreen
* <span style="background-color: lightpink;"></span> lightpink
* <span style="background-color: lightsalmon;"></span> lightsalmon
* <span style="background-color: lightseagreen;"></span> lightseagreen
* <span style="background-color: lightskyblue;"></span> lightskyblue
* <span style="background-color: lightslategray;"></span> lightslategray / lightslategrey
* <span style="background-color: lightsteelblue;"></span> lightsteelblue
* <span style="background-color: lightyellow;"></span> lightyellow
* <span style="background-color: limegreen;"></span> limegreen
* <span style="background-color: linen;"></span> linen
* <span style="background-color: mediumaquamarine;"></span> mediumaquamarine
* <span style="background-color: mediumblue;"></span> mediumblue
* <span style="background-color: mediumorchid;"></span> mediumorchid
* <span style="background-color: mediumpurple;"></span> mediumpurple
* <span style="background-color: mediumseagreen;"></span> mediumseagreen
* <span style="background-color: mediumslateblue;"></span> mediumslateblue
* <span style="background-color: mediumspringgreen;"></span> mediumspringgreen
* <span style="background-color: mediumturquoise;"></span> mediumturquoise
* <span style="background-color: mediumvioletred;"></span> mediumvioletred
* <span style="background-color: midnightblue;"></span> midnightblue
* <span style="background-color: mintcream;"></span> mintcream
* <span style="background-color: mistyrose;"></span> mistyrose
* <span style="background-color: moccasin;"></span> moccasin
* <span style="background-color: navajowhite;"></span> navajowhite
* <span style="background-color: oldlace;"></span> oldlace
* <span style="background-color: olivedrab;"></span> olivedrab
* <span style="background-color: orangered;"></span> orangered
* <span style="background-color: orchid;"></span> orchid
* <span style="background-color: palegoldenrod;"></span> palegoldenrod
* <span style="background-color: palegreen;"></span> palegreen
* <span style="background-color: paleturquoise;"></span> paleturquoise
* <span style="background-color: palevioletred;"></span> palevioletred
* <span style="background-color: papayawhip;"></span> papayawhip
* <span style="background-color: peachpuff;"></span> peachpuff
* <span style="background-color: peru;"></span> peru
* <span style="background-color: pink;"></span> pink
* <span style="background-color: plum;"></span> plum
* <span style="background-color: powderblue;"></span> powderblue
* <span style="background-color: rosybrown;"></span> rosybrown
* <span style="background-color: royalblue;"></span> royalblue
* <span style="background-color: saddlebrown;"></span> saddlebrown
* <span style="background-color: salmon;"></span> salmon
* <span style="background-color: sandybrown;"></span> sandybrown
* <span style="background-color: seagreen;"></span> seagreen
* <span style="background-color: seashell;"></span> seashell
* <span style="background-color: sienna;"></span> sienna
* <span style="background-color: skyblue;"></span> skyblue
* <span style="background-color: slateblue;"></span> slateblue
* <span style="background-color: slategray;"></span> slategray / slategrey
* <span style="background-color: snow;"></span> snow
* <span style="background-color: springgreen;"></span> springgreen
* <span style="background-color: steelblue;"></span> steelblue
* <span style="background-color: tan;"></span> tan
* <span style="background-color: thistle;"></span> thistle
* <span style="background-color: tomato;"></span> tomato
* <span style="background-color: turquoise;"></span> turquoise
* <span style="background-color: violet;"></span> violet
* <span style="background-color: wheat;"></span> wheat
* <span style="background-color: whitesmoke;"></span> whitesmoke
* <span style="background-color: yellowgreen;"></span> yellowgreen
* <span style="background-color: rebeccapurple;"></span> rebeccapurple
}}}}
</li>
<li><code><nowiki>transparent</nowiki></code> 关键字，该关键字在旧的CSS颜色标准中由于不支持透明度是一种虚拟颜色，但在第三版开始为透明色 <code><nowiki>rgba(0, 0, 0, 0)</nowiki></code> 的简写。</li>
<li><code><nowiki>currentColor</nowiki></code> 关键字，该关键字主要用于其他颜色属性（如背景色、边框颜色）以使用当前或父辈元素的 <code><nowiki>color</nowiki></code> 颜色，但也可以用于此处以继承父辈元素的颜色。</li>
<li>RGB 模式：该模式使用红、绿、蓝三种颜色按比例混合而成，写法有二（使用<code><nowiki>R</nowiki></code>、<code><nowiki>G</nowiki></code>、<code><nowiki>B</nowiki></code>分别代表红、绿、蓝三种颜色的比例）：
* <code><nowiki>#RRGGBB</nowiki></code> / <code><nowiki>#RGB</nowiki></code>，此处所有颜色均只能填入两位或一位16进制整数数值，按实际数值与255（<code><nowiki>FF</nowiki></code>）的比值计算比例。
** 其中所有颜色要么均使用两位16进制整数数值（此时实际数值即为该数值），要么均使用一位16进制整数数值（此时按两位相同数字数值计算实际数值，例如 <code><nowiki>#CBA</nowiki></code> 按 <code><nowiki>#CCBBAA</nowiki></code> 计算）。
* <code><nowiki>rgb(RR, GG, BB)</nowiki></code>，此处所有颜色要么两位16进制整数数值，按实际数值与255（<code><nowiki>FF</nowiki></code>）的比值计算比例，要么直接填入百分比比例（0% 到 100%，只可使用整数数值，下同）（例如 <code><nowiki>rgb(100%, 0%, 20%)</nowiki></code>）。
</li>
<li>hsl模式：该模式使用色相、饱和度、明度三种参数计算颜色，其中：
* 色相使用无单位角度，数值为整数，取除以 360 后的余数计算实际数值，该数值指代分散到一个圆的周长上的颜色（例如 0 指代红色， 120 指代绿色，240 指代蓝色）
* 饱和度使用百分比比例，越高色彩越纯，低则逐渐变灰。
* 明度使用百分比比例，越高色彩越偏白，100% 时不论色相和饱和度如何均为纯白，越低色彩越偏黑，0% 时为纯黑。
写法形如 <code><nowiki>hsl(0, 100%, 50%)</nowiki></code> 等。
</li>
<li>RGBA 和 hsla 模式：该模式为上述两种模式的扩展，关键点在于追加了新的 alpha 通道以支持透明度，扩展后的写法如下：
;RGBA
:* <code><nowiki>#RRGGBBAA</nowiki></code> / <code><nowiki>#RGBA</nowiki></code>，此处 alpha 通道的位数与其他颜色的位数一致，后者中 alpha 通道也同其他颜色一样按两位相同数字数值计算实际数值（例如 <code><nowiki>#CBA9</nowiki></code> 按 <code><nowiki>#CCBBAA99</nowiki></code> 计算）。
:* <code><nowiki>rgba(RR, GG, BB, AA)</nowiki></code>，此处 alpha 通道的位数与其他颜色的写法一致，要么均为两位16进制整数数值要么均为百分比比例。
;hsla
: 写法形如 <code><nowiki>hsla(0, 100%, 50%, 37%)</nowiki></code>
alpha 值越低代表颜色越透明，0 / 00 / 0%时为全透明，越高代表颜色越不透明，F / FF /100%时为全不透明（rgb 和 hsl 模式可以理解为 alpha 值为 100%）
</li>
</ul>
注意：此模板仅可用于行内内容，不可跨行使用！