网页编程中叫不上名的色彩该如何准确表达?

经过上篇文章的学习,我们做了一个小小的新闻页面。我们在样式的代码写背景:黑色,背景就显示黑色。颜色:绿色,文字就显示成绿色。而实际过程中,我们需要是并不都是这些叫得上名字的颜色,更多的颜色是叫不上来的。比如介于绿色与浅绿色之间的颜色又该怎么表达呢?

一、光的色彩构成与RGB表示法

如果你有放大镜的话,请把放大镜对准工作中的手机屏幕或电脑屏幕,可以看到以下的壮观的景象,我们的屏幕就是由这些小小的亮点构成。三个亮点(红、绿、蓝)构成一个像素。由于像素很小,又挨得很近,在它们发光时,用肉眼就无法分辨出每个亮点发出的光,只能看到三种光混合起来的颜色。这同样映证了的光的三原色(红、绿、蓝)原理。依靠三原色的强弱关系,可以组合成千变万化的色彩。


屏幕像素点阵列

拾色盘

为了让每个像素能够表达每一种颜色,我们把每一种原色的亮度分成256个等级。0级表示不发光,255级表示最亮。那一个像素可以表达的颜色就有256(红)* 256(绿) * 256(蓝)=16777216种,1600多万种!相比之下我们能叫得出来的颜色数量实在可以忽略不计。那有什么办法表示那些数不清的无名颜色呢?在计算机领域,人们发明了多种表示颜色的方法。

RGB 即Red(红)、Green(绿)、Blue(蓝),颜色的表达式如:rgb(红光强度,绿光强度,蓝色强度)以下举例:

红色:rgb(255,0,0) 表是红光最亮,蓝与绿都不亮。
黄色:rgb(255,255,0) 表示最亮的红光与绿光混合变成黄色。
灰色:rgb(80,80,80) 表示所有的亮点都打开,实际上应该显示成白色,但是其每个亮点的亮度都不足,在黑背景上看起来就是灰色。
黑色:rgb(0,0,0) 好吧,所有的亮点都不亮,黑色的屏幕上就形成了天然黑。

二、RGBA 表示法

RGBA 即Red(红)、Green(绿)、Blue(蓝)、Alpha(透明度),即在三原色的维度上又加了一个透明度维度。该表达方式目前还仅限于软件与网页编程领域。同样一个颜色的透明度也分成了256个等级,0级表示完全透明,255级表示完全不透明。其他与rgb的表达方式相差无几,各位看官可以自己私下尝试。

三、十六进制表示法

1. 什么是十六进制?

我们从小受到的教育告诉我们,数学都是以十进制的形式进行计算的。
0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18....254,255。
其实只要你愿意,你可以以任意进制进行计算。
比如计算机无时不刻都在进行着二进制运算:
0,1,10,11,100,101,110,111,1000,1001,1010,1011... 11111110,11111111。
你也可以用八进制:
0,1,2,3,4,5,6,7,10,11,12,13... 376,377。
十六进制也许更加简洁一些:
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F,10,11,12.....FE,FF。
以上列出来的数字展示的都是0到255之间的数字排列,显然十六进制表达更加简洁。

2. 十六进制色值表示法

在编写计算机程序代码时,默认使用的数字是十进制的,如果一个数字要使用其他进制来表示需要在数的前面加前辍予以区别。参考上述的数字序列,比如数字11,如果它所表达的不是十进制数字,就无法识别这个数字所表达的具体数值。因为它可以是二进制3,也可以是八进制8,也可以是十六进制17。加了前辍之后就可以很清楚地区别开来

二进制: 0b11 = 3;
八进制: 0o11 = 9;
十六进制: 0x11 = 17;

如果用十六进制表达色值,则在数字前加前辍# ,使色值与其他字符串区分开来

例如:#FF32EF,用于表示紫色(非纯紫色,纯紫色值为#FF00FF)。

前面两位数字FF表示红色的光强度是0xFF(255)。
中间两位数字32表示绿色的光强度是0x32(50)。
后面两位数字FF表示蓝色的光强度是0xEF(239)。
该色值等效于:#FF32EF = RGB(255,50,239)

四、十六进制转十进制

在此不做过多的数学阐述,以下举个例子,希望各位找到规律,能够触类旁通。
十六进制0到15的之间数字表达如下:0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F。
声明: 10^2 表示10的2次方。
十进制: 3215 =3 * 10^3 + 2 * 10^2 + 1 * 10^1 + 5 * 10^0;
十六进制: 0xDF = 13 * 16^1 + 15 * 16^0 = 223;

五、取拾屏幕上色值的简单方法

当你使用QQ或者微信截图的时候,会在鼠标附近显示RGB(数字,数字,数字)的字样,这就是当前鼠标所在点的色值。记下这三个数就可以直接使用了。


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

推荐阅读更多精彩内容

  • CSS 通过使用十六进制代码设置特定的颜色预览模式 你是否知道在 CSS 中还有其他表示颜色的方法?其中的一种方法...
    followyounger1阅读 900评论 0 1
  • 一,《闪灵》 看完这部电影,被这个小正太迷了好久,小正太在剧中饰演一位具有“闪灵”能力的孩子,他可以感知未来,这部...
    雨人Y阅读 2,502评论 0 6
  • 2018-4-20上午,二高的一位高一女生由爸妈陪着找到我,女生说,昨天下午差点从教学楼上跳下,女孩两个手臂都伤痕...
    如玉如兰阅读 108评论 0 0
  • 为什么这么说呢? 我们选择相信一件事情,是由我们的本身,对事物进行观测,加上自己判断,得到结论。 我们相信努力可以...
    kakeka阅读 411评论 0 0