網頁顏色

網頁顏色是在全球資訊網上顯示網頁時使用的顏色，可以用三種方法表示：RGB、十六進位格式或者在一些情況下根據其常見的英文名稱。十六進位的顏色通常是以井號（#）開頭的。顏色是根據其紅色、綠色和藍色成分的強度指定的，每一成分呈現為八個比特。這樣，在sRGB色域內，指定一個網頁顏色共有24比特，共有16777216種顏色可以表示。一些網頁顏色可能還有透明度，默認情況下顏色是完全不透明的，即不透明度為1。

在CSS中，不在sRGB色域內的顏色也可以表示，其紅色、綠色和藍色成分可能是負數或者超過100%，這樣的顏色空間在理論上是沒有邊界的。指定非RGB的顏色需要在CSS中調用`rgb()`函數，無法使用十六進位語法表示。

網頁顏色有明確的色度定義，sRGB，選擇這個是因為它與現實的電腦顯示器和視覺條件相似，以儘可能渲染出與指定值相似的顏色而不需要進行特定的顏色管理，但一些高級的使用者代理會需要顏色管理以提供更廣的色域。

## 十六進位數字表示法

RGB顏色可以使用以井號開頭的六位（或八位）十六進位數字（0-F）表示，相當於三個或者四個字節，每個字節相當於十進位數的0至255。三個字節分別表示紅色、綠色和藍色，第四個字節是可選的，表示Alpha通道。

例如，白色的十六進位表示方法是`#ffffff`，表示其紅、綠、藍三種成分的值均為最大值255，相當於`rgb(255 255 255)`。又如，一種顏色在十進位中紅、綠、藍的成分分別是36、104、160，在十六進位中則相當於24、68、A0因此這個顏色的表示方法為`#2468A0`。

部分六位或八位的十六進位顏色可以簡寫為三位或者四位，部分軟體可能並不支持簡寫形式的顏色。例如，`#09c`相當於簡化的`#0099cc`，`#09c8`相當於簡化的`#0099cc88`。簡寫的顏色形式可以表示4096種顏色（不考慮alpha通道）。

## CSS函數表示法

在CSS中，顏色可以使用函數來表示。在CSS顏色模型3中，函數有兩種表示方法：`rgb()`和`hsl`，這兩個函數也可以寫為`rgba()`和`hsla()`。

rgb顏色是由紅（red）、綠（green）、藍（blue）三個成分以及一個可選的alpha通道指定的，其語法為：

- `rgb(red green blue)`或`rgb(red, green, blue)`（沒有alpha通道）
- `rgb(red green blue / alpha)`或`rgb(red, green, blue, alpha)`（有alpha通道）

例如，`rgb(255 0 0)`和`rgb(100% 0% 0%)`可以表示紅色（rgb(255 0 0)），而`rgb(255 0 0 / 50%)`和`rgb(100% 0% 0% / 50%)`則表示半透明的紅色（rgb(100% 0% 0% / 50%)）。

hsl顏色是由色相（hue）、飽和度（saturation）和明度（lightness）表示的，其語法為：

- `hsl(hue saturation lightness)`或`hsl(hue, saturation, lightness)`（沒有alpha通道）
- `hsl(hue saturation lightness / alpha)`或`hsl(hue, saturation, lightness, alpha)`（有alpha通道）

例如，`hsl(120 100% 50%)`表示綠色（hsl(120 100% 50%)），`hsl(120 100% 50% / 60%)`則表示不透明度僅為40%的綠色（hsl(120 100% 50% / 40%)）。

CSS顏色模型4中還引入了一些依賴於設備的函數：

- `lab(lightness a b)`：在直角坐標模式下的CIELAB色彩空間中的顏色
- `lch(lightness chromaticity hue)`：在極坐標模式下的CIELAB色彩空間中的顏色
- `oklab(lightness a b)`和`lch(lightness chromaticity hue)`：在CIELAB顏色基礎上進行了改進的顏色表示，以更好地擬合視覺效果
- `xyz()`
- `color()`：自定義色彩空間函數

上述函數表示方式均允許添加`/ alpha`以指定alpha值。

## 顏色名稱

<image>

顏色名稱是指通過顏色的英文名稱定義的顏色。在W3C標準中，顏色名稱分為基本顏色和擴展顏色。除了`transparent`之外，所有的顏色都是完全不透明的。

