HTML 颜色

HTML 颜色采用的是 RGB 颜色,是通过对红 (R)、绿 (G)、蓝 (B) 三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,RGB 即是代表红、绿、蓝三个通道的颜色。

颜色值

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。

这个表格给出了由三种颜色混合而成的具体效果:

颜色 颜色十六进制 (Color HEX) 颜色 RGB (Color RGB)
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#FFFF00 rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

每种颜色的最小值是 0(十六进制:#00)。最大值是 255(十六进制:#FF)。

颜色名

目前最新版本的浏览器都支持颜色名集合。

例如:AliceBlue,aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow……

如果需要使用其它的颜色,需要使用十六进制的颜色值。

1600万种不同颜色

三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。

在下面的颜色表中你会看到不同的结果,从0到255的红色,同时设置绿色和蓝色的值为0,随着红色的值变化,不同的值都显示了不同的颜色。

Red Light Color HEX Color RGB
#000000 rgb(0,0,0)
#080000 rgb(8,0,0)
#100000 rgb(16,0,0)
#180000 rgb(24,0,0)
#200000 rgb(32,0,0)
#280000 rgb(40,0,0)
#300000 rgb(48,0,0)
#380000 rgb(56,0,0)
#400000 rgb(64,0,0)
#480000 rgb(72,0,0)
#500000 rgb(80,0,0)
#580000 rgb(88,0,0)
#600000 rgb(96,0,0)
#680000 rgb(104,0,0)
#700000 rgb(112,0,0)
#780000 rgb(120,0,0)
#800000 rgb(128,0,0)
#880000 rgb(136,0,0)
#900000 rgb(144,0,0)
#980000 rgb(152,0,0)
#A00000 rgb(160,0,0)
#A80000 rgb(168,0,0)
#B00000 rgb(176,0,0)
#B80000 rgb(184,0,0)
#C00000 rgb(192,0,0)
#C80000 rgb(200,0,0)
#D00000 rgb(208,0,0)
#D80000 rgb(216,0,0)
#E00000 rgb(224,0,0)
#E80000 rgb(232,0,0)
#F00000 rgb(240,0,0)
#F80000 rgb(248,0,0)
#FF0000 rgb(255,0,0)

Web安全色?

数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。

我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。

最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

Gray Shades Color HEX Color RGB
#000000rgb(0,0,0)
#080808rgb(8,8,8)
#101010rgb(16,16,16)
#181818rgb(24,24,24)
#202020rgb(32,32,32)
#282828rgb(40,40,40)
#303030rgb(48,48,48)
#383838rgb(56,56,56)
#404040rgb(64,64,64)
#484848rgb(72,72,72)
#505050rgb(80,80,80)
#585858rgb(88,88,88)
#606060rgb(96,96,96)
#686868rgb(104,104,104)
#707070rgb(112,112,112)
#787878rgb(120,120,120)
#808080rgb(128,128,128)
#888888rgb(136,136,136)
#909090rgb(144,144,144)
#989898rgb(152,152,152)
#A0A0A0rgb(160,160,160)
#A8A8A8rgb(168,168,168)
#B0B0B0rgb(176,176,176)
#B8B8B8rgb(184,184,184)
#C0C0C0rgb(192,192,192)
#C8C8C8rgb(200,200,200)
#D0D0D0rgb(208,208,208)
#D8D8D8rgb(216,216,216)
#E0E0E0rgb(224,224,224)
#E8E8E8rgb(232,232,232)
#F0F0F0rgb(240,240,240)
#F8F8F8rgb(248,248,248)
#FFFFFFrgb(255,255,255)

灰暗色调

以下展示了黑色到灰色的渐变

000000 000033 0000660000990000CC0000FF
003300 003333 0033660033990033CC0033FF
006600 006633 0066660066990066CC0066FF
009900 009933 0099660099990099CC0099FF
00CC00 00CC33 00CC6600CC9900CCCC00CCFF
00FF00 00FF33 00FF6600FF9900FFCC00FFFF
330000 330033 3300663300993300CC3300FF
333300 333333 3333663333993333CC3333FF
336600 336633 3366663366993366CC3366FF
339900 339933 3399663399993399CC3399FF
33CC00 33CC33 33CC6633CC9933CCCC33CCFF
33FF00 33FF33 33FF6633FF9933FFCC33FFFF
660000 660033 6600666600996600CC6600FF
663300 663333 6633666633996633CC6633FF
666600 666633 6666666666996666CC6666FF
669900 669933 6699666699996699CC6699FF
66CC00 66CC33 66CC6666CC9966CCCC66CCFF
66FF00 66FF33 66FF6666FF9966FFCC66FFFF
990000 990033 9900669900999900CC9900FF
993300 993333 9933669933999933CC9933FF
996600 996633 9966669966999966CC9966FF
999900 999933 9999669999999999CC9999FF
99CC00 99CC33 99CC6699CC9999CCCC99CCFF
99FF00 99FF33 99FF6699FF9999FFCC99FFFF
CC0000 CC0033 CC0066CC0099CC00CCCC00FF
CC3300 CC3333 CC3366CC3399CC33CCCC33FF
CC6600 CC6633 CC6666CC6699CC66CCCC66FF
CC9900 CC9933 CC9966CC9999CC99CCCC99FF
CCCC00 CCCC33 CCCC66CCCC99CCCCCCCCCCFF
CCFF00 CCFF33 CCFF66CCFF99CCFFCCCCFFFF
FF0000 FF0033 FF0066FF0099FF00CCFF00FF
FF3300 FF3333 FF3366FF3399FF33CCFF33FF
FF6600 FF6633 FF6666FF6699FF66CCFF66FF
FF9900 FF9933 FF9966FF9999FF99CCFF99FF
FFCC00 FFCC33 FFCC66FFCC99FFCCCCFFCCFF
FFFF00 FFFF33 FFFF66FFFF99FFFFCCFFFFFF

HTML 常用颜色代码表

#000000#2F0000#600030#460046#28004D
#272727#4D0000#820041#5E005E#3A006F
#3C3C3C#600000#9F0050#750075#4B0091
#4F4F4F#750000#BF0060#930093#5B00AE
#5B5B5B#930000#D9006C#AE00AE#6F00D2
#6C6C6C#AE0000#F00078#D200D2#8600FF
#7B7B7B#CE0000#FF0080#E800E8#921AFF
#8E8E8E#EA0000#FF359A#FF00FF#9F35FF
#9D9D9D#FF0000#FF60AF#FF44FF#B15BFF
#ADADAD#FF2D2D#FF79BC#FF77FF#BE77FF
#BEBEBE#FF5151#FF95CA#FF8EFF#CA8EFF
#d0d0d0#ff7575#ffaad5#ffa6ff#d3a4ff
#E0E0E0#FF9797#FFC1E0#FFBFFF#DCB5FF
#F0F0F0#FFB5B5#FFD9EC#FFD0FF#E6CAFF
#FCFCFC#FFD2D2#FFECF5#FFE6FF#F1E1FF
#FFFFFF#FFECEC#FFF7FB#FFF7FF#FAF4FF
#000079#000079#003E3E#006030#006000
#000093#003D79#005757#01814A#007500
#0000C6#004B97#007979#019858#009100
#0000C6#005AB5#009393#01B468#00A600
#0000E3#0066CC#00AEAE#02C874#00BB00
#2828FF#0072E3#00CACA#02DF82#00DB00
#4A4AFF#0080FF#00E3E3#02F78E#00EC00
#6A6AFF#2894FF#00FFFF#1AFD9C#28FF28
#7D7DFF#46A3FF#4DFFFF#4EFEB3#53FF53
#9393FF#66B3FF#80FFFF#7AFEC6#79FF79
#AAAAFF#84C1FF#A6FFFF#96FED1#93FF93
#B9B9FF#97CBFF#BBFFFF#ADFEDC#A6FFA6
#CECEFF#ACD6FF#CAFFFF#C1FFE4#BBFFBB
#DDDDFF#C4E1FF#D9FFFF#D7FFEE#CEFFCE
#ECECFF#D2E9FF#ECFFFF#E8FFF5#DFFFDF
#FBFBFF#ECF5FF#FDFFFF#FBFFFD#F0FFF0
#467500#424200#5B4B00#844200#642100
#548C00#5B5B00#796400#9F5000#842B00
#64A600#737300#977C00#BB5E00#A23400
#73BF00#8C8C00#AE8F00#D26900#BB3D00
#82D900#A6A600#C6A300#EA7500#D94600
#8CEA00#C4C400#D9B300#FF8000#F75000
#9AFF02#E1E100#EAC100#FF9224#FF5809
#A8FF24#F9F900#FFD306#FFA042#FF8040
#B7FF4A#FFFF37#FFDC35#FFAF60#FF8F59
#C2FF68#FFFF6F#FFE153#FFBB77#FF9D6F
#CCFF80#FFFF93#FFE66F#FFC78E#FFAD86
#D3FF93#FFFFAA#FFED97#FFD1A4#FFBD9D
#DEFFAC#FFFFB9#FFF0AC#FFDCB9#FFCBB3
#E8FFC4#FFFFCE#FFF4C1#FFE4CA#FFDAC8
#EFFFD7#FFFFDF#FFF8D7#FFEEDD#FFE6D9
#F5FFE8#FFFFF4#FFFCEC#FFFAF4#FFF3EE
#613030#616130#336666#484891#6C3365
#743A3A#707038#3D7878#5151A2#7E3D76
#804040#808040#408080#5A5AAD#8F4586
#984B4B#949449#4F9D9D#7373B9#9F4D95
#AD5A5A#A5A552#5CADAD#8080C0#AE57A4
#B87070#AFAF61#6FB7B7#9999CC#B766AD
#C48888#B9B973#81C0C0#A6A6D2#C07AB8
#CF9E9E#C2C287#95CACA#B8B8DC#CA8EC2
#D9B3B3#CDCD9A#A3D1D1#C7C7E2#D2A2CC
#E1C4C4#D6D6AD#B3D9D9#D8D8EB#DAB1D5
#EBD6D6#DEDEBE#C4E1E1#E6E6F2#E2C2DE
#F2E6E6#E8E8D0#D1E9E9#F3F3FA#EBD3E8
关注本站微信公众号