層疊樣式表/顏色

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

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

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