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使用入門教程:https://www.w3school.com.cn/html/index.asp

HTML標籤說明參考手冊:https://www.w3school.com.cn/tags/tag_caption.asp

喜歡的小夥伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!

疫情期間,請大家少出門,不聚會,生活還在繼續!用好這個假期,讓自己活得更多技能!加油!


16進制顏色表示與RGB色彩模型——零基礎自學網頁製作


分享到:


相關文章: