“模板:Color/doc”的版本间的差异

2022年12月9日 (五) 15:06的最新版本

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

用法

该模板仅可用于行内内容，请勿跨行使用！

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

为 <text> 设定颜色 <color>，<color> 为以下任一格式^[1]^[2]

颜色关键字

`transparent`

完全透明色，等同于 rgba(0, 0, 0, 0)

`currentColor`

该关键字主要用于其他的非文本的颜色属性（例如背景颜色、边框颜色），使用当前元素 CSS color 属性包含的值

RGB 颜色

颜色可以使用红 - 绿 - 蓝（red-green-blue）模式的两种方式定义

十六进制语法

使用 # 为前缀的十六进制符号表示

#RRGGBB[AA]

R（红）、G（绿）、B（蓝）和 A（Alpha）是十六进制字符（0–9、A–F）。A 是可选的。比如，#ff0000 等价于 #ff0000ff

#RGB[A]

R（红）、G（绿）、B（蓝）和 A（Alpha）是十六进制字符（0–9、A–F）。A 是可选的。#RGB 是 #RRGGBB 的简写，比如，#f09 和 #ff0099 表示同一颜色。类似地，#RGBA 是 #RRGGBBAA 的简写，比如，#0f38 和 #00ff3388 表示相同颜色

rgb[a]() 函数

R（红）、G（绿）、B（蓝）可以是数字或者百分比，255 相当于 100%。A（alpha）可以是 0 到 1 之间的数字，或者百分比，数字 1 相当于 100%（完全不透明）。

可以使用逗号分隔各个值：

rgb(12, 22, 46)
rgb(4.7%, 8.6%, 18%)
rgba(12, 22, 36, 0.66)
rgba(4.7%, 8.6%, 18%, 66%)

也可以使用空格与斜杠分隔各个值：

rgb(12 22 46)
rgb(4.7% 8.6% 18%)
rgba(12 22 36 / 0.66)
rgba(4.7% 8.6% 18% / 66%)

注：在现代浏览器中，即使颜色带有透明度也可以使用 rgb() 函数表示。使用 rgba() 函数大多是为了兼容旧式浏览器

HSL 颜色

颜色也可以使用 hsl() 函数符定义为色相 - 饱和度 - 亮度（hue-saturation-lightness）模式

hsl[a]() 函数

H（色相）使用一个数字表示角的大小，可以使用单位为 deg（度）、grad（百分度）、rad（弧度）或是 turn（圈数），若不带单位，则默认单位为 deg。根据色相轮定义，红色为 0deg = 360deg，绿色 = 120deg，蓝色 = 240deg。S（饱和度）和 L（亮度）为百分比。100% 为饱和，0% 为不饱和（灰色）。 100% 亮度为白色，0% 亮度为黑色，50% 亮度为“正常”。A（alpha）可以是 0 到 1 之间的数字，或者百分比，数字 1 相当于 100%（完全不透明）

可以使用逗号分隔各个值：

hsl(.5turn, 22%, 46%)
hsla(180, 22%, 46%, 75%)

也可以使用空格与斜杠分隔各个值：

hsl(.5turn 22% 46%)
hsla(180 22% 46% / 75%)

HSL 颜色示例

完全饱和色

符号	描述	展示
`hsl(0, 100%, 50%)`	红色
`hsl(30, 100%, 50%)`	橙色
`hsl(60, 100%, 50%)`	黄色
`hsl(90, 100%, 50%)`	黄绿色
`hsl(120, 100%, 50%)`	绿色
`hsl(150, 100%, 50%)`	蓝绿色
`hsl(180, 100%, 50%)`	青色
`hsl(210, 100%, 50%)`	天蓝色
`hsl(240, 100%, 50%)`	蓝色
`hsl(270, 100%, 50%)`	紫色
`hsl(300, 100%, 50%)`	品红色
`hsl(330, 100%, 50%)`	粉红色
`hsl(360, 100%, 50%)`	红色

不同饱和度的绿色

符号	描述	展示
`hsl(120, 100%, 50%)`	绿色
`hsl(120, 80%, 50%)`
`hsl(120, 60%, 50%)`
`hsl(120, 40%, 50%)`
`hsl(120, 20%, 50%)`
`hsl(120, 0%, 50%)`	灰色

不同亮度的绿色

符号	描述	展示
`hsl(120, 100%, 0%)`	黑色
`hsl(120, 100%, 25%)`
`hsl(120, 100%, 50%)`
`hsl(120, 100%, 75%)`
`hsl(120, 100%, 100%)`	白色

参见

{{Background color}}

本页面引自萌娘百科同名页面。

[1] ttps://developer.mozilla.org/zh-CN/docs/Web/CSS/color

[2] ttps://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value

[1]

[2]

@@ 第2行： / 第2行： @@
 == 用法 ==
+<div class="warningbox">
+'''该模板仅可用于行内内容，请勿跨行使用！'''
+</div>
 <pre>{{Color|<color>|<text>}}</pre>
