HTML文件中的顏色設定

在HTML文件中設定文字、背景、框線等元素的顏色，是網頁設計人員的基本功。學會設定顏色不是很困難的事，本文簡單說明用三種方式來表示顏色。

在我看來比較有難度的是「選色」和「配色」。漂亮好看的顏色，誰都能挑出幾個，但是挑出的幾個顏色是否能協調而且具備美感地搭配在一起，搭配的比例又是怎樣最恰當？恐怕就不是三言兩語說得清楚了。話說回來，也不用太過擔心，在網路上可以找到各種網頁設計範本作為參考，而且也可以直接觀摩設計出色的網站，從中學習。如果有需要，還可以找幾本配色事典來翻閱，相信總能找到幾個符合自己需求的配色方案。


在HTML網頁文件中設置顏色，有3種常見的格式：

1. 用「顏色名」來設置顏色：

*可用「顏色名」設置的基本顏色有16種，延伸顏色有140種。
*基本16個顏色：aqua, blue, gray, lime, navy, purple, silver, white, black, fuchsia, green, maroon, olive, red, teal, yellow.
使用實例：<div style="color: maroon; background-color: silver;">
*在網路上可以找到所有瀏覽器都支援的有「名字」的顏色列表，例如這個「HTML COLOR NAMES」。https://www.w3schools.com/colors/colors_names.asp


2. 用R,G,B紅綠藍三種顏色的相對比例來設置顏色，可用百分比或0-255的數值來表示。
*例如白色是：100% red + 100% green + 100% blue，在HTMl文件中可以寫成rgb(100%, 100%, 100%)
 例如黑色是：0% red + 0% green + 0% blue，可以寫成rgb(0%, 0%, 0%)
*顏色表示例1（CSS語言）：body { background-color: rgb(80%, 40%, 0%);}
 顏色表示例2（CSS語言）：body { background-color: rgb(204, 102, 0);}
*在配色事典上的顏色，通常都會有RGB顏色的數值，可以用這個方法來標示，使網頁文件能顯示你要的顏色。


3. 用十六進制顏色值（hex code）來設置顏色：這是目前網頁文件最普遍的顏色設置方式。
*例如#FF0000代表的就是red紅色。
*如果是以網頁設計為目的的配色事典，或是提供網頁設計資源的網站，通常就會以hex code來標示顏色。
*萬一你在網站或書本上看到的顏色沒有提供hex code數值，就必須在網路上找轉換工具（converter），將RGB色彩轉換成hex code，或是將hex code轉換成RGB色彩（注1）。
 例如：RGB (100,100,100) 轉換成hex code會是#646464
*用hex code設定HTML文件中的字體顏色：<div style="color: #646464;">



注1：手動計算hex code轉換成RGB色彩

#cd690f若要轉換成RGB顏色，該怎麼表示？

Hex code的六個碼，前2碼代表紅色的成分，中間2碼代表綠色的成分，後2碼代表藍色的成分。
六個碼，每個碼只會出現0~9以及A~F，也就是10個數字和6個字母的可能性，共16個可能性。16x16=256，也就是說，用兩個碼就能夠用來表示單一原色的256個值。這也是它成為十六進制的原因。
0,1,2,3,4,5,6,7,8,9,A(代表10),B(代表11),C(代表12),D(代表13),E(代表14),F(代表15)

#cd690f
c=12, d=13, f=15
cd=12x16+13=205
69=6x16+9=105
0f=0x16+15=15

#cd690f = RGB(205,105,15)

從Hex code轉換成RGB色彩，可以手動計算得到答案，但是反過來，有了RGB色彩的數值，要換算成Hex code好像有點困難？看起來還是讓電腦去計算比較快。