圖書館:网页颜色
{{Update|time=2022-04-24}}
{{Refimprove|time=2022-04-24}}
{{HTML}} 網頁顏色是在全球資訊網上設計網頁時,表示各種顏色的方法。顏色可以用三組十六進制數字表示,部分常用顏色或和上下文相關的內容也可以用英語名稱的「關鍵字」來表示。此外還有直接使用多組十進制表示的方法。
十六進制數字表示方法
在HTML和CSS中使用3位元組共6個十六進制數字表示一種顏色,每位元組從00到FF,相當十進位數字從0到255,按順序前兩位是紅色的值,中間兩位是綠色的值,最後兩位是藍色的值。
由於網頁是基於計算機瀏覽器開發的媒體,所以顏色以光學顏色RGB(紅、綠、藍)為主。
網頁顏色是以16進制代碼表示,一般以「#」號開頭,後面分別為R、G、B的16位進制數。
FF為最大數,代表十進制255。比如白色是R、G、B三個顏色最大,在網頁代碼便是:#FFFFFF。黑色是三個顏色為0,在網頁代碼便是:#000000。當顏色代碼為#XXYYZZ時,可以用#XYZ表示,如#135與#113355表示同樣的顏色。在CSS中,也可以使用rgb(127,127,127)
代替#7F7F7F(十進制表示)。
例如一種顏色在十進位中紅、綠、藍的比例分別是36、104、160(■),在十六進位制中則分別為24、68、A0,所以十六進位制數字表示方法就為:2468A0,如果數字小於16,在十六進位中就會小於10,前面就要加0,如在十進位中分別為0、1、2,在十六進位制數字表示方法中就為:000102,所以可以表示的顏色數總共有:2563 = 16,777,216 種。[1]
CSS顏色模塊第四版引入了#RRGGBBAA和#RGBA的表示方式。
十進制「函數」表示
從CSS 2.1開始,提供有rgb(red,green,blue)
的十進制顏色代碼。
從CSS 3開始,網頁顏色支持RGBA和HSLA顏色表示法:
{{Font|color=rgba(255,0,0,0.5)|rgba(255,0,0,0.5)}}
- 半透明的紅色。{{Font|color=hsla(120,100%,25%,0.3)|hsla(120,100%,50%,0.3)}}
- 半透明 (0.3) 的綠色。
這樣的語法提供了使用透明色的可能性。[1]
顏色名稱
{{更多信息|顏色列表}} 在HTML 4.01版本中,確定了16種顏色的英語名稱與16進制代碼:
中文 | 英文 | 代碼&顏色 | 中文 | 英文 | 代碼&顏色 | 中文 | 英文 | 代碼&顏色 | 中文 | 英文 | 代碼&顏色 |
---|---|---|---|---|---|---|---|---|---|---|---|
黑色 | black | #000000 | 銀色 | silver | #c0c0c0 | 栗色 | maroon | #800000 | 紅色 | red | #ff0000 |
藏青色 | navy | #000080 | 藍色 | blue | #0000ff | 紫色 | purple | #800080 | 品紅色 | fuchsia | #ff00ff |
綠色 | green | #008000 | 草綠色 | lime | #00ff00 | 橄欖綠 | olive | #808000 | 黃色 | yellow | #ffff00 |
藍綠色 | teal | #008080 | 青色 | aqua | #00ffff | 灰色 | gray | #808080 | 白色 | white | #ffffff |
後來加入的名稱如下所列:
CSS 顏色模塊版本 | 中文 | 英文 | 代碼&顏色 | 註釋 |
---|---|---|---|---|
2.1 | 橙色 | orange | #ffa500 | |
3 | 透明 | transparent | #00000000 | 此處的RGBA十六進制值只適用於CSS顏色模塊版本4。 |
4 | 麗貝卡紫 | rebeccapurple | #663399 | 用來悼念埃里克·邁耶的女兒。[2] |
除此之外,CSS3(CSS顏色模塊版本3)接納了絕大部分X11顏色(或稱SVG顏色)。
X11名稱
網景導航者和Internet Explorer又增加了一些顏色的名稱,是由X窗口系統制定的。這包括常用同義詞:aqua(HTML4/CSS 1.0 標準名稱)和 cyan(常用 sRGB 名稱)、洋紅色(magenta、常用 sRGB 名稱)和 品紅色(fuchsia、HTML4/CSS 1.0 標準名稱)、gray(HTML4/CSS 1.0 標準名稱)和grey。[3][4]SVG 1.0把這些顏色標準化,逐漸被大多數HTML用戶接受。
|
|
|
網頁安全顏色
{{Expand English|Web colors#Web-safe colors|date=2015-09-05}} 當開發網頁安全顏色(Web-safe colors)調色板時,大部分顯示方式是8位元的,只能顯示256種顏色。要顯示某種硬件預先定義的顏色以外的顏色,要麼使用最接近的顏色替代,要麼多用一些時間,通過抖動混合顏色顯示。
David Lehn和Hadley Stern發現在更換16位元顯示後,只有22種顏色是「真正安全」(really safe)的,可以不會在更換顯示後出現不協調的畸變。
下面列出所有網頁安全顏色,其中以粗體下劃線表示的為「真正安全」顏色:
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 |
網頁最安全顏色
0 | 3 | 6 | 9 | C | F | |
---|---|---|---|---|---|---|
00 | #000(Black) | #F00(Red) | ||||
03 | #003 | #F03 | ||||
0F | #00F(Blue) | #F0F(Fuchsia) | ||||
F0 | #0F0(Lime) | #6F0 | #FF0(Yellow) | |||
F3 | #3F3 | #6F3 | #FF3 | |||
F6 | #0F6 | #3F6 | #CF6 | #FF6 | ||
FC | #0FC | #3FC | ||||
FF | #0FF(Aqua) | #3FF | #6FF | #FFF(White) |
8個括弧內的是「{{link-ja|HTML基本16色|カラーチャート#基本16色}}」的色名。[5][6]
基本16色
基本16色或標準16色(Basic 16 Colors)是指在HTML中直接指定顏色的英語名稱就可以顯示出來的16中顏色。
- 上方:指定的顏色名或RGB值(16進制)
- 下方:指定字符的顯示效果。
{{16color}}
漸變色
CSS3引入了漸變色,分為線性漸變(如linear-gradient(#D1EEFC, #81F3FD);
)和圓心漸變(如radial-gradient(#FEFD58, #71FCA6, #52EDC7);
)兩種。線性漸變支持方向設定,圓心漸變支持形狀設定。[1]
參考文獻
{{Reflist}}
參見
{{Portal box|互聯網|設計}} {{div col|2}}
{{div col end}}
外部連結
{{div col|2}}
- MDN上的CSS顏色參考 {{Wayback|url=https://developer.mozilla.org/en-US/docs/Web/CSS/color_value |date=20170705124141 }}
- kuler {{Wayback|url=http://kuler.adobe.com/ |date=20190324083929 }}
- 網頁顏色參考
- 網頁安全調色板的末日, David Lehn和Hadley Stern寫的一篇論文
- 安全顏色的一種排列
- 前景顏色表 {{Wayback|url=http://www.wackerart.de/rgbfarben.html |date=20050829161053 }}
- X11顏色表
- HTML顏色
- 十六進位制介紹
- 各種模式顏色
- HTML Color Spectrum Chart
- HTML顏色 {{Wayback|url=http://htmlcolors.com/ |date=20210128090822 }}
- HTML顏色代碼 {{Wayback|url=http://html-color-codes.info/chinese/ |date=20210119065209 }}
- ws Color Scheme Generator 2 {{Wayback|url=http://wellstyled.com/tools/colorscheme2/index-en.html |date=20210422001900 }}
- ColorBlender.com | Your free online color matching toolbox
{{div col end}} {{-}} {{網頁顏色}} {{顏色主題}}
Category:色彩空間 Category:網頁設計 Category:帶有代碼示例的條目
- ^ 1.0 1.1 1.2 {{Cite web |title=<color> |url=https://developer.mozilla.org/en-US/docs/Web/CSS/color_value |accessdate=2016-08-16 |work=Web Technology For Developers: CSS |publisher=MDN |archive-date=2017-07-05 |archive-url=https://web.archive.org/web/20170705124141/https://msdn.microsoft.com/en-us/library/aa358800(VS.85).aspx }}
- ^ {{Cite web |title=Honoring a great man |url=https://codepen.io/trezy/post/honoring-a-great-man |dead-url=yes |author1=Trezy |access-date=2016-08-26 |archive-url=https://web.archive.org/web/20160827014120/https://codepen.io/trezy/post/honoring-a-great-man |archive-date=2016-08-27}}
- ^ {{cite web |url=http://www.w3.org/TR/css3-color/#svg-color |publisher=W3C |work=CSS Color Module Level 3 |title=4.3. Extended color keywords |date=7 June 2011 |editor1-first=Tantek |editor1-last=Çelik |editor2-first=Chris |editor2-last=Lilley |editor3-first=L. David |editor3-last=Baron |first1=Steven |last1=Pemberton |first2=Brad |last2=Pettit |access-date=19 March 2013 |archive-date=2017-11-29 |archive-url=https://web.archive.org/web/20171129235005/http://www.w3.org/TR/css3-color/#svg-color |dead-url=no }}
- ^ {{cite web |url=https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#ColorKeywords |title=W3C TR SVG 1.0, recognized color keyword names |publisher=W3.org |date=16 August 2011 |access-date=1 Feb 2019 |archive-date=2022-12-02 |archive-url=https://web.archive.org/web/20221202181234/https://www.w3.org/TR/2011/REC-SVG11-20110816/types.html#ColorKeywords |dead-url=no }}
- ^ 基本色:CSS2.01顏色名稱相容於標準VGA十六色但名稱有些不同
- ^ 最安全色:{{link-ja|ウェブカラー#Reallysafe palette}},{{le|Web colors#Safest web colors}}, Death of the Websafe Color Palette?, Physics.ohio-state.edu, 8 July 2013