热门问题
时间线
聊天
视角
網頁顏色
用于设计网页的颜色 来自维基百科，自由的百科全书
Remove ads
網頁顏色是在全球資訊網上顯示網頁時使用的顏色，可以用三種方法表示：RGB、十六進制格式或者在一些情況下根據其常見的英文名稱。十六進制的顏色通常是以井號（#）開頭的[1][2]。顏色是根據其紅色、綠色和藍色成分的強度指定的，每一成分呈現為八個比特。這樣，在sRGB色域內，指定一個網頁顏色共有24比特，共有16777216種顏色可以表示。一些網頁顏色可能還有透明度，默認情況下顏色是完全不透明的，即不透明度為1。
在CSS中，不在sRGB色域內的顏色也可以表示，其紅色、綠色和藍色成分可能是負數或者超過100%，這樣的顏色空間在理論上是沒有邊界的[3]。指定非RGB的顏色需要在CSS中調用rgb()函數，無法使用十六進制語法表示。
網頁顏色有明確的色度定義，sRGB[4]，選擇這個是因為它與現實的計算機顯示器和視覺條件相似，以儘可能渲染出與指定值相似的顏色而不需要進行特定的顏色管理，但一些高級的用戶代理會需要顏色管理以提供更廣的色域。
Remove ads
十六進制數字表示法
RGB顏色可以使用以井號開頭的六位（或八位）十六進制數字（0-F）表示，相當於三個或者四個字節，每個字節相當於十進制數的0至255。三個字節分別表示紅色、綠色和藍色，第四個字節是可選的，表示Alpha通道。
例如，白色的十六進制表示方法是#ffffff，表示其紅、綠、藍三種成分的值均為最大值255，相當於rgb(255 255 255)。又如，一種顏色在十進位中紅、綠、藍的成分分別是36、104、160（ ），在十六進制中則相當於24、68、A0因此這個顏色的表示方法為#2468A0[5]。
部分六位或八位的十六進制顏色可以簡寫為三位或者四位[6]，部分軟體可能並不支持簡寫形式的顏色。例如，#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 / 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% / 60%)則表示不透明度僅為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值。
Remove ads
顏色名稱
顏色名稱是指通過顏色的英文名稱定義的顏色。在W3C標準中，顏色名稱分為基本顏色和擴展顏色[7]。除了transparent之外，所有的顏色都是完全不透明的。
在後來的CSS版本中，加入了橙色和透明色。
HTML 4.01、CSS 2.0、SVG 1.0和CSS 3加入了擴展顏色，有些顏色是由網頁瀏覽器定義的。部分瀏覽器可能不支持所有的顏色顏色，但是在2005年，大多數瀏覽器已完成全面支持。其中這些顏色很多都是來自X11顏色名稱。
下面的表格列舉出了CSS3規範中的所有X11顏色，以及其對應的十六進制值。這個列表中包含了一些常見的同義詞，如aqua和cyan（均表示青色）、fuchsia和magenta（均表示品紅色）、gray和grey（均表示灰色）[9][10]。
Remove ads
RGB顏色列表
| #FFCCCC | #FFC0C0 | #FF9999 | #FF8080 | #FF6666 | #FF4040 | #FF3333 | #FF0000 |
| #FFE5CC | #FFE0C0 | #FFCC99 | #FFC080 | #FFB266 | #FFA040 | #FF9933 | #FF8000 |
| #FFFFCC | #FFFFC0 | #FFFF99 | #FFFF80 | #FFFF66 | #FFFF40 | #FFFF33 | #FFFF00 |
| #FFFFE5 | #FFFFE0 | #FFFFCC | #FFFFC0 | #FFFFB2 | #FFFFA0 | #FFFF99 | #FFFF80 |
| #E5FFCC | #E0FFC0 | #CCFF99 | #C0FFA0 | #B2FF66 | #A0FF40 | #99FF33 | #80FF00 |
| #CCFFCC | #C0FFC0 | #99FF99 | #80FF80 | #66FF66 | #40FF40 | #33FF33 | #00FF00 |
| #E5FFE5 | #E0FFE0 | #CCFFCC | #C0FFC0 | #B2FFB2 | #A0FFA0 | #99FF99 | #80FF80 |
| #CCE5CC | #C0E0C0 | #99CC99 | #80C080 | #66B266 | #40A040 | #339933 | #008000 |
| #CCFFE5 | #C0FFE0 | #99FFCC | #80FFC0 | #66FFB2 | #40FFA0 | #33FF99 | #00FF80 |
| #CCFFFF | #C0FFFF | #99FFFF | #80FFFF | #66FFFF | #40FFFF | #33FFFF | #00FFFF |
| #E5FFFF | #E0FFFF | #CCFFFF | #C0FFFF | #B2FFFF | #A0FFFF | #99FFFF | #80FFFF |
| #CCE5E5 | #C0E0E0 | #99CCCC | #80C0C0 | #66B2B2 | #40A0A0 | #339999 | #008080 |
| #CCE5FF | #C0E0FF | #99CCFF | #80C0FF | #66B2FF | #40A0FF | #3399FF | #0080FF |
| #CCCCFF | #C0C0FF | #9999FF | #8080FF | #6666FF | #4040FF | #3333FF | #0000FF |
| #CCCCE5 | #C0C0E0 | #9999CC | #8080C0 | #6666B2 | #4040A0 | #333399 | #000080 |
| #E5E5FF | #E0E0FF | #CCCCFF | #C0C0FF | #B2B2FF | #A0A0FF | #9999FF | #8080FF |
| #E5CCFF | #E0C0FF | #CC99FF | #C080FF | #B266FF | #A040FF | #9933FF | #8000FF |
| #E5CCE5 | #E0C0E0 | #CC99CC | #C080C0 | #B266B2 | #A040A0 | #993399 | #800080 |
| #FFCCFF | #FFC0FF | #FF99FF | #FF80FF | #FF66FF | #FF40FF | #FF33FF | #FF00FF |
| #FFE5FF | #FFE0FF | #FFCCFF | #FFC0FF | #FFB2FF | #FFA0FF | #FF99FF | #FF80FF |
| #FFCCE5 | #FFC0E0 | #FF99CC | #FF80C0 | #FF66B2 | #FF40A0 | #FF3399 | #FF0080 |
| #FFE5E5 | #FFE0E0 | #FFCCCC | #FFC0C0 | #FFB2B2 | #FFA0A0 | #FF9999 | #FF8080 |
| #E5CCCC | #E0C0C0 | #CC9999 | #C08080 | #B26666 | #A04040 | #993333 | #800000 |
| #E5E5CC | #E0E0C0 | #CCCC99 | #C0C080 | #B2B266 | #A0A040 | #999933 | #808000 |
| #E5E5E5 | #E0E0E0 | #CCCCCC | #C0C0C0 | #B2B2B2 | #A0A0A0 | #999999 | #808080 |
| #FF0000 | #CC0000 | #C00000 | #990000 | #800000 | #660000 | #400000 | #330000 |
| #FF8000 | #CC6600 | #C06000 | #994C00 | #804000 | #663300 | #402000 | #331900 |
| #FFFF00 | #CCCC00 | #C0C000 | #999900 | #808000 | #666600 | #404000 | #333300 |
| #FFFF80 | #CCCC66 | #C0C060 | #99994C | #808040 | #666633 | #404020 | #333319 |
| #80FF00 | #66CC00 | #60C000 | #4C9900 | #408000 | #336600 | #204000 | #193300 |
| #00FF00 | #00CC00 | #00C000 | #009900 | #008000 | #006600 | #004000 | #003300 |
| #80FF80 | #66CC66 | #60C060 | #4C994C | #408040 | #336633 | #204020 | #193319 |
| #008000 | #006600 | #006000 | #004C00 | #004000 | #003300 | #002000 | #001900 |
| #00FF80 | #00CC66 | #00C060 | #00994C | #008040 | #006633 | #004020 | #003319 |
| #00FFFF | #00CCCC | #00C0C0 | #009999 | #008080 | #006666 | #004040 | #003333 |
| #80FFFF | #66CCCC | #60C0C0 | #4C9999 | #408080 | #336666 | #204040 | #193333 |
| #008080 | #006666 | #006060 | #004C4C | #004040 | #003333 | #002020 | #001919 |
| #0080FF | #0066CC | #0060C0 | #004C99 | #004080 | #003366 | #002040 | #001933 |
| #0000FF | #0000CC | #0000C0 | #000099 | #000080 | #000066 | #000040 | #000033 |
| #000080 | #000066 | #000060 | #00004C | #000040 | #000033 | #000020 | #000019 |
| #8080FF | #6666CC | #6060C0 | #4C4C99 | #404080 | #333366 | #202040 | #191933 |
| #8000FF | #6600CC | #6000C0 | #4C0099 | #400080 | #330066 | #200040 | #190033 |
| #800080 | #660066 | #600060 | #4C004C | #400040 | #330033 | #200020 | #190019 |
| #FF00FF | #CC00CC | #C000C0 | #990099 | #800080 | #660066 | #400040 | #330033 |
| #FF80FF | #CC66CC | #C060C0 | #994C99 | #804080 | #663366 | #402040 | #331933 |
| #FF0080 | #CC0066 | #C00060 | #99004C | #800040 | #660033 | #400020 | #330019 |
| #FF8080 | #CC6666 | #C06060 | #994C4C | #804040 | #663333 | #402020 | #331919 |
| #800000 | #660000 | #600000 | #4C0000 | #400000 | #330000 | #200000 | #190000 |
| #808000 | #666600 | #606000 | #4C4C00 | #404000 | #333300 | #202000 | #191900 |
| #808080 | #666666 | #606060 | #4C4C4C | #404040 | #333333 | #202020 | #191919 |
Remove ads
網頁安全顏色
在20世紀90年代中期，很多顯示器只支持顯示256種顏色[11]，這些顏色由硬體決定或者可以被「顏色表」改變。如果顏色不可用，就必須使用不同的顏色，通常就是最近的顏色或者抖動。在諸如X11的系統上，顏色圖是在不同之間共享的，瀏覽器會分配一些小的顏色塊。在2000年左右，由於24位顏色的普及，256色的顯示銳減[12]，「網頁安全顏色」的實際使用減少。
「網頁安全」顏色並非全都擁有標準的名稱，但是每個顏色都可以以RGB十六進制的形式顯示，每個分量（紅、綠、藍）都會接收以下表中的6個值之一：
下面這個表顯示了所有的網頁安全顏色。
Remove ads
| *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* |
Remove ads
設計者會被鼓勵在網頁中使用這216個網頁最安全的顏色，216色顏色表開發時還有許多的8位顏色，只有22種顏色會被可靠地顯示而不需要重新映射。這22個顏色被稱為「真正安全的顏色」，包含一系列亮度的綠色、黃色和青色[13][14]
Remove ads
無障礙
一些網頁瀏覽器和設備不支持顏色，對於這些顯示，以及對於失明或者色盲的用於，依賴於顏色的網頁內容會難以顯示或者無法顯示。
顏色一般不應該被指定（而應該調用瀏覽器的默認顏色），或者背景和前景應該同時指定，例如純文本顏色、未訪問連結的顏色、已訪問連結的顏色等。這樣是為了避免在特定的背景上顯示與背景顏色非常相似顏色的文本[15]。
網頁內容無障礙指南要求文本的背景色與前景色具有一定的對比度，常規的文本對比度不小於4.5:1，大文本的對比度不小於3:1[16]。增強的無障礙需要對比度要超過7:1。但是，解決無障礙問題並非像增加對比度那樣簡單。根據網頁無障礙倡議的報告，失讀症的讀者最適合閱讀在最大值之下的對比度的文本[17]。
參見
參考文獻
外部連結
Wikiwand - on
Seamless Wikipedia browsing. On steroids.
Remove ads