跳转到内容

层叠样式表/颜色

来自Wikibooks，开放世界中的开放书籍

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

一个CSS规则示例，将所有h1元素设置为在红色背景上显示白色文本

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)

颜色规范在以下各节中详细介绍。

如果在网页中设置任何颜色，则应为页面的body元素同时设置背景颜色和文本颜色。想象一下，如果将文本颜色设置为黑色，而没有设置背景颜色。用户将其首选颜色设置为黑色背景上的黄色文本，对于视力较差的用户来说，这是一种相当常见的组合。页面呈现为黑色背景上的黑色文本，无法使用。

颜色值语法

[编辑 | 编辑源代码]

正式语法

<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个值

青色
黑色
蓝色
紫红色
灰色
绿色
亮绿色
栗色
海军蓝
橄榄色
紫色
红色
银色
蓝绿色
黄色
白色

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是红色、绿色和蓝色的缩写——这三种颜色混合在一起，可以在计算机屏幕上创建所有其他颜色。

基本语法为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”
华夏公益教科书