网页颜色
此條目需要更新。 (2022年4月24日) |
此條目需要补充更多来源。 (2022年4月24日) |
网页颜色是設計網頁时表示各种颜色的方法。颜色可以用三组十六进制数字表示,部分常用颜色或和上下文相关的内容也可以用英语名称的“关键字”来表示。此外还有直接使用多组十进制表示的方法。
十六进制数字表示方法编辑
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=1677萬7216种。[1]
CSS颜色模块第四版引入了#RRGGBBAA和#RGBA的表示方式。
十进制“函数”表示编辑
CSS2.1开始有rgb(red,green,blue)
的十进制颜色代码。
CSS3开始有RGBA和HSLA表示法,可表示透明色:[1]
rgba(255,0,0,0.5)
:半透明红色。hsla(120,100%,50%,0.3)
:半透明(0.3)绿色。
颜色名称编辑
HTML4.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用户接受。
|
|
|
網頁安全颜色编辑
此條目可参照英語維基百科相應條目来扩充。 (2015年9月5日) |
开发網頁安全颜色(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) |
基本16色编辑
基本16色或标准16色(Basic 16 Colors)是指在HTML直接指定其英语名就可以显示出来的16色。
- 上方:指定的颜色名或RGB值(16进制)
- 下方:指定字符的显示效果。
名称 | 英语 | 颜色 | 色光 | 色料 | 色相 | 十六进制码 | MS-DOS | |||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
R | G | B | C | M | Y | K | 角度 | 飽和 | 明度 | |||||
红色 | Red | 255 | 0 | 0 | 0 | 100 | 100 | 0 | 0° | 100% | 100% | #FF0000 | 12 | |
黄色 | Yellow | 255 | 255 | 0 | 0 | 0 | 100 | 0 | 60° | 100% | 100% | #FFFF00 | 14 | |
草綠色 | Lime | 0 | 255 | 0 | 100 | 0 | 100 | 0 | 120° | 100% | 100% | #00FF00 | 10 | |
青色 | Aqua | 0 | 255 | 255 | 100 | 0 | 0 | 0 | 180° | 100% | 100% | #00FFFF | 11 | |
藍色 | Blue | 0 | 0 | 255 | 100 | 100 | 0 | 0 | 240° | 100% | 100% | #0000FF | 9 | |
品紅色 | Fuchsia | 255 | 0 | 255 | 0 | 100 | 0 | 0 | 300° | 100% | 100% | #FF00FF | 13 | |
栗色 | Maroon | 128 | 0 | 0 | 0 | 100 | 100 | 50 | 0° | 100% | 50% | #800000 | 4 | |
橄榄绿 | Olive | 128 | 128 | 0 | 0 | 0 | 100 | 50 | 60° | 100% | 50% | #808000 | 6 | |
綠色 | Green | 0 | 128 | 0 | 100 | 0 | 100 | 50 | 120° | 100% | 50% | #008000 | 2 | |
藍綠色 | Teal | 0 | 128 | 128 | 100 | 0 | 0 | 50 | 180° | 100% | 50% | #008080 | 3 | |
藏青色 | Navy | 0 | 0 | 128 | 100 | 100 | 0 | 50 | 240° | 100% | 50% | #000080 | 1 | |
紫色 | Purple | 128 | 0 | 128 | 0 | 100 | 0 | 50 | 300° | 100% | 50% | #800080 | 5 | |
白色 | White | 255 | 255 | 255 | 0 | 0 | 0 | 0 | 0° | 0% | 100% | #FFFFFF | 15 | |
銀色 | Silver | 192 | 192 | 192 | 0 | 0 | 0 | 25 | 0° | 0% | 75% | #C0C0C0 | 7 | |
灰色 | Gray | 128 | 128 | 128 | 0 | 0 | 0 | 50 | 0° | 0% | 50% | #808080 | 8 | |
黑色 | Black | 0 | 0 | 0 | 0 | 0 | 0 | 100 | 0° | 0% | 0% | #000000 | 0 |
渐变色编辑
CSS3引入了渐变色,分为线性渐变(如linear-gradient(#D1EEFC, #81F3FD);
)和圆心渐变(如radial-gradient(#FEFD58, #71FCA6, #52EDC7);
)两种。线性渐变可设定方向,圆心渐变可设定形状。[1]
参考文献编辑
- ^ 1.0 1.1 1.2 <color>. Web Technology For Developers: CSS. MDN. [2016-08-16]. (原始内容存档于2017-07-05).
- ^ Trezy. Honoring a great man. [2016-08-26]. (原始内容存档于2016-08-27).
- ^ Pemberton, Steven; Pettit, Brad. Çelik, Tantek; Lilley, Chris; Baron, L. David , 编. 4.3. Extended color keywords. CSS Color Module Level 3. W3C. 7 June 2011 [19 March 2013]. (原始内容存档于2017-11-29).
- ^ W3C TR SVG 1.0, recognized color keyword names. W3.org. 16 August 2011 [1 Feb 2019]. (原始内容存档于2022-12-02).
- ^ 基本色:CSS2.01颜色名称相容於標準VGA十六色但名稱有些不同
- ^ 最安全色:ウェブカラー#Reallysafe palette,Web colors#Safest web colors, Death of the Websafe Color Palette?, Physics.ohio-state.edu, 8 July 2013
参見编辑
外部链接编辑
- MDN上的CSS颜色参考 (页面存档备份,存于互联网档案馆)
- kuler (页面存档备份,存于互联网档案馆)
- 网页颜色参考
- 网页安全调色板的末日, David Lehn和Hadley Stern写的一篇论文
- 安全颜色的一种排列
- 前景颜色表 (页面存档备份,存于互联网档案馆)
- X11颜色表
- HTML颜色
- 十六进位制介绍
- 各种模式颜色
- HTML Color Spectrum Chart
- HTML颜色 (页面存档备份,存于互联网档案馆)
- HTML颜色代码 (页面存档备份,存于互联网档案馆)
- ws Color Scheme Generator 2 (页面存档备份,存于互联网档案馆)
- ColorBlender.com | Your free online color matching toolbox