←模板:Color/doc因为以下原因，您没有权限编辑本页： 您所请求的操作仅限于这些用户组的用户使用：用户、自动确认用户 您必须确认您的电子邮件地址才能编辑页面。请通过系统设置设置并确认您的电子邮件地址。 您可以查看和复制此页面的源代码。 这个模板用于为文字设定颜色。 == 用法 == <div class="warningbox"> '''该模板仅可用于行内内容，请勿跨行使用！''' </div> <pre>{{Color|<color>|<text>}}</pre> 为 <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> == 颜色关键字 == === <code>transparent</code> === 完全透明色，等同于 <code><nowiki>rgba(0, 0, 0, 0)</nowiki></code> === <code>currentColor</code> === 该关键字主要用于其他的非文本的颜色属性（例如背景颜色、边框颜色），使用当前元素 CSS <code>color</code> 属性包含的值 == RGB 颜色 == 颜色可以使用红 - 绿 - 蓝（red-green-blue）模式的两种方式定义 === 十六进制语法 === 使用 <code>#</code> 为前缀的十六进制符号表示 ==== #RRGGBB[AA] ==== <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> |} == 参见 == *{{tl|Background color}} <references/> 本页面引自萌娘百科同名页面。 该页面使用的模板： 模板:Tl（查看源代码）返回至模板:Color/doc。
