HTML颜色的表示

HTML 颜色由红色、绿色、蓝色混合而成。

HTML颜色可以通过颜色值或者颜色RGB或者颜色名来引用。

sublime text3自带取色器可以用,右键 > insert color with color picker就可以从color picker取色了。

颜色值

HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。

十六进制值的写法为#号后跟三个或六个十六进制字符。三位数表示法为:#RGB,转换为6位数表示为:#RRGGBB。

颜色

3位十六进制颜色值

6位十六进制颜色值

RGB

 

#000

#000000

rgb(0,0,0)

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



颜色(Color)

颜色十六进制(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)

 

#00FFFF

rgb(0,255,255)

 

#FF00FF

rgb(255,0,255)

 

#C0C0C0

rgb(192,192,192)

 

#FFFFFF

rgb(255,255,255)

颜色RGB:透明度


相对于使用rgb(255,255,0),使用rgba(255,255,0,0.5)可以实现设置颜色透明度的功能,这里的0.5表示透明度,范围0~1。


<p style="background-color:rgba(255,255,0,0.25)">
通过 rbg 值设置背景颜色


颜色名

141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值。目前所有浏览器都支持以下颜色名。

html5 颜色值 html中颜色_html

: 17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。点击其中一个颜色名称(或一个十六进制值)就可以查看与不同文字颜色搭配的背景颜色。




不同颜色的展示

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)

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

Gray Shades

Color HEX

Color RGB

 

#000000 

rgb(0,0,0) 

 

#080808 

rgb(8,8,8) 

 

#101010 

rgb(16,16,16) 

 

#181818 

rgb(24,24,24) 

 

#202020 

rgb(32,32,32) 

 

#282828 

rgb(40,40,40) 

 

#303030 

rgb(48,48,48) 

 

#383838 

rgb(56,56,56) 

 

#404040 

rgb(64,64,64) 

 

#484848 

rgb(72,72,72) 

 

#505050 

rgb(80,80,80) 

 

#585858 

rgb(88,88,88) 

 

#606060 

rgb(96,96,96) 

 

#686868 

rgb(104,104,104) 

 

#707070 

rgb(112,112,112) 

 

#787878 

rgb(120,120,120) 

 

#808080 

rgb(128,128,128) 

 

#888888 

rgb(136,136,136) 

 

#909090 

rgb(144,144,144) 

 

#989898 

rgb(152,152,152) 

 

#A0A0A0 

rgb(160,160,160) 

 

#A8A8A8 

rgb(168,168,168) 

 

#B0B0B0 

rgb(176,176,176) 

 

#B8B8B8 

rgb(184,184,184) 

 

#C0C0C0 

rgb(192,192,192) 

 

#C8C8C8 

rgb(200,200,200) 

 

#D0D0D0 

rgb(208,208,208) 

 

#D8D8D8 

rgb(216,216,216) 

 

#E0E0E0 

rgb(224,224,224) 

 

#E8E8E8 

rgb(232,232,232) 

 

#F0F0F0 

rgb(240,240,240) 

 

#F8F8F8 

rgb(248,248,248) 

 

#FFFFFF 

rgb(255,255,255)

按颜色名排序

按十六进制的值排序

单击一个颜色名或者 16 进制值,就可以查看与不同文字颜色搭配的背景颜色。

Color Name

HEX

Color

AliceBlue 

#F0F8FF

 

AntiqueWhite 

#FAEBD7

 

Aqua 

#00FFFF

 

Aquamarine 

#7FFFD4

 

Azure 

#F0FFFF

 

Beige 

#F5F5DC

 

Bisque 

#FFE4C4

 

Black 

#000000

 

BlanchedAlmond 

#FFEBCD

 

Blue 

#0000FF

 

BlueViolet 

#8A2BE2

 

Brown 

#A52A2A

 

BurlyWood 

#DEB887

 

CadetBlue 

#5F9EA0

 

Chartreuse 

#7FFF00

 

Chocolate 

#D2691E

 

Coral 

#FF7F50

 

CornflowerBlue 

#6495ED

 

Cornsilk 

#FFF8DC

 

Crimson 

#DC143C

 

Cyan 

#00FFFF

 

DarkBlue 

#00008B

 

DarkCyan 

#008B8B

 

DarkGoldenRod 

#B8860B

 

DarkGray 

#A9A9A9

 

DarkGreen 

#006400

 

DarkKhaki 

#BDB76B

 

DarkMagenta 

#8B008B

 

DarkOliveGreen 

#556B2F

 

DarkOrange 

#FF8C00

 

