網頁色彩概論

色碼表英文為 Color code table，是網頁設計師在做設計時，挑選顏色常常會用到的參考表，通常使用顏色有三種不同的寫法，分別是使用顏色的英文名稱、十六進位色碼以及 RGB、HSL、Hex...而網頁設計師通常是使用的16進位色碼比較多。

以下針對顏色先來做個基本介紹

RGB

三原色光模式（RGB color model），又稱RGB顏色模型或紅綠藍顏色模型，是一種加色模型，將紅（Red）、綠（Green）、藍（Blue）三原色的色光以不同的比例相加，以合成產生各種色彩光。

而網頁主要使用的為sRGB，sRGB 色域較小，一般我們的電腦螢幕僅能顯示 sRGB 色域，因此較適合用於網頁設計，一般的電腦螢幕、軟體、相片沖印的預設狀態都是以 sRGB為預設值。

每像素24位元

每像素24位元（bits per pixel，bpp）編碼的RGB值 ; RGB色彩在網頁設計時的標記方式是 RGB(0~255 , 0~255, 0~255)，其中括弧內以逗號分隔的三組數值恰好就是 (R, G, B) 的色彩數值，所以數值會是 0~255 共256個數值的這個區間

(0, 0, 0)是黑色
(255, 255, 255)是白色
(255, 0, 0)是紅色
(0, 255, 0)是綠色
(0, 0, 255)是藍色
(255, 255, 0)是黃色

HSL色彩 ( HSL color )

HSL色彩是通過對H（hue）色相，S（saturation）飽和度，L（lightness）亮度。三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，HSL即是代表色相，飽和度，明度三個通道的顏色,取值範圍是0°～360°的圓心角，每個角度可以代表一種顏色。

H（hue）色相

360°/0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅

S（saturation）飽和度

0%～100%的值描述了相同色相、明度下色彩純度的變化。數值越大，顏色中的灰色越少，顏色越鮮艷，呈現一種從理性（灰度）到感性（純色）的變化.

L（lightness）亮度

0%～100%的取值範圍。數值越小，色彩越暗，越接近於黑色；數值越大，色彩越亮，越接近於白色

網頁16進位色彩 ( hex color )

在HTML和CSS中使用3位元組共6個十六進制數字表示一種顏色，每位元組從00到FF，相當十進位數字從0到255，按順序前兩位是紅色的值，中間兩位是綠色的值，最後兩位是藍色的值。16進位碼的色彩標示是由一個井號（＃）開始，在接著後面帶6個數字來表示。

FF為最大數，代表十進制255。比如白色是R、G、B三個顏色最大，在網頁代碼便是：#FFFFFF。黑色是三個顏色為0，在網頁代碼便是：#000000。

使用範例:

#000000 -黑色-三組的兩個數字皆為 0

#FFFFFF -白色-三組的兩個數字皆為F

#FF0000 -紅色-純粹紅色的最高值，所以前兩個數字為 F，因為不包含任何的藍色與綠色，所以後兩組的兩個數字為 0

#0000FF -藍色-純粹藍色的最高值，所以後兩個數字為 F，因為不包含任何的紅色與綠色，所以前兩組的兩個數字為 0

#00FF00 -綠色-純粹綠色的最高值，所以中間兩個數字為 F，因為不包含任何的紅色與藍色，所以前後兩組的兩個數字為 0

#FFFF00 -黃色-純紅色與純綠色的結合，所以前兩組的兩個數字為 F

網頁設計