層疊樣式表/顏色

可以為各種物件指定顏色。這些包括文字（“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進位制編寫。參考表包含在內，由維基百科提供。

前兩位十六進位制數字指定顏色中紅色的數量，第三位和第四位指定綠色的數量，最後兩位數字指定藍色的數量。

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特性。值：srgb | p3 | rec2020