中文名｜英文名｜對應十六進位值

黑色｜black｜#000000

銀色｜silver｜#c0c0c0

栗色｜maroon｜#800000

紅色｜red｜#ff0000

藏青色｜navy｜#000080

藍色｜blue｜#0000ff

紫色｜purple｜#800080

品紅 / 洋紅色｜fuchsia / magenta｜#ff00ff

綠色｜green｜#008000

蘋果綠 / 萊姆色 / 青檸綠｜lime｜#00ff00

橄欖綠｜olive｜#808000

黃色｜yellow｜#ffff00

鴨綠色｜teal｜#008080

水藍或青色｜aqua / cyan｜#00ffff

灰色｜gray / grey｜#808080

白色｜white｜#ffffff

在後來的CSS版本中，加入了橙色和透明色。

CSS顏色模塊版本｜中文｜英文｜代碼、顏色｜注釋

2.1｜橙色｜orange｜#ffa500

3｜透明｜transparent｜#00000000

4｜麗碧卡紫｜rebeccapurple｜#663399｜用來悼念埃里克·邁耶的女兒。

除此之外，CSS3（CSS顏色模塊版本3）接納絕大部分X11顏色（或稱SVG色）。

### 擴展顏色

<image>

HTML 4.01、CSS 2.0、SVG 1.0和CSS 3加入了擴展顏色，有些顏色是由網頁瀏覽器定義的。部分瀏覽器可能不支持所有的顏色顏色，但是在2005年，大多數瀏覽器已完成全面支持。其中這些顏色很多都是來自X11顏色名稱。

下面的表格列舉出了CSS3規範中的所有X11顏色，以及其對應的十六進位值。這個列表中包含了一些常見的同義詞，如aqua和cyan（均表示青色）、fuchsia和magenta（均表示洋紅色）、gray和grey（均表示灰色）。

名稱｜十六進位｜十進制

Pink 粉紅｜FF C0 CB｜255 192 203

LightPink 淺粉｜FF B6 C1｜255 182 193

HotPink 熱情粉紅｜FF 69 B4｜255 105 180

DeepPink 深粉｜FF 14 93｜255 20 147

PaleVioletRed 蒼紫羅蘭紅｜DB 70 93｜219 112 147

MediumVioletRed 中紫羅蘭紅｜C7 15 85｜199 21 133

名稱｜十六進位｜十進制

Red 純紅｜FF 00 00｜255 0 0

LightSalmon 淺鮭魚色｜FF A0 7A｜255 160 122

Salmon 鮭魚色｜FA 80 72｜250 128 114

DarkSalmon 深鮭魚色｜E9 96 7A｜233 150 122

LightCoral 淡珊瑚色｜F0 80 80｜240 128 128

IndianRed 印度紅｜CD 5C 5C｜205 92 92

Crimson 緋紅色｜DC 14 3C｜220 20 60

FireBrick 火磚色｜B2 22 22｜178 34 34

DarkRed 深紅｜8B 00 00｜139 0 0

名稱｜十六進位｜十進制

Orange 橙色｜FF A5 00｜255 165 0

DarkOrange 深橙｜FF 8C 00｜255 140 0

Coral 珊瑚色｜FF 7F 50｜255 127 80

Tomato 番茄色｜FF 63 47｜255 99 71

OrangeRed 橙紅｜FF 45 00｜255 69 0

名稱｜十六進位｜十進制

Yellow 純黃｜FF FF 00｜255 255 0

LightYellow 淺黃｜FF FF E0｜255 255 224

LemonChiffon 檸檬薄紗｜FF FA CD｜255 250 205

LightGoldenrodYellow 淺秋麒麟黃｜FA FA D2｜250 250 210

PapayaWhip 番木瓜色｜FF EF D5｜255 239 213

Moccasin 鹿皮鞋色｜FF E4 B5｜255 228 181

PeachPuff 桃色｜FF DA B9｜255 218 185

PaleGoldenrod 灰秋麒麟色｜EE E8 AA｜238 232 170

Khaki 卡其布色｜F0 E6 8C｜240 230 140

DarkKhaki 深卡其布色｜BD B7 6B｜189 183 107

Gold 金色｜FF D7 00｜255 215 0

名稱｜十六進位｜十進制

Brown 純褐｜A5 2A 2A｜165 42 42

Cornsilk 玉米絲色｜FF F8 DC｜255 248 220

