整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML 颜色

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

颜色值

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

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

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

颜色值

颜色(Color)颜色十六进制(Color HEX)颜色RGB(Color RGB)
#000000rgb(0,0,0)
#FF0000rgb(255,0,0)
#00FF00rgb(0,255,0)
#0000FFrgb(0,0,255)
#FFFF00rgb(255,255,0)
#00FFFFrgb(0,255,255)
#FF00FFrgb(255,0,255)
#C0C0C0rgb(192,192,192)
#FFFFFFrgb(255,255,255)


1600万种不同颜色

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

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

Red LightColor HEXColor RGB
#000000 rgb(0,0,0)
#080000rgb(8,0,0)
#100000rgb(16,0,0)
#180000rgb(24,0,0)
#200000rgb(32,0,0)
#280000rgb(40,0,0)
#300000rgb(48,0,0)
#380000rgb(56,0,0)
#400000rgb(64,0,0)
#480000rgb(72,0,0)
#500000rgb(80,0,0)
#580000rgb(88,0,0)
#600000rgb(96,0,0)
#680000rgb(104,0,0)
#700000rgb(112,0,0)
#780000rgb(120,0,0)
#800000rgb(128,0,0)
#880000rgb(136,0,0)
#900000rgb(144,0,0)
#980000rgb(152,0,0)
#A00000rgb(160,0,0)
#A80000rgb(168,0,0)
#B00000rgb(176,0,0)
#B80000rgb(184,0,0)
#C00000rgb(192,0,0)
#C80000rgb(200,0,0)
#D00000rgb(208,0,0)
#D80000rgb(216,0,0)
#E00000rgb(224,0,0)
#E80000rgb(232,0,0)
#F00000rgb(240,0,0)
#F80000rgb(248,0,0)
#FF0000rgb(255,0,0)

灰暗色调

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

Gray ShadesColor HEXColor 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)

Web安全色?

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

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

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

0000000000330000660000990000CC0000FF
0033000033330033660033990033CC0033FF
0066000066330066660066990066CC0066FF
0099000099330099660099990099CC0099FF
00CC0000CC3300CC6600CC9900CCCC00CCFF
00FF0000FF3300FF6600FF9900FFCC00FFFF
3300003300333300663300993300CC3300FF
3333003333333333663333993333CC3333FF
3366003366333366663366993366CC3366FF
3399003399333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

果你是一个电子科技爱好者,或者对摄影和图像处理有所了解,一定不会对RGB这个词感到陌生。随着它出现频率越来越高,领域跨度变大,相信很多人都和小编一样对它开始好奇,于是小编决定花5分钟的时间来详细了解一下这三个字母背后的含义。

在电脑配件中,RGB(灯)作为一种外观的加成,通常指的是可以变色的光带,它可以出现在各种外设身上,鼠标,键盘,机箱甚至内存条上;到了显示设备,RBG带上了前缀,sRGB,AdobeRGB,ProPhoto RGB,ColorMatch RGB等,它摇身一变,含义换成了色域/色彩空间(color space),我们说一个显示器有超大的色域,那就意味着它能显示更多种类的色彩;而在计算机领域,当我们谈论RGB的时候,往往指的是一种色彩的表达方式,或者说是用数字来表示颜色的办法,这也是我们今天想聊的内容。

灯厂出品,必属精品 | Credit: Alienware

RGB颜色系统

我们一把RGB翻译过来,事情就变得简单明了了:R-Red(红色),G-Green(绿色),B-Blue(蓝色)。看到这,聪明的你一定恍然大悟,RGB就是用红、绿、蓝三色作为基色,把它们以不同比例“调配”,来得到各种颜色的方法!

在电脑里,想要用数字来表示RGB系统里的一种颜色,我们当然需要三个“坐标”:【红(0-255),绿(0-255),蓝(0-255)】,即色光三原色

