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

2021年2月26日 (五) 22:25的最新版本

这个文档嵌入自模板:Color/doc。

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

用法

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

{{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]

@@ 第1行： / 第1行： @@
-<includeonly><span style="color:{{{1}}};">{{{2}}}</span></includeonly><noinclude>
+<includeonly><span style="color:{{{1}}};">{{{2}}}</span></includeonly><noinclude>{{doc}}[[Category:格式模板]]</noinclude>
-这个模板可以改变字体颜色。
-==使用方法==
-<pre>{{Color|颜色代码|文本}}</pre>
-示例：
-<pre>{{Color|green|绿色}}{{Color|#F00|红色}}</pre>
-{{Color|green|绿色}}{{Color|#F00|红色}}
-<!--{{doc}}-->[[Category:格式模板]]</noinclude>