BlanchedAlmond 白杏仁色｜FF EB CD｜255 235 205

Bisque 濃湯色｜FF E4 C4｜255 228 196

NavajoWhite 納瓦霍白｜FF DE AD｜255 222 173

Wheat 小麥色｜F5 DE B3｜245 222 179

BurlyWood 硬木色｜DE B8 87｜222 184 135

Tan 棕褐｜D2 B4 8C｜210 180 140

RosyBrown 玫瑰金｜BC 8F 8F｜188 143 143

SandyBrown 沙褐｜F4 A4 60｜244 164 96

Goldenrod 金菊色｜DA A5 20｜218 165 32

DarkGoldenrod 深金菊色｜B8 86 0B｜184 134 11

Peru 秘魯色｜CD 85 3F｜205 133 63

Chocolate 巧克力色｜D2 69 1E｜210 105 30

SaddleBrown 鞍褐色｜8B 45 13｜139 69 19

Sienna 赭黃｜A0 52 2D｜160 82 45

Maroon 栗色｜80 00 00｜128 0 0

名稱｜十六進位｜十進制

Purple 宗主教紫｜80 00 80｜128 0 128

Lavender 淡薰衣草紫｜E6 E6 FA｜230 230 250

Thistle 薊色｜D8 BF D8｜216 191 216

Plum 李子色｜DD A0 DD｜221 160 221

Violet 紫羅蘭色｜EE 82 EE｜238 130 238

Orchid 蘭花紫｜DA 70 D6｜218 112 214

Fuchsia 品紅色｜FF 00 FF｜255 0 255

Magenta 洋紅色｜FF 00 FF｜255 0 255

MediumOrchid 中蘭花紫｜BA 55 D3｜186 85 211

MediumPurple 中紫｜93 70 DB｜147 112 219

BlueViolet 深紫羅蘭藍｜8A 2B E2｜138 43 226

DarkViolet 深紫羅蘭色｜94 00 D3｜148 0 211

DarkOrchid 深蘭花紫｜99 32 CC｜153 50 204

DarkMagenta 深洋紅｜8B 00 8B｜139 0 139

MediumSlateBlue 中板岩暗藍灰｜7B 68 EE｜123 104 238

SlateBlue 板岩暗藍灰｜6A 5A CD｜106 90 205

DarkSlateBlue 深岩暗藍灰｜48 3D 8B｜72 61 139

Indigo 靛青｜4B 00 82｜75 0 130

名稱｜十六進位｜十進制

Blue 純藍｜00 00 FF｜0 0 255

LightBlue 淡藍｜AD D8 E6｜173 216 230

PowderBlue 粉藍｜B0 E0 E6｜176 224 230

LightSteelBlue 淡鋼藍｜B0 C4 DE｜176 196 222

SteelBlue 鋼藍｜46 82 B4｜70 130 180

LightSkyBlue 淡天藍｜87 CE FA｜135 206 250

SkyBlue 天藍｜87 CE EB｜135 206 235

DeepSkyBlue 深天藍｜00 BF FF｜0 191 255

DodgerBlue 道奇藍｜1E 90 FF｜30 144 255

CornflowerBlue 矢車菊藍｜64 95 ED｜100 149 237

RoyalBlue 寶藍｜41 69 E1｜65 105 225

MediumBlue 中藍｜00 00 CD｜0 0 205

DarkBlue 深藍｜00 00 8B｜0 0 139

Navy 海軍藍｜00 00 80｜0 0 128

MidnightBlue 午夜藍｜19 19 70｜25 25 112

名稱｜十六進位｜十進制

Aquamarine 碧藍｜7F FF D4｜127 255 212

LightSeaGreen 淺海洋綠｜20 B2 AA｜32 178 170

Teal 鴨綠色｜00 80 80｜0 128 128

PaleTurquoise 蒼綠松石色｜AF EE EE｜175 238 238

MediumTurquoise 中綠松石色｜48 D1 CC｜72 209 204

Turquoise 綠松石色｜40 E0 D0｜64 224 208

DarkTurquoise 深綠松石色｜00 CE D1｜0 206 209

LightCyan 淺青色｜E0 FF FF｜224 255 255

Aqua 水色｜00 FF FF｜0 255 255

Cyan 青色｜00 FF FF｜0 255 255

DarkCyan 深青｜00 8B 8B｜0 139 139

