上一篇我們提到了可以用顏色名來設定網頁的顏色, 但是顏色有一千六百多萬種, 用顏色名很難代表所有的顏色, 因此 HTML 提供了另一種表示顏色的方式
要學習這種設定方式, 首先必須認識顏色
在電腦上, 是用一種叫 RGB 的色彩模式來呈現顏色, R 代表 Red, 紅色的意思, G 代表 Green, 綠色的意思, B 代表 Blue, 藍色的意思, 這三種顏色稱為三原色, 可以利用這三種顏色調配出所有的顏色
想像一下水彩, 我們可以用紅色加藍色來調配出紫色, 道理是差不多的, 但顏料是以 CMYK 模式在呈現色彩, 顏料並不是發光體, 看到的顏色其實是反光後的結果, 因此顏色混合是得到相減後的結果, 若將所有顏色的顏料混在一起, 則會變成黑色, 而 RGB 是色光的色彩模式, 顏色混合會得到相加後的結果, 所有色光混合在一起, 則會變成白光, 以下的圖大致可說明兩種模式的結果
RGB
(圖片來源:Wikipedia)
CMYK
(圖片來源:Wikipedia)
圈圈交疊的部份表示顏色混合後的結果, 以 RGB 為例, 紅色加綠色即會變成黃色, 紅綠藍加起來即變成白色, 這裡我們只要先記住 RGB 那張圖的混合結果就行了, 其實若你記得彩虹的七彩顏色順序的話(紅橙黃綠藍靛紫), 上面的混合結果就很容易記, 紅色到綠色之間會有橙色(橘色)和黃色, 也就是紅色加綠色可能會得到這兩種顏色, 至於會是哪一種, 那就要看紅色多還是綠色多了, 紅色多一點, 就會變成了橘色, 其他的同理
其實再說細一點的話, 顏色相加不只是得到這七彩顏色而已, 而是一個漸層的觀念, 依據混合的比例不同, 可以混合出所有的顏色
另外, 同樣一個比例, 但量多量少也會呈現出亮或暗的效果, 量愈多愈亮, 量愈少愈暗, 所以若三原色都是最大量時會變成白色, 三原色都沒有時會變成黑色(就像沒有光時是黑暗一樣), 若還不清楚, 可以開啟小畫家, 在上方的選單列中點選[色彩]選單, 再選擇[編輯色彩], 此時會彈出一個編輯色彩的視窗, 再點一下下方的[定義自訂色彩]就會多出一塊有漸層效果的顏色區塊, 在右下方紅綠藍三個輸入格中隨意填入 0~255 的數值, 值愈大代表該色的量愈多, 填完即可看到顏色的變化, 若是直接在漸層區塊中拖拉也可以, 藉此來感受一下 RGB 的效果
在 HTML 裡, 也是用 0~255 來表示各原色的值, 但通常是用 16 進位法來表示, 一般我們常用的進位法是 10 進位, 也就是遇 10 才進一位, 例如 23 代表的是 2*10+3 (這裡的 * 代表乘的意思, 這是一般程式的慣用法), 因此所謂的 16 進位就是要 16 才進一位, 並分別用下面的字元來代表 0~15
0123456789ABCDEF
例如 16 進位的 23 代表 2*16+3, 即等於 10 進位的 35, 所以 16 進位的 FF 即代表 255, 因此在 HTML 中通常是用 6 碼的 16 進位值來代表顏色值, RGB 三種顏色各 2 碼, 並在前面加一個"#", 上面有提到過值愈大代表該種原色的量愈多, 所以
白色就是 #FFFFFF
黑色就是 #000000
紅色就是 #FF0000
綠色就是 #00FF00
藍色就是 #0000FF
是否會覺得 16 進位讓你頭昏腦脹呢, 別怕, 就算不太懂也沒關係, 以後我們有機會再來詳細說明 16 進位法, 現在你只要記得以下的事就夠了
1.顏色值的順序是 RGB, 各 2 碼
2.用 0123456789ABCDEF 來代表 0~15
3.在各顏色 2 碼值中, 第一碼的影響比第二碼大
如此去增減各顏色值即可, 不必管它實際代表的值是等於 10 進位的多少, 這樣是不是比較簡單呢 ^_^
再不然, 用剛剛小畫家的[編輯色彩]功能, 拖拉到你喜歡的顏色後, 將上面紅綠藍三個 10 進位數值放到小算盤的工程模式中幫你轉換成 16 進位也行
所以我們同樣用之前的例子, 將它改成 16 進位表示法, 就變成下面的語法
用瀏覽器打開來看, 一樣可以看到黃底紅字
另外, HTML 當然不是只有能設定整篇文章的底色、文字的顏色, 還有很多細部設定顏色的方法, 待我們講到相關語法時, 再一一為大家介紹
--gs--
{HTML基礎教學}{RGB CMYK}{'16'|'十六' 進位法}
要學習這種設定方式, 首先必須認識顏色
在電腦上, 是用一種叫 RGB 的色彩模式來呈現顏色, R 代表 Red, 紅色的意思, G 代表 Green, 綠色的意思, B 代表 Blue, 藍色的意思, 這三種顏色稱為三原色, 可以利用這三種顏色調配出所有的顏色
想像一下水彩, 我們可以用紅色加藍色來調配出紫色, 道理是差不多的, 但顏料是以 CMYK 模式在呈現色彩, 顏料並不是發光體, 看到的顏色其實是反光後的結果, 因此顏色混合是得到相減後的結果, 若將所有顏色的顏料混在一起, 則會變成黑色, 而 RGB 是色光的色彩模式, 顏色混合會得到相加後的結果, 所有色光混合在一起, 則會變成白光, 以下的圖大致可說明兩種模式的結果
RGB
(圖片來源:Wikipedia)
CMYK
(圖片來源:Wikipedia)
圈圈交疊的部份表示顏色混合後的結果, 以 RGB 為例, 紅色加綠色即會變成黃色, 紅綠藍加起來即變成白色, 這裡我們只要先記住 RGB 那張圖的混合結果就行了, 其實若你記得彩虹的七彩顏色順序的話(紅橙黃綠藍靛紫), 上面的混合結果就很容易記, 紅色到綠色之間會有橙色(橘色)和黃色, 也就是紅色加綠色可能會得到這兩種顏色, 至於會是哪一種, 那就要看紅色多還是綠色多了, 紅色多一點, 就會變成了橘色, 其他的同理
其實再說細一點的話, 顏色相加不只是得到這七彩顏色而已, 而是一個漸層的觀念, 依據混合的比例不同, 可以混合出所有的顏色
另外, 同樣一個比例, 但量多量少也會呈現出亮或暗的效果, 量愈多愈亮, 量愈少愈暗, 所以若三原色都是最大量時會變成白色, 三原色都沒有時會變成黑色(就像沒有光時是黑暗一樣), 若還不清楚, 可以開啟小畫家, 在上方的選單列中點選[色彩]選單, 再選擇[編輯色彩], 此時會彈出一個編輯色彩的視窗, 再點一下下方的[定義自訂色彩]就會多出一塊有漸層效果的顏色區塊, 在右下方紅綠藍三個輸入格中隨意填入 0~255 的數值, 值愈大代表該色的量愈多, 填完即可看到顏色的變化, 若是直接在漸層區塊中拖拉也可以, 藉此來感受一下 RGB 的效果
在 HTML 裡, 也是用 0~255 來表示各原色的值, 但通常是用 16 進位法來表示, 一般我們常用的進位法是 10 進位, 也就是遇 10 才進一位, 例如 23 代表的是 2*10+3 (這裡的 * 代表乘的意思, 這是一般程式的慣用法), 因此所謂的 16 進位就是要 16 才進一位, 並分別用下面的字元來代表 0~15
0123456789ABCDEF
例如 16 進位的 23 代表 2*16+3, 即等於 10 進位的 35, 所以 16 進位的 FF 即代表 255, 因此在 HTML 中通常是用 6 碼的 16 進位值來代表顏色值, RGB 三種顏色各 2 碼, 並在前面加一個"#", 上面有提到過值愈大代表該種原色的量愈多, 所以
白色就是 #FFFFFF
黑色就是 #000000
紅色就是 #FF0000
綠色就是 #00FF00
藍色就是 #0000FF
是否會覺得 16 進位讓你頭昏腦脹呢, 別怕, 就算不太懂也沒關係, 以後我們有機會再來詳細說明 16 進位法, 現在你只要記得以下的事就夠了
1.顏色值的順序是 RGB, 各 2 碼
2.用 0123456789ABCDEF 來代表 0~15
3.在各顏色 2 碼值中, 第一碼的影響比第二碼大
如此去增減各顏色值即可, 不必管它實際代表的值是等於 10 進位的多少, 這樣是不是比較簡單呢 ^_^
再不然, 用剛剛小畫家的[編輯色彩]功能, 拖拉到你喜歡的顏色後, 將上面紅綠藍三個 10 進位數值放到小算盤的工程模式中幫你轉換成 16 進位也行
所以我們同樣用之前的例子, 將它改成 16 進位表示法, 就變成下面的語法
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFF00" text="#FF0000">
123
</BODY>
</HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFF00" text="#FF0000">
123
</BODY>
</HTML>
用瀏覽器打開來看, 一樣可以看到黃底紅字
另外, HTML 當然不是只有能設定整篇文章的底色、文字的顏色, 還有很多細部設定顏色的方法, 待我們講到相關語法時, 再一一為大家介紹
--gs--
{HTML基礎教學}{RGB CMYK}{'16'|'十六' 進位法}
沒找到你要的東西嗎？歡迎留下你的問題！若是我知道的，我會盡力的回答。
0 意見:
張貼留言
廣告訊息會被我刪除