-<nowiki>为<text>设定颜色<color>，<color></nowiki>的格式如下<ref>https://developer.mozilla.org/zh-CN/docs/Web/CSS/color 、https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value</ref>：
+为 <code><nowiki><text></nowiki></code> 设定颜色 <code><nowiki><color></nowiki></code>，<code><nowiki><color></nowiki></code> 为以下任一格式<ref>https://developer.mozilla.org/zh-CN/docs/Web/CSS/color</ref><ref>https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value</ref>
-<ul>
-<li class="colorBlock">一个 ''颜色关键字'' 单词。
-<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>
+=== <code>transparent</code> ===
-<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>）的比值计算比例。
+完全透明色，等同于 <code><nowiki>rgba(0, 0, 0, 0)</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>
+=== <code>currentColor</code> ===
-<li>hsl模式：该模式使用色相、饱和度、明度三种参数计算颜色，其中：
-* 色相使用无单位角度，数值为整数，取除以 360 后的余数计算实际数值，该数值指代分散到一个圆的周长上的颜色（例如 0 指代红色， 120 指代绿色，240 指代蓝色）
+该关键字主要用于其他的非文本的颜色属性（例如背景颜色、边框颜色），使用当前元素 CSS <code>color</code> 属性包含的值
-* 饱和度使用百分比比例，越高色彩越纯，低则逐渐变灰。
-* 明度使用百分比比例，越高色彩越偏白，100% 时不论色相和饱和度如何均为纯白，越低色彩越偏黑，0% 时为纯黑。
-写法形如 <code><nowiki>hsl(0, 100%, 50%)</nowiki></code> 等。
+== RGB 颜色 ==
-</li>
-<li>RGBA 和 hsla 模式：该模式为上述两种模式的扩展，关键点在于追加了新的 alpha 通道以支持透明度，扩展后的写法如下：
+颜色可以使用红 - 绿 - 蓝（red-green-blue）模式的两种方式定义
-;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>
+使用 <code>#</code> 为前缀的十六进制符号表示
-alpha 值越低代表颜色越透明，0 / 00 / 0%时为全透明，越高代表颜色越不透明，F / FF /100%时为全不透明（rgb 和 hsl 模式可以理解为 alpha 值为 100%）
-</li>
+==== #RRGGBB[AA] ====
-</ul>
-注意：此模板仅可用于行内内容，不可跨行使用！
+<code>R</code>（红）、<code>G</code>（绿）、<code>B</code>（蓝）和 <code>A</code>（Alpha）是十六进制字符（0–9、A–F）。<code>A</code> 是可选的。比如，<code>#ff0000</code> 等价于 <code>#ff0000ff</code>
+==== #RGB[A] ====
+<code>R</code>（红）、<code>G</code>（绿）、<code>B</code>（蓝）和 <code>A</code>（Alpha）是十六进制字符（0–9、A–F）。<code>A</code> 是可选的。<code>#RGB</code> 是 <code>#RRGGBB</code> 的简写，比如，<code>#f09</code> 和 <code>#ff0099</code> 表示同一颜色。类似地，<code>#RGBA</code> 是 <code>#RRGGBBAA</code> 的简写，比如，<code>#0f38</code> 和 <code>#00ff3388</code> 表示相同颜色
+=== rgb[a]() 函数 ===
+<code>R</code>（红）、<code>G</code>（绿）、<code>B</code>（蓝）可以是数字或者百分比，255 相当于 100%。<code>A</code>（alpha）可以是 0 到 1 之间的数字，或者百分比，数字 1 相当于 100%（完全不透明）。
+可以使用逗号分隔各个值：
+<pre>
+rgb(12, 22, 46)
+rgb(4.7%, 8.6%, 18%)
+rgba(12, 22, 36, 0.66)
+rgba(4.7%, 8.6%, 18%, 66%)
+</pre>
+也可以使用空格与斜杠分隔各个值：
+<pre>
+rgb(12 22 46)
+rgb(4.7% 8.6% 18%)
+rgba(12 22 36 / 0.66)
+rgba(4.7% 8.6% 18% / 66%)
+</pre>
+注：在现代浏览器中，即使颜色带有透明度也可以使用 <code>rgb()</code> 函数表示。使用 <code>rgba()</code> 函数大多是为了兼容旧式浏览器
+== HSL 颜色 ==
+颜色也可以使用 <code>hsl()</code> 函数符定义为色相 - 饱和度 - 亮度（hue-saturation-lightness）模式
+=== hsl[a]() 函数 ===
+<code>H</code>（色相）使用一个数字表示角的大小，可以使用单位为 <code>deg</code>（度）、<code>grad</code>（百分度）、<code>rad</code>（弧度）或是 <code>turn</code>（圈数），若不带单位，则默认单位为 <code>deg</code>。根据色相轮定义，红色为 0deg = 360deg，绿色 = 120deg，蓝色 = 240deg。<code>S</code>（饱和度）和 <code>L</code>（亮度）为百分比。100% 为饱和，0% 为不饱和（灰色）。 100% 亮度为白色，0% 亮度为黑色，50% 亮度为“正常”。<code>A</code>（alpha）可以是 0 到 1 之间的数字，或者百分比，数字 1 相当于 100%（完全不透明）
+可以使用逗号分隔各个值：
+<pre>
+hsl(.5turn, 22%, 46%)
+hsla(180, 22%, 46%, 75%)
+</pre>
+也可以使用空格与斜杠分隔各个值：
+<pre>
+hsl(.5turn 22% 46%)
+hsla(180 22% 46% / 75%)
+</pre>
+=== HSL 颜色示例 ===
+==== 完全饱和色 ====
+{| class="wikitable" style="background-color: transparent"
+|-
+! 符号 !! 描述 !! 展示
+|-
+| <code>hsl(0, 100%, 50%)</code> || 红色 || <div class="color-display wide" style="background-color: hsl(0, 100%, 50%)"></div>
+|-
+| <code>hsl(30, 100%, 50%)</code> || 橙色 || <div class="color-display wide" style="background-color: hsl(30, 100%, 50%)"></div>
+|-
+| <code>hsl(60, 100%, 50%)</code> || 黄色 || <div class="color-display wide" style="background-color: hsl(60, 100%, 50%)"></div>
+|-
+| <code>hsl(90, 100%, 50%)</code> || 黄绿色 || <div class="color-display wide" style="background-color: hsl(90, 100%, 50%)"></div>
+|-
+| <code>hsl(120, 100%, 50%)</code> || 绿色 || <div class="color-display wide" style="background-color: hsl(120, 100%, 50%)"></div>
+|-
+| <code>hsl(150, 100%, 50%)</code> || 蓝绿色 || <div class="color-display wide" style="background-color: hsl(150, 100%, 50%)"></div>
+|-
+| <code>hsl(180, 100%, 50%)</code> || 青色 || <div class="color-display wide" style="background-color: hsl(180, 100%, 50%)"></div>
+|-
+| <code>hsl(210, 100%, 50%)</code> || 天蓝色 || <div class="color-display wide" style="background-color: hsl(210, 100%, 50%)"></div>
+|-
+| <code>hsl(240, 100%, 50%)</code> || 蓝色 || <div class="color-display wide" style="background-color: hsl(240, 100%, 50%)"></div>
+|-
+| <code>hsl(270, 100%, 50%)</code> || 紫色 || <div class="color-display wide" style="background-color: hsl(270, 100%, 50%)"></div>
+|-
+| <code>hsl(300, 100%, 50%)</code> || 品红色 || <div class="color-display wide" style="background-color: hsl(300, 100%, 50%)"></div>
+|-
+| <code>hsl(330, 100%, 50%)</code> || 粉红色 || <div class="color-display wide" style="background-color: hsl(330, 100%, 50%)"></div>
+|-
+| <code>hsl(360, 100%, 50%)</code> || 红色 || <div class="color-display wide" style="background-color: hsl(360, 100%, 50%)"></div>
+|}
+==== 不同饱和度的绿色 ====
+{| class="wikitable" style="background-color: transparent"
+|-
+! 符号 !! 描述 !! 展示
+|-
+| <code>hsl(120, 100%, 50%)</code> || 绿色 || <div class="color-display wide" style="background-color: hsl(120, 100%, 50%)"></div>
+|-
+| <code>hsl(120, 80%, 50%)</code> || || <div class="color-display wide" style="background-color: hsl(120, 80%, 50%)"></div>
+|-
+| <code>hsl(120, 60%, 50%)</code> || || <div class="color-display wide" style="background-color: hsl(120, 60%, 50%)"></div>
+|-
+| <code>hsl(120, 40%, 50%)</code> || || <div class="color-display wide" style="background-color: hsl(120, 40%, 50%)"></div>
+|-
+| <code>hsl(120, 20%, 50%)</code> || || <div class="color-display wide" style="background-color: hsl(120, 20%, 50%)"></div>
+|-
+| <code>hsl(120, 0%, 50%)</code> || 灰色 || <div class="color-display wide" style="background-color: hsl(120, 0%, 50%)"></div>
+|}
+==== 不同亮度的绿色 ====
+{| class="wikitable" style="background-color: transparent"
+|-
+! 符号 !! 描述 !! 展示
+|-
+| <code>hsl(120, 100%, 0%)</code> || 黑色 || <div class="color-display wide" style="background-color: hsl(120, 100%, 0%)"></div>
+|-
+| <code>hsl(120, 100%, 25%)</code> || || <div class="color-display wide" style="background-color: hsl(120, 100%, 25%)"></div>
+|-
+| <code>hsl(120, 100%, 50%)</code> || || <div class="color-display wide" style="background-color: hsl(120, 100%, 50%)"></div>
+|-
+| <code>hsl(120, 100%, 75%)</code> || || <div class="color-display wide" style="background-color: hsl(120, 100%, 75%)"></div>
+|-
+| <code>hsl(120, 100%, 100%)</code> || 白色 || <div class="color-display wide" style="background-color: hsl(120, 100%, 100%)"></div>
+|}
 == 参见 ==