CadetBlue 學員藍｜5F 9E A0｜95 158 160

名稱｜十六進位｜十進制

Green 純綠｜00 80 00｜0 128 0

PaleGreen 蒼綠｜98 FB 98｜152 251 152

LightGreen 淡綠｜90 EE 90｜144 238 144

YellowGreen 黃綠｜9A CD 32｜154 205 50

GreenYellow 綠黃｜AD FF 2F｜173 255 47

Chartreuse 查特酒綠｜7F FF 00｜127 255 0

LawnGreen 草坪綠｜7C FC 00｜124 252 0

Lime 蘋果綠、萊姆色、青檸綠｜00 FF 00｜0 255 0

LimeGreen 萊姆綠、檸檬綠｜32 CD 32｜50 205 50

MediumSpringGreen 中春綠｜00 FA 9A｜0 250 154

SpringGreen 春綠｜00 FF 7F｜0 255 127

MediumAquamarine 中碧藍｜66 CD AA｜102 205 170

MediumSeaGreen 中海洋綠｜3C B3 71｜60 179 113

SeaGreen 海洋綠｜2E 8B 57｜46 139 87

DarkSeaGreen 深海洋綠｜8F BC 8F｜143 188 143

ForestGreen 森林綠｜22 8B 22｜34 139 34

DarkGreen 深綠色｜00 66 00｜0 102 0

OliveDrab 橄欖土褐｜6B 8E 23｜107 142 35

Olive 橄欖色｜80 80 00｜128 128 0

DarkOliveGreen 深橄欖綠｜55 6B 2F｜85 107 47

名稱｜十六進位｜十進制

White 純白｜FF FF FF｜255 255 255

Snow 雪白｜FF FA FA｜255 250 250

Honeydew 哈密瓜色｜F0 FF F0｜240 255 240

MintCream 薄荷奶油色｜F5 FF FA｜245 255 250

Azure 天藍霧｜F0 FF FF｜240 255 255

AliceBlue 愛麗絲藍｜F0 F8 FF｜240 248 255

GhostWhite 幽靈白｜F8 F8 FF｜248 248 255

WhiteSmoke 煙燻白｜F5 F5 F5｜245 245 245

Seashell 貝殼白｜FF F5 EE｜255 245 238

Beige 米白｜F5 F5 DC｜245 245 220

OldLace 舊蕾絲白｜FD F5 E6｜253 245 230

FloralWhite 花白｜FF FA F0｜255 250 240

Ivory 象牙白｜FF FF F0｜255 255 240

AntiqueWhite 古董白｜FA EB D7｜250 235 215

Linen 亞麻白｜FA F0 E6｜250 240 230

LavenderBlush 薰衣草紫紅｜FF F0 F5｜255 240 245

MistyRose 霧玫瑰色｜FF E4 E1｜255 228 225

名稱｜十六進位｜十進制

Gray 純灰｜80 80 80｜128 128 128

Gainsboro 庚斯博羅灰｜DC DC DC｜220 220 220

LightGray 淡灰｜D3 D3 D3｜211 211 211

Silver 純銀｜C0 C0 C0｜192 192 192

DarkGray 深灰｜A9 A9 A9｜169 169 169

DimGray 昏灰｜69 69 69｜105 105 105

LightSlateGray 淡岩灰｜77 88 99｜119 136 153

SlateGray 岩灰｜70 80 90｜112 128 144

DarkSlateGray 深岩灰｜2F 4F 4F｜47 79 79

Black 純黑｜00 00 00｜0 0 0

### 系統顏色

外觀｜關鍵字

linkText visitedText activeText highlight mark

## 網頁安全顏色

在20世紀90年代中期，很多顯示器只支持顯示256種顏色，這些顏色由硬體決定或者可以被「顏色表」改變。如果顏色不可用，就必須使用不同的顏色，通常就是最近的顏色或者抖動。在諸如X11的系統上，顏色圖是在不同之間共享的，瀏覽器會分配一些小的顏色塊。在2000年左右，由於24位顏色的普及，256色的顯示銳減，「網頁安全顏色」的實際使用減少。

「網頁安全」顏色並非全都擁有標準的名稱，但是每個顏色都可以以RGB十六進位的形式顯示，每個分量（紅、綠、藍）都會接收以下表中的6個值之一：

鍵｜十六進位值｜十進位值｜小數形式

