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

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

一、光的色彩构成与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(数字,数字,数字)的字样,这就是当前鼠标所在点的色值。记下这三个数就可以直接使用了。


取色

你可能感兴趣的:(网页编程中叫不上名的色彩该如何准确表达?)