从0到255(计算机里256=2^8,对应8个bit),三种基色,RGB颜色系统一共可以表示256*256*256=16777216种不同的颜色。由于16777216等于2的24次方,所以RGB系统产生的图像也被叫做24位图像

众所周知,红光+绿光+蓝光=白光。那么相应的,我们把红绿蓝三色全开(全为255),那么RGB(255,255,255)就是白色,纯红色则对应RGB(255,0,0),黄色对应的是RGB(255,255,0),而黑色为RGB(0,0,0)。当然这里隐含的意思就是,红绿蓝三种颜色都不出现(全为0)的时候,显示为黑色,这既符合没有光线时对应的黑暗,也符合各种显示屏的工作特点。

有时候,我们也会看到由6位符号构成的颜色表示方法,例如:FF007F,它同样对应了RGB中的紫色。但是FF007F与(127,0,255)之间到底有什么不可告人的关联呢?

由于RGB系统的基石是三原色光,很自然地,我们将FF007F拆开成3份试一试,FF-00-7F。聪明的你应该已经猜测到,这每一份分明就是对应的一个数值哇!

如果你对十六进制数有所耳闻,那么大可以自己尝试去换算,你会发现“FF”对应的是蓝色的255,“00”对应绿色的0,而“7F”在十六进制中正好等于127。

PS:编程语言里,在前面加上#,电脑就能知道我们想要的颜色了。

“#0000FF”“给我大红!”

CMYK颜色系统

面对CMYK系统,我们还是使用一样的套路:C-Cyan(青色),M-Magenta(品红),Y-Yellow(黄色),K-Black(黑色)。

印刷三原色与色光三原色的联系

青色,品红和黄色又称为印刷三原色,用于印刷打印。和色光主动发出光线,颜色相互叠加(加色法)相反,印刷品显示出的颜色来自于反射光,经过油墨吸收后剩下的光被人眼看到,是一种减色法

虽然说基色无法通过混合得到,但前提是,混合遵循的是同一种法则,加色法与减色法属于不同的两种法则,自然可以打破这个限制。

减色法中两种基色相混合可以得到加色法中的基色,反之亦然。瞧瞧上图吧,品红与青色在减色法里居然得到了蓝色!这在加色法中是不可能的事情,因为蓝色是三原色中的一员。

根据减色法的原理,青色、品红和黄色按1:1:1印刷时,理论上所有颜色的光都会被吸收,从而显示出黑色。但是实际情况下,我们制作的油墨不能达到理论的纯度,比例也没法做到完美,所以这样调配出的往往是奇怪的深屎黑色。

奈何印刷中用得最多的就是黑色,为了解决黑色的打印问题,我们在印刷三原色的基础上增加了K-Black,专门负责黑色相关的打印。取单词的末尾字母K是为了防止与蓝色的B混淆。这样一来,黑白打印就只需要调整K的值了(调整灰度),CMY的值全都为0。

所以下一次给彩色打印机上墨盒的时候,如果有人好奇为什么要3个彩色加1个黑色,我们可以自信的回答,当然是因为CMYK呀!

依次是RGB CMYK 灰度 黑白的牛油果

其他颜色系统

除开RGB和CMYK,还有一种常见的颜色系统——色相环(HSB)系统

色相环

此色相非彼色相,搞颜色一定要有证据。色相环是一个渐变色的圆环,0°,120°和240°的地方分别对应了绿三种颜色,其他角度则是中间的过度色相。所谓色相(Hue),就是区分各类颜色的基本特征,除了黑白灰之外,所有颜色都有色相这一属性。

选定了色相H,我们再来看SB吧(= =)。S-Saturation,即饱和度,可以理解成颜色的鲜艳程度或者纯度;B-Brightness,明度,顾名思义就是指颜色的明暗程度。色相,饱和度和明度共同构成了色彩的三大要素,所以我们可以用HSB系统来确定颜色。

色相,饱和度,明度在色彩里形象的表达