0｜00｜0｜0

3｜33｜51｜0.2

6｜66｜102｜0.4

9｜99｜153｜0.6

C (12)｜CC｜204｜0.8

F (15)｜FF｜255｜1

下面這個表顯示了所有的網頁安全顏色，以下這些顏色的RGB值都是51的倍數。

### 顏色表

- 000、｜300｜600｜900｜C00｜、F00*
- 003、｜303｜603｜903｜C03｜、F03*

006｜306｜606｜906｜C06｜F06

009｜309｜609｜909｜C09｜F09

00C｜30C｜60C｜90C｜C0C｜F0C

- 00F、｜30F｜60F｜90F｜C0F｜、F0F*

030｜330｜630｜930｜C30｜F30

033｜333｜633｜933｜C33｜F33

036｜336｜636｜936｜C36｜F36

039｜339｜639｜939｜C39｜F39

03C｜33C｜63C｜93C｜C3C｜F3C

03F｜33F｜63F｜93F｜C3F｜F3F

060｜360｜660｜960｜C60｜F60

063｜363｜663｜963｜C63｜F63

066｜366｜666｜966｜C66｜F66

069｜369｜669｜969｜C69｜F69

06C｜36C｜66C｜96C｜C6C｜F6C

06F｜36F｜66F｜96F｜C6F｜F6F

090｜390｜690｜990｜C90｜F90

093｜393｜693｜993｜C93｜F93

096｜396｜696｜996｜C96｜F96

099｜399｜699｜999｜C99｜F99

09C｜39C｜69C｜99C｜C9C｜F9C

09F｜39F｜69F｜99F｜C9F｜F9F

0C0｜3C0｜6C0｜9C0｜CC0｜FC0

0C3｜3C3｜6C3｜9C3｜CC3｜FC3

0C6｜3C6｜6C6｜9C6｜CC6｜FC6

0C9｜3C9｜6C9｜9C9｜CC9｜FC9

0CC｜3CC｜6CC｜9CC｜CCC｜FCC

0CF｜3CF｜6CF｜9CF｜CCF｜FCF

- 0F0、｜3F0｜、6F0、｜9F0｜CF0｜、FF0*

0F3｜、3F3、｜、6F3、｜9F3｜CF3｜、FF3*

- 0F6、｜、3F6、｜6F6｜9F6｜、CF6、｜、FF6*

0F9｜3F9｜6F9｜9F9｜CF9｜FF9

- 0FC、｜、3FC、｜6FC｜9FC｜CFC｜FFC
- 0FF、｜、3FF、｜、6FF、｜9FF｜CFF｜、FFF*

### 網頁最安全顏色

設計者會被鼓勵在網頁中使用這216個網頁最安全的顏色，216色顏色表開發時還有許多的8位顏色，只有22種顏色會被可靠地顯示而不需要重新映射。這22個顏色被稱為「真正安全的顏色」，包含一系列亮度的綠色、黃色和青色。

-GB｜0｜3｜6｜9｜C｜F

00｜、000、｜、F00*

03｜、003、｜、F03*

06 09 0C

0F｜、00F、｜、F0F*

⋮｜⋮

F0｜、0F0、｜、6F0、｜、FF0*

F3｜、3F3、｜、6F3、｜、FF3*

F6｜、0F6、｜、3F6、｜、CF6、｜、FF6*

F9

FC｜、0FC、｜、3FC*

FF｜、0FF、｜、3FF、｜、6FF、｜、FFF*

## 無障礙

### 顏色選擇

一些網頁瀏覽器和設備不支持顏色，對於這些顯示，以及對於失明或者色盲的用於，依賴於顏色的網頁內容會難以顯示或者無法顯示。

顏色一般不應該被指定（而應該調用瀏覽器的默認顏色），或者背景和前景應該同時指定，例如純文本顏色、未訪問連結的顏色、已訪問連結的顏色等。這樣是為了避免在特定的背景上顯示與背景顏色非常相似顏色的文本。

### 顏色對比度

網頁內容無障礙指南要求文本的背景色與前景色具有一定的對比度，常規的文本對比度不小於4.5:1，大文本的對比度不小於3:1。增強的無障礙需要對比度要超過7:1。但是，解決無障礙問題並非像增加對比度那樣簡單。根據網頁無障礙倡議的報告，失讀症的讀者最適合閱讀在最大值之下的對比度的文本。