模板:Color

模板文档  

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

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

用法

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

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

为 <text> 设定颜色 <color>，<color> 为以下任一格式

颜色关键字

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}}

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