DarkOrchid 

#9932CC

 

DarkRed 

#8B0000

 

DarkSalmon 

#E9967A

 

DarkSeaGreen 

#8FBC8F

 

DarkSlateBlue 

#483D8B

 

DarkSlateGray 

#2F4F4F

 

DarkTurquoise 

#00CED1

 

DarkViolet 

#9400D3

 

DeepPink 

#FF1493

 

DeepSkyBlue 

#00BFFF

 

DimGray 

#696969

 

DodgerBlue 

#1E90FF

 

FireBrick 

#B22222

 

FloralWhite 

#FFFAF0

 

ForestGreen 

#228B22

 

Fuchsia 

#FF00FF

 

Gainsboro 

#DCDCDC

 

GhostWhite 

#F8F8FF

 

Gold 

#FFD700

 

GoldenRod 

#DAA520

 

Gray 

#808080

 

Green 

#008000

 

GreenYellow 

#ADFF2F

 

HoneyDew 

#F0FFF0

 

HotPink 

#FF69B4

 

IndianRed  

#CD5C5C

 

Indigo  

#4B0082

 

Ivory 

#FFFFF0

 

Khaki 

#F0E68C

 

Lavender 

#E6E6FA

 

LavenderBlush 

#FFF0F5

 

LawnGreen 

#7CFC00

 

LemonChiffon 

#FFFACD

 

LightBlue 

#ADD8E6

 

LightCoral 

#F08080

 

LightCyan 

#E0FFFF

 

LightGoldenRodYellow 

#FAFAD2

 

LightGray 

#D3D3D3

 

LightGreen 

#90EE90

 

LightPink 

#FFB6C1

 

LightSalmon 

#FFA07A

 

LightSeaGreen 

#20B2AA

 

LightSkyBlue 

#87CEFA

 

LightSlateGray 

#778899

 

LightSteelBlue 

#B0C4DE

 

LightYellow 

#FFFFE0

 

Lime 

#00FF00

 

LimeGreen 

#32CD32

 

Linen 

#FAF0E6

 

Magenta 

#FF00FF

 

Maroon 

#800000

 

MediumAquaMarine 

#66CDAA

 

MediumBlue 

#0000CD

 

MediumOrchid 

#BA55D3

 

MediumPurple 

#9370DB

 

MediumSeaGreen 

#3CB371

 

MediumSlateBlue 

#7B68EE

 

MediumSpringGreen 

#00FA9A

 

MediumTurquoise 

#48D1CC

 

MediumVioletRed 

#C71585

 

MidnightBlue 

#191970

 

MintCream 

#F5FFFA

 

MistyRose 

#FFE4E1

 

Moccasin 

#FFE4B5

 

NavajoWhite 

#FFDEAD

 

Navy 

#000080

 

OldLace 

#FDF5E6

 

Olive 

#808000

 

OliveDrab 

#6B8E23

 

Orange 

#FFA500

 

OrangeRed 

#FF4500

 

Orchid 

#DA70D6

 

PaleGoldenRod 

#EEE8AA

 

PaleGreen 

#98FB98

 

PaleTurquoise 

#AFEEEE

 

PaleVioletRed 

#DB7093

 

PapayaWhip 

#FFEFD5

 

PeachPuff 

#FFDAB9

 

Peru 

#CD853F

 

Pink 

#FFC0CB

 

Plum 

#DDA0DD

 

PowderBlue 

#B0E0E6

 

Purple 

#800080

 

Red 

#FF0000

 

RosyBrown 

#BC8F8F

 

RoyalBlue 

#4169E1

 

SaddleBrown 

#8B4513

 

Salmon 

#FA8072

 

SandyBrown 

#F4A460

 

SeaGreen 

#2E8B57

 

SeaShell 

#FFF5EE

 

Sienna 

#A0522D

 

Silver 

#C0C0C0

 

SkyBlue 

#87CEEB

 

SlateBlue 

#6A5ACD

 

SlateGray 

#708090

 

Snow 

#FFFAFA

 

SpringGreen 

#00FF7F

 

SteelBlue 

#4682B4

 

Tan 

#D2B48C

 

Teal 

#008080

 

Thistle 

#D8BFD8

 

Tomato 

#FF6347

 

Turquoise 

#40E0D0

 

Violet 

#EE82EE

 

Wheat 

#F5DEB3

 

White 

#FFFFFF

 

WhiteSmoke 

#F5F5F5

 

Yellow 

#FFFF00

 

YellowGreen 

#9ACD32

 

Web安全色?

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

我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。