16进制颜色表示与RGB色彩模型——零基础自学网页制作

十六进制是什么?

16进制颜色表示与RGB色彩模型——零基础自学网页制作

说到"进制",大部分没有数学基础的小伙伴会比较陌生,如果您是计算机爱好者,也会对"二进制"耳熟能详。

如果想了解16进制,还需要从我们最常用的10进制说起。

16进制颜色表示与RGB色彩模型——零基础自学网页制作

10进制的意思,通俗来说就是数数到10就要向前进一位。比如9完了之后是10,11.....

如果这样看您还是不知所云,请看下面讲解。

假如我们使用一个计数器计数,这个计数器只显示两位数,显示在屏幕上是00

从1开始,01,02,03,04,05,06,07,08,09,10

大家看明白没,个位数到9之后,个位变0,向前十位进1,之后就是10!这就是10进制!

16进制的规律和10进制大同小异。

不同的是,16进制到16才进1.

假如我们有一个神奇的计数器,它的个位和下一个进位的数字显示在()()两个括号中。

比如我们表示1的话就是(00)(01).

2至15到16就是(00)(02)......(00)(15),(01)(00)

那17怎么表示?如下

(01)(01)

大家明白了吗?第一个括号中的"1"就是16,就好像10进制中,"10"中的"1"是10一样的道理。

但是我们没有这样的计数器,我们显示数字都是0123这样显示,不会使用()来代表"个位、十位、百位......"的概念。

因此,数学家为了方便显示,对16进制9以后的数字约定好使用英文字母表示。

这样就变成了1、2、3、4、5、6、7、8、9、a、b、c、d、e、f

是不是很聪明!

10就是a

11就是b

以此类推

15就是f

下面请大家做两个思考题。

16进制下,"10"是10进制中的几呢?

答案是16

那ff是10进制中的几呢?

这就需要算一下了。

16进制转10进制的计算过程如下:

f=15

ff=15乘以16加上15

答案是255

那为什么使用16进制来表示颜色呢?因为16进制使用ff两个字母就能正好表示255!其他进制做不到这么简约!

因为"255"这个数字对屏幕显示颜色来说具有特殊的意义。

颜色如何表示

16进制颜色表示与RGB色彩模型——零基础自学网页制作

我是87年出生的,小时候流行一首叫做《七色光》的歌。

后来大概是初中的时候,学习毛主席诗句时读到了"赤橙黄绿蓝靛紫,谁持彩练当空舞"的诗句,这是描写彩虹的诗句。

初中物理课上,学到光可以被棱镜分解出不同的颜色。

由此可知,光与色彩有着密不可分的关系。

颜色的种类是通过光波频率来区分的,这些频率之间是平滑过渡的,理论上,如果我们区分不同频率的"尺度"足够小,我们可以分解出无穷多的颜色。

16进制颜色表示与RGB色彩模型——零基础自学网页制作

那么问题就来了,我们确定多少种颜色合适呢?

实际上,眼睛能分辨出的颜色是有限的,人眼一共约能区分一千万种颜色,不过这只是一个估计,因为每个人眼的构造不同,每个人看到的颜色也少许不同(维基百科),只要常用的颜色种类比我们能分辨的种类多一些就可以了,这样,人工制作的图片在我们看起来也不会觉得和观看自然界景观有什么区别。

我们有了颜色种类大概的上限之后,如何让显示器来显示上万种颜色就又变成了难题。

但是科学家智慧还是超乎想象的,人们还是找到了使用3种颜色,通过改变叠加权重来模拟所有可见颜色的方法。

这三种颜色就是红(red)、绿(green)、蓝(blue)!简称RGB!又叫三原色

它们的叠加变化规律是这样的:(rgb被称为光色模型或者加色模型,与之相对的是印刷色模型或减色模型比如CMY或CMYK,这里不解释了,感兴趣的小伙伴可以自行百度)

我们先在大脑中想象这样一个场景:

漆黑一片的屋子里有三盏投影灯,分别是红色、绿色和蓝色。

如果一盏灯也不开,那么看到的就是黑色。

如果三盏灯全开,把红、绿、蓝叠在一起就是白色。

红和绿叠加是黄色

红和蓝叠加是紫色

绿和蓝叠加是青色

那么如何显示橙色呢?简单说,就是在黄色的基础上,把红灯贡献的红色的比例增高就可以了。

如图:

16进制颜色表示与RGB色彩模型——零基础自学网页制作

所以,为了标准化显示,科学家使用一个三维向量来表示颜色。

黑色就是(0,0,0)。括号里的三个数值分别指R、G、B即红绿蓝。

理论上,这个三维向量可以显示所有颜色。

但是我们前面说过,只要显示比人眼能识别的颜色多一些就可以了,那我们就要给三个数值找一个上限。

这既要提到我们在16进制讲解的结尾说的"255"这个数了。

没错!这个数值就是原色的上限数值。

(255,255,255)就是白色!也就是从黑到白,三盏投影灯的数值达从0到255就可以。

算上0,从黑到白一共有256个数值,即256个色阶。

256=2的8次方,所以这样的彩色图像我们又称为8位彩色图像。这里的位数也称为色彩深度

那么RGB能够表示多少种颜色呢?

即256乘以256乘以256种,也可以表述为2的24次方中颜色。也就是16777216,也就是一千六百七十多万种,超过大部分人可识别的颜色种类。因此屏幕上的彩色图片看起来还是非常细腻的。

怎么样?是不是很神奇!

最后,我们说一下页面制作中的rgb的写法。

首先要在数值前面加一个#

然后输入数值。数值一共有6个,其中从左到右,两个一组,分别是红(R)绿(G)蓝(B)。

写一个黑色就是#000000

白色就是#ffffff

红色#ff0000

绿色#00ff00

蓝色#0000ff

黄色#ffff00

青色#00ffff

紫色#ff00ff

是不是很简单?

但是我们在写网页时,使用的很多颜色数值非常复杂,不会像我给的例子这么简单。

大家不必担心,html教程结束后,在学习CSS时,我会为大家引入一个新的编程工具叫做Atom,通过这个工具我们可以使用它的插件color-picker在调色板上直观的选择颜色。

HTML官方说明与参考手册:

HTML使用入门教程:https://www.w3school.com.cn/html/index.asp

HTML标签说明参考手册:https://www.w3school.com.cn/tags/tag_caption.asp

喜欢的小伙伴请关注我,阅读中遇到任何问题请给我留言,如有疏漏或错误欢迎大家斧正,不胜感激!

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容