
讓前端工程師輕鬆學會顏色代碼相關知識就是這一篇啦!! 詳細的解說一定不能錯過!!
網頁顏色是在全球資訊網(world wide web,也就是 www)上設計網頁時,表示各種顏色的方法。通常使用三組十六進位數字表示,部分常用顏色 (如三原色:紅、藍、綠) 也可以用英語名稱 (red、blue、green)來表示。此外,尚有直接使用多組十進位表示的方法。本篇提到的是最常用的十六進位數字表示法。前端工程師們快學起來吧!!這可是很有用的呢!!
十六進位數字表示方法
在 HTML 和 CSS 中使用 3 位元組,共 6 個十六進位數字表示一種顏色。每位元組從 00 到 FF,最前面以「#」開頭,接續「#」之後的前兩位數字為紅色的值,中間兩位是綠色的值,最後兩位是藍色的值。
根據維基百科敘述,由於網頁是基於電腦瀏覽器 (就是 IE、Chrome、Safari 等) 開發的媒體,所以顏色以光學三原色 RGB(紅、綠、藍)為主。 網頁顏色是以 16 進位代碼表示,一般以「#」號開頭,後面分別為紅、綠、藍的16位元進位數。FF 為最大數,例如白色是 R、G、B 三個顏色的最高值,在網頁程式碼便是:#FFFFFF。黑色是三個顏色為 0,在網頁程式碼便是:#000000。
範例如下:
#FF0000 - 這個 HTML 代碼是要宣告純粹紅色的最高值,所以前兩個數字為 F,因為不包含任何的藍色與綠色,所以後兩組的兩個數字為 0,宣告結果為:
#00FF00 - 這個 HTML 代碼是要宣告純粹綠色的最高值,所以中間兩個數字為 F,因為不包含任何的紅色與藍色,所以前後兩組的兩個數字為 0,宣告結果為:
#0000FF - 這個 HTML 代碼是要宣告純粹藍色的最高值,所以後兩個數字為 F,因為不包含任何的紅色與綠色,所以前兩組的兩個數字為 0,宣告結果為:
#FFFF00 - 純紅色與純綠色的結合,所以前兩組的兩個數字為 F,宣告結果為:
#CCEEFF - 取一些紅色與綠色的值,並設定藍色為最大值,出現了天空藍:
十進位表示法
十進位表示法為「rgb(紅色值,綠色值,藍色值)」,數值從最小到最大範圍為 0-255。可以表示的顏色數總共有:256*256*256 = 16777216 種。
常用顏色懶人包,前端工程師複製貼上即可!
常用顏色如下所示,前端工程師們如有需要宣告以下顏色時,複製其中的 16 進位代碼貼在自己的 HTML/CSS 即可。
如何在HTML/CSS中宣告顏色代碼
HTML 宣告語法如下:
<!-- In your HTML document --> <body> <h1 style="color:#CD5C5C">Indian Red Title Text</h1> <p style="color:#000000">Slate gray paragraph text</p> </body> CSS 宣告語法如下:
/* In your .css stylesheet */ h1 { color: #CD5C5C ; } p { color: #000000; } 其他閱讀
網頁設計課程必學CSS基礎一:要怎麼在HTML中導入化妝師CSS?
HTML5教學----CSS基礎語法:字型與文字排列相關順序