例如红色表示为HSB(0,100,100),紫色则是HSB(276,46,52)。

顺带一提,以上涉及的都是颜色系统,或者叫色彩模型(color model),是用数学办法来拆分、表示色彩的手段,主要目的是为了把颜色数字化,从而更好地服务于计算机编程。至于色域中的RGB,下次有机会小编再和大家聊吧~

多样的颜色系统

参考资料:

http://www.soomal.com/doc/10100002110.htm

http://katharinethayer.com/html/RGBseps.html

https://107cine.com/stream/99733/

https://zhuanlan.zhihu.com/p/19652492

来源:牛油果进化论

编辑:重光

近期热门文章Top10

↓ 点击标题即可查看 ↓

1. 首届黑洞PS大赛来袭!为了这张「高糊」的图,中国科学家做出了啥贡献?

2. 物理学四大神兽,除了“薛定谔的猫”还有谁?

3. 地下多大的金矿才能影响到单摆实验?| No.149

4. 为什么用木棍打衣服就可以洗干净衣服?| No.150

5. 为了替你出气,我们给讨厌的杨柳絮来个「以暴制暴」

6. 玩扫雷还有什么技巧?科学家的玩游戏方法你绝对想不到

7. 在我国,没有任何一张地图能告诉你你的真实位置

8. 在客户鱼嘴里提供服务的小清洁虾、清洁鱼,是怎么知道自己不会被吃掉的呢?

9. 你以为土拨鼠只会尖叫?其实它可能正在骂你

10. 你知道为了测博尔特的速度,我们有多努力嘛?

tml代码里,表示颜色一般用两种方法,一种是直接写出颜色的英文,另一种是前面写个“#”后面再写6个数字字母。

先说第一种表示方法,这个很简单,如果要表示黑色直接就是black,红色就red,蓝色就blue。具体的我们看下面图1,图2

图1

图2

现在来说第二种,这也是我们这个文章要重点说的,因为这个也是最经常用的表示方法,很多人看到这个又是字数又是字母的就糊涂了,今天我们来详细的把它讲清楚。先用图片来说明一下,先看下面图3

图3

图3里的#000000表示的是黑色,#ff0000表示红色,#00ff00表示绿色,所以说这个效果是和图1一样的。那要怎么理解这种表示颜色的方法呢,我们再来列出几个颜色和它的表示法:

红色:#ff0000,绿色:#00ff00,蓝色:#0000ff, 大家仔细看一下就可发现,这个和我们平常说的RGB格式来表示颜色是一样的,相当于红绿蓝三个光,而f是十六进制中的0,1,2,.....e,f中的f了 。f是里面的最大值了,ff代表该颜色光的值达到最大,所以#ff0000是红色,#880000表示的也是红色,只是没有#ff0000这个那么红了。其他的也是同理。所以#000000代表三个颜色光的值都为0,没有任何光了,那就是黑色了,相反#ffffff代表三个颜色光的值都达到最大,混合在一起就成白色。我们也知道红光和蓝光混在一起是紫色的,所以#ff00ff表示的是紫色,同样#ffff00表示的是黄色。讲到这里相信大家应该都明白了怎样用这种方法表示颜色了吧,如果要表示一种颜色,只要把相应的值增加或减小或者添加另一个颜色,这样就可以得到千千万万种颜色了。

这两种表示颜色的方法都讲完了,尤其是第二种方法,大部分情况都是用这种方法来表示html里面的颜色的。如果大家有什么更好的更容易理解的想法,可以点击关注【点点有你】一起来讨论一下哦

最后,如果您觉得我写的这些文章对您有帮助的话,您可以根据您的情况随意给点赏金,我相信一分也是爱也是支持,下面两图是我的支付宝和微信收款码。当然写文章不是一定要让您给赏金的,有您的支持和赞助,我会有更多动力来写文章和大家分享的,再次感谢您的支持和理解!