Template:Color/doc: Difference between revisions

Revision as of 22:38, 12 January 2025

Usage

{{color|<color>|<text>}}

Sets the color of <text> to <color>, where the format of <color> is as follows ^[1]:

A color keyword word.

The existing keywords are as follows:
transparent keyword, which was a virtual color in the old CSS color standard due to lack of opacity support, but starting from version three, it is shorthand for the transparent color rgba(0, 0, 0, 0).
currentColor keyword, primarily used for other color properties (such as background color, border color) to use the color color of the current or parent element, but can also be used here to inherit the color of the parent element.
RGB mode: This mode mixes red, green, and blue colors in proportion, written in two ways (using R, G, B to represent the proportions of red, green, and blue):
- #RRGGBB / #RGB, where all colors can only be filled with two or one hexadecimal integer values, calculated based on the actual value and the ratio to 255 (FF).
- - All colors must either use two hexadecimal integer values (in which case the actual value is that value), or use one hexadecimal integer value (in which case the actual value is calculated as two identical digit values, for example, #CBA would be calculated as #CCBBAA).
- rgb(RR, GG, BB), where all colors can either be two hexadecimal integer values, calculated based on the actual value and the ratio to 255 (FF), or directly filled in percentage ratios (0% to 100%, only integer values allowed, same here) (for example, rgb(100%, 0%, 20%)).
HSL mode: This mode calculates colors using three parameters: hue, saturation, and lightness, where:
- Hue uses unitless angles, with integer values, calculated by taking the remainder after dividing by 360, representing colors distributed around the circumference of a circle (for example, 0 represents red, 120 represents green, 240 represents blue).
- Saturation uses percentage ratios, with higher values representing purer colors, while lower values become increasingly gray.
- Lightness uses percentage ratios, with higher values leaning towards white, and at 100%, regardless of hue and saturation, the color is pure white; lower values lean towards black, with 0% being pure black.
The format looks like hsl(0, 100%, 50%), etc.
RGBA and HSLA modes: These modes are extensions of the above two modes, with the key point being the addition of a new alpha channel to support transparency. The extended formats are as follows:
RGBA
- #RRGGBBAA / #RGBA, where the alpha channel has the same number of digits as the other colors, with the alpha channel calculated the same way as the other colors (for example, #CBA9 would be calculated as #CCBBAA99).
- rgba(RR, GG, BB, AA), where the alpha channel has the same number of digits as the other colors, which can either be two hexadecimal integer values or percentage ratios.
HSLA

The format looks like hsla(0, 100%, 50%, 37%)
Lower alpha values represent more transparency, with 0 / 00 / 0% being fully transparent, and higher values representing less transparency, with F / FF / 100% being fully opaque (the RGB and HSL modes can be understood as having an alpha value of 100%).

Note: This template can only be used for inline content and cannot be used across lines!

Template:Color/doc: Difference between revisions

Revision as of 22:38, 12 January 2025

Usage

See Also

Navigation menu

@@ Line 1: / Line 1: @@
-这个模板用于为文字设定颜色。
+== Usage ==
-== 用法 ==
+<pre>{{color|<color>|<text>}}</pre>
-<pre>{{color|<color>|<text>}}</pre>
+Sets the color of <text> to <color>, where the format of <color> is as follows <ref>https://developer.mozilla.org/zh-CN/docs/Web/CSS/color, https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value</ref>:
-为&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" />
+<li class="colorBlock">A ''color keyword'' word.
+{{Hide|title=The existing keywords are as follows:|content=<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><code><nowiki>transparent</nowiki></code> keyword, which was a virtual color in the old CSS color standard due to lack of opacity support, but starting from version three, it is shorthand for the transparent color <code><nowiki>rgba(0, 0, 0, 0)</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>）的比值计算比例。
+<li><code><nowiki>currentColor</nowiki></code> keyword, primarily used for other color properties (such as background color, border color) to use the <code><nowiki>color</nowiki></code> color of the current or parent element, but can also be used here to inherit the color of the parent element.</li>
-** 其中所有颜色要么均使用两位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>RGB mode: This mode mixes red, green, and blue colors in proportion, written in two ways (using <code><nowiki>R</nowiki></code>, <code><nowiki>G</nowiki></code>, <code><nowiki>B</nowiki></code> to represent the proportions of red, green, and blue):
+* <code><nowiki>#RRGGBB</nowiki></code> / <code><nowiki>#RGB</nowiki></code>, where all colors can only be filled with two or one hexadecimal integer values, calculated based on the actual value and the ratio to 255 (<code><nowiki>FF</nowiki></code>).
+** All colors must either use two hexadecimal integer values (in which case the actual value is that value), or use one hexadecimal integer value (in which case the actual value is calculated as two identical digit values, for example, <code><nowiki>#CBA</nowiki></code> would be calculated as <code><nowiki>#CCBBAA</nowiki></code>).
+* <code><nowiki>rgb(RR, GG, BB)</nowiki></code>, where all colors can either be two hexadecimal integer values, calculated based on the actual value and the ratio to 255 (<code><nowiki>FF</nowiki></code>), or directly filled in percentage ratios (0% to 100%, only integer values allowed, same here) (for example, <code><nowiki>rgb(100%, 0%, 20%)</nowiki></code>).
 </li>
-<li>hsl模式：该模式使用色相、饱和度、明度三种参数计算颜色，其中：
-* 色相使用无单位角度，数值为整数，取除以 360 后的余数计算实际数值，该数值指代分散到一个圆的周长上的颜色（例如 0 指代红色， 120 指代绿色，240 指代蓝色）
+<li>HSL mode: This mode calculates colors using three parameters: hue, saturation, and lightness, where:
-* 饱和度使用百分比比例，越高色彩越纯，低则逐渐变灰。
-* 明度使用百分比比例，越高色彩越偏白，100% 时不论色相和饱和度如何均为纯白，越低色彩越偏黑，0% 时为纯黑。
+* Hue uses unitless angles, with integer values, calculated by taking the remainder after dividing by 360, representing colors distributed around the circumference of a circle (for example, 0 represents red, 120 represents green, 240 represents blue).
-写法形如 <code><nowiki>hsl(0, 100%, 50%)</nowiki></code> 等。
+* Saturation uses percentage ratios, with higher values representing purer colors, while lower values become increasingly gray.
+* Lightness uses percentage ratios, with higher values leaning towards white, and at 100%, regardless of hue and saturation, the color is pure white; lower values lean towards black, with 0% being pure black.
+The format looks like <code><nowiki>hsl(0, 100%, 50%)</nowiki></code>, etc.
 </li>
-<li>RGBA 和 hsla 模式：该模式为上述两种模式的扩展，关键点在于追加了新的 alpha 通道以支持透明度，扩展后的写法如下：
+<li>RGBA and HSLA modes: These modes are extensions of the above two modes, with the key point being the addition of a new alpha channel to support transparency. The extended formats are as follows:
 ;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进制整数数值要么均为百分比比例。
+:* <code><nowiki>#RRGGBBAA</nowiki></code> / <code><nowiki>#RGBA</nowiki></code>, where the alpha channel has the same number of digits as the other colors, with the alpha channel calculated the same way as the other colors (for example, <code><nowiki>#CBA9</nowiki></code> would be calculated as <code><nowiki>#CCBBAA99</nowiki></code>).
-;hsla
-: 写法形如 <code><nowiki>hsla(0, 100%, 50%, 37%)</nowiki></code>
+:* <code><nowiki>rgba(RR, GG, BB, AA)</nowiki></code>, where the alpha channel has the same number of digits as the other colors, which can either be two hexadecimal integer values or percentage ratios.
-alpha 值越低代表颜色越透明，0 / 00 / 0%时为全透明，越高代表颜色越不透明，F / FF /100%时为全不透明（rgb 和 hsl 模式可以理解为 alpha 值为 100%）
+;HSLA
+: The format looks like <code><nowiki>hsla(0, 100%, 50%, 37%)</nowiki></code>
+Lower alpha values represent more transparency, with 0 / 00 / 0% being fully transparent, and higher values representing less transparency, with F / FF / 100% being fully opaque (the RGB and HSL modes can be understood as having an alpha value of 100%).
 </li>
 </ul>
-注意：此模板仅可用于行内内容，不可跨行使用！
-== 参见 ==
+Note: This template can only be used for inline content and cannot be used across lines!
-*[[Help:颜色列表]]
+== See Also ==
+*[[Help: Color List]]
 <references/>
-<noinclude>[[Category:模板文档]]</noinclude>
+<noinclude>[[Category: Template Documentation]]</noinclude>

Template:Color/doc: Difference between revisions

Revision as of 22:38, 12 January 2025

Usage

See Also

Navigation menu

Search