跳转到内容

层叠样式表/颜色

来自维基教科书，开放世界中的开放书籍

可以为各种对象指定颜色。这些包括文本（“color: white”）、背景（“background-color: white”）和边框（“border-color: gray”）。

一个设置所有h1元素具有红色背景上的白色文本的 CSS 规则示例

h1 { color: white; background-color: red; }



颜色规范方法概述

  • 英文名称，例如color: white
  • CSS 颜色名称 transparent 创建一个完全透明的颜色 = rgba(0, 0, 0, 0)
  • 十六进制RGB值，例如color: #ff0000
  • 十六进制RGB值中的柔和颜色，如color: #f00
  • 十进制RGB值，例如color: rgb(255, 0, 0)
  • 十进制RGBA值，例如color: rgba(255, 0, 0, 0.2)
  • HSL值，例如color: hsl(120, 100%, 50%)
  • HSLA值，例如color: hsla(0, 100%, 50%, 0.5)

颜色规范在以下部分详细介绍。

如果在网页中设置了任何颜色，则应为页面主体元素设置背景色和文本颜色。想象一下，如果将文本颜色设置为黑色，而没有设置背景颜色。用户将他们喜欢的颜色设置为黄色文本在黑色背景上，这对于视力较低的用户来说是一个相当常见的组合。页面将以您的黑色文本在他们的黑色背景上呈现，并且无法使用。

颜色值语法

[编辑 | 编辑源代码]

正式语法

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         

<absolute-color-base> = 
  <hex-color>                |
  <absolute-color-function>  |
  <named-color>              |
  transparent                

<absolute-color-function> = 
  <rgb()>    |
  <rgba()>   |
  <hsl()>    |
  <hsla()>   |
  <hwb()>    |
  <lab()>    |
  <lch()>    |
  <oklab()>  |
  <oklch()>  |
  <color()>  

<rgb()> = 
  <legacy-rgb-syntax>  |
  <modern-rgb-syntax>  

<rgba()> = 
  <legacy-rgba-syntax>  |
  <modern-rgba-syntax>  

<hsl()> = 
  <legacy-hsl-syntax>  |
  <modern-hsl-syntax>  

<hsla()> = 
  <legacy-hsla-syntax>  |
  <modern-hsla-syntax>  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<legacy-rgb-syntax> = 
  rgb( <percentage>#{3} , <alpha-value>? )  |
  rgb( <number>#{3} , <alpha-value>? )      

<modern-rgb-syntax> = 
  rgb( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-rgba-syntax> = 
  rgba( <percentage>#{3} , <alpha-value>? )  |
  rgba( <number>#{3} , <alpha-value>? )      

<modern-rgba-syntax> = 
  rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<legacy-hsl-syntax> = 
  hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsl-syntax> = 
  hsl( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<legacy-hsla-syntax> = 
  hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )  

<modern-hsla-syntax> = 
  hsla( [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<hue> = 
  <number>  |
  <angle>   

<alpha-value> = 
  <number>      |
  <percentage>  

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | <percentage> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65


示例

/* Keyword values */
color: currentcolor;

/* <named-color> values */
color: red;
color: orange;
color: tan;
color: rebeccapurple;

/* <hex-color> values */
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

/* <rgb()> values */
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

/* <hsl()> values */
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

/* <hwb()> values */
color: hwb(90 10% 10%);
color: hwb(90 10% 10% / 0.5);
color: hwb(90deg 10% 10%);
color: hwb(1.5708rad 60% 0%);
color: hwb(0.25turn 0% 40% / 50%);

/* Global values */
color: inherit;
color: initial;
color: revert;
color: revert-layer;
color: unset;

/* Named colors */
rebeccapurple
aliceblue

/* RGB Hexadecimal */
#f09
#ff0099

/* RGB (Red, Green, Blue) */
rgb(255 0 153)
rgb(255 0 153 / 80%)

/* HSL (Hue, Saturation, Lightness) */
hsl(150 30% 60%)
hsl(150 30% 60% / 0.8)

/* HWB (Hue, Whiteness, Blackness) */
hwb(12 50% 0%)
hwb(194 0% 0% / 0.5)

/* LAB (Lightness, A-axis, B-axis) */
lab(50% 40 59.5)
lab(50% 40 59.5 / 0.5)

/* LCH (Lightness, Chroma, Hue) */
lch(52.2% 72.2 50)
lch(52.2% 72.2 50 / 0.5)

/* Oklab (Lightness, A-axis, B-axis) */
oklab(59% 0.1 0.1)
oklab(59% 0.1 0.1 / 0.5)

/* Oklch (Lightness, Chroma, Hue) */
oklch(60% 0.15 50)
oklch(60% 0.15 50 / 0.5)

/* light-dark */
light-dark(white, black)
light-dark(rgb(255 255 255), rgb(0 0 0))

使用英文名称

[编辑 | 编辑源代码]

定义了以下 16 个值

aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
yellow
white

CSS 没有定义应为命名颜色使用的确切色调。如果确切的色调很重要，请使用 RGB 值。

十六进制RGB值

[编辑 | 编辑源代码]
十六进制 二进制 十进制
0 0000 0
1 0001 1
2 0010 2
3 0011 3
4 0100 4
5 0101 5
6 0110 6
7 0111 7
8 1000 8
9 1001 9
A 1010 10
B 1011 11
C 1100 12
D 1101 13
E 1110 14
F 1111 15


要显示的颜色混合比以十六进制表示法指定。也就是说，它们以 16 进制而不是更常见的 10 进制编写。参考表包括在内，由维基百科提供。

前两个十六进制数字指定颜色中红色的数量[1]，第三和第四个数字指定绿色的数量，最后两个数字指定蓝色的数量。

h1 { color: #ff0000; } /* All h1 headings are printed in bright red. */

允许使用简写符号：#rgb 等于 #rrggbb，例如 #3cf 等于 #33ccff。

请注意，可能的取值范围是十六进制 00（= 十进制 0）到十六进制 ff（= 十进制 255）。这与下一节中使用 rgb 表示法可用的范围相同。

RGB值

[编辑 | 编辑源代码]

RGB 是 red、green 和 blue 的缩写 - 用于在计算机屏幕上混合创建所有其他颜色的三种颜色。

基本语法是rgb(red-value, green-value, blue-value)。

可以使用两种不同的方法设置不同的值。

从 0 到 255 的数字

h1 { color: rgb(255, 0, 0); } /* All h1 headings are printed in bright red. */

从 0% 到 100% 的小数

h1 { color: rgb(100%, 0, 0); } /* All h1 headings are printed in bright red. */


现代（css-color-4）rgb 和 rgba 语法

rgb() = [ <legacy-rgb-syntax> | <modern-rgb-syntax> ] 
rgba() = [ <legacy-rgba-syntax> | <modern-rgba-syntax> ] 
<legacy-rgb-syntax> =   rgb( <percentage>#{3} , <alpha-value>? ) |
                  rgb( <number>#{3} , <alpha-value>? )
<legacy-rgba-syntax> = rgba( <percentage>#{3} , <alpha-value>? ) |
                  rgba( <number>#{3} , <alpha-value>? )
<modern-rgb-syntax> = rgb( 
  [ <number> | <percentage> | none]{3} 
  [ / [<alpha-value> | none] ]?  )
<modern-rgba-syntax> = rgba( 
  [ <number> | <percentage> | none]{3} 
  [ / [<alpha-value> | none] ]?  )


允许对 r、g 和 b 使用百分比 百分比参考范围：对于 r、g 和 b：0% = 0.0、100% = 255.0 对于 alpha：0% = 0.0、100% = 1.0

RGBA值

[编辑 | 编辑源代码]

RGBA 是 RGB，其第四个参数是附加的alpha 通道。alpha 通道是介于 0（完全透明）和 1（不透明）之间的值。RGBA 是 CSS3 的一部分。

div { background-color: rgba(255, 0, 0, 0.5); } /* All divs are in bright red with 50% opacity. */
background-color: rgba(255, 0, 0, 0);
background-color: rgba(255, 0, 0, 0.1);
background-color: rgba(255, 0, 0, 0.2);
background-color: rgba(255, 0, 0, 0.3);
background-color: rgba(255, 0, 0, 0.4);
background-color: rgba(255, 0, 0, 0.5);
background-color: rgba(255, 0, 0, 0.6);
background-color: rgba(255, 0, 0, 0.7);
background-color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.9);
background-color: rgba(255, 0, 0, 1);

请注意，MediaWiki 阻止使用 background-image 属性，因此您必须将下面使用的代码复制到文件或您的代码段编辑器中才能看到完整的效果。

<div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/1f/Wallpaper.FALA-S.gif');">
	<div style="background-color: rgba(255, 0, 0, 0); padding: .25em;">background-color: rgba(255, 0, 0, 0);</div>
	<div style="background-color: rgba(255, 0, 0, 0.1); padding: .25em;">background-color: rgba(255, 0, 0, 0.1);</div>
	<div style="background-color: rgba(255, 0, 0, 0.2); padding: .25em;">background-color: rgba(255, 0, 0, 0.2);</div>
	<div style="background-color: rgba(255, 0, 0, 0.3); padding: .25em;">background-color: rgba(255, 0, 0, 0.3);</div>
	<div style="background-color: rgba(255, 0, 0, 0.4); padding: .25em;">background-color: rgba(255, 0, 0, 0.4);</div>
	<div style="background-color: rgba(255, 0, 0, 0.5); padding: .25em;">background-color: rgba(255, 0, 0, 0.5);</div>
	<div style="background-color: rgba(255, 0, 0, 0.6); padding: .25em;">background-color: rgba(255, 0, 0, 0.6);</div>
	<div style="background-color: rgba(255, 0, 0, 0.7); padding: .25em;">background-color: rgba(255, 0, 0, 0.7);</div>
	<div style="background-color: rgba(255, 0, 0, 0.8); padding: .25em;">background-color: rgba(255, 0, 0, 0.8);</div>
	<div style="background-color: rgba(255, 0, 0, 0.9); padding: .25em;">background-color: rgba(255, 0, 0, 0.9);</div>
	<div style="background-color: rgba(255, 0, 0, 1); padding: .25em;">background-color: rgba(255, 0, 0, 1);</div>
</div>

以下是示例，带有银色背景

background-color: rgba(255, 0, 0, 0);
background-color: rgba(255, 0, 0, 0.1);
background-color: rgba(255, 0, 0, 0.2);
background-color: rgba(255, 0, 0, 0.3);
background-color: rgba(255, 0, 0, 0.4);
background-color: rgba(255, 0, 0, 0.5);
background-color: rgba(255, 0, 0, 0.6);
background-color: rgba(255, 0, 0, 0.7);
background-color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.9);
background-color: rgba(255, 0, 0, 1);，即：rgb(255, 0, 0)

HSL值

[编辑 | 编辑源代码]

HSL 代表色调、饱和度和亮度。它是许多阴极射线管设备使用的颜色值系统。HSL 是 CSS3 的一部分。

  • hsl(color-angle, saturation%, lightness%);
div.red   { background-color: hsl(0, 100%, 50%); } /* red in HSL */
div.green  { background-color: hsl(120, 100%, 50%); } /* green in HSL */
div.blue { background-color: hsl(240, 100%, 50%); } /* blue in HSL */

红色

绿色

蓝色

HSLA值

[编辑 | 编辑源代码]

HSLA 是带有 alpha 通道的 HSL 颜色。与 RGBA 一样，第四个参数是介于 0 和 1 之间的值。HSLA 是 CSS3 的一部分。

div.red { background-color: hsla(0, 100%, 50%, 0.5); } /* red in HSL with 50% opacity*/

div { background-color: hsla(0, 100%, 50%, 0.5); } /* All divs are in bright red with 50% opacity. */
background:rgba(255,255,255,0.9);
background-color: rgba(1, 1, 1, 0.1);
background-color: hsla(0, 100%, 50%, 0.2);
background-color: hsla(0, 100%, 50%, 0.3);
background-color: hsla(0, 100%, 50%, 0.4);
background-color: hsla(0, 100%, 50%, 0.5);
background-color: hsla(0, 100%, 50%, 0.6);
background-color: hsla(0, 100%, 50%, 0.7);
background-color: hsla(0, 100%, 50%, 0.8);
background-color: hsla(0, 100%, 50%, 0.9);
background-color: hsla(0, 100%, 50%, 1);

请注意，MediaWiki 阻止使用 background-image 属性，因此您必须将下面使用的代码复制到文件或您的代码段编辑器中才能看到完整的效果。

<div style="background: url('http://upload.wikimedia.org/wikipedia/commons/1/1f/Wallpaper.FALA-S.gif');">
	<div style="background-color: hsla(0, 100%, 50%, 0); padding: .25em;">background-color: hsla(0, 100%, 50%, 0);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.1); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.1);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.2); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.2);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.3); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.3);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.4); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.4);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.5); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.5);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.6); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.6);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.7); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.7);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.8); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.8);</div>
	<div style="background-color: hsla(0, 100%, 50%, 0.9); padding: .25em;">background-color: hsla(0, 100%, 50%, 0.9);</div>
	<div style="background-color: hsla(0, 100%, 50%, 1); padding: .25em;">background-color: hsla(0, 100%, 50%, 1);</div>
</div>

以下是示例，带有银色背景

background-color: hsla(0, 100%, 50%, 0);
background-color: hsla(0, 100%, 50%, 0.1);
background-color: hsla(0, 100%, 50%, 0.2);
background-color: hsla(0, 100%, 50%, 0.3);
background-color: hsla(0, 100%, 50%, 0.4);
background-color: hsla(0, 100%, 50%, 0.5);
background-color: hsla(0, 100%, 50%, 0.6);
background-color: hsla(0, 100%, 50%, 0.7);
background-color: hsla(0, 100%, 50%, 0.8);
background-color: hsla(0, 100%, 50%, 0.9);
background-color: hsla(0, 100%, 50%, 1);，即：hsl(0, 100%, 50%)

hwb

[编辑 | 编辑源代码]
/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

色域

[编辑 | 编辑源代码]

css 颜色显示质量：color-gamut 特性[2]。值：srgb | p3 | rec2020

参考文献

[编辑 | 编辑源代码]
  1. ↑ "CSS 颜色".
  2. ↑ W3C：媒体查询级别 4
检索自 "https://wikibooks.cn/w/index.php?title=Cascading_Style_Sheets/Color&oldid=4341880"
华夏公益教科书