想把網頁用的五顏六色?這篇讓你成為心目中的前端工程師!
網頁顏色是在全球資訊網(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 即可。
| #FFFFFF | #DDDDDD | #AAAAAA | #888888 | #666666 | #444444 | #000000 |
| #FFB7DD | #FF88C2 | #FF44AA | #FF0088 | #C10066 | #A20055 | #8C0044 |
| #FFCCCC | #FF8888 | #FF3333 | #FF0000 | #CC0000 | #AA0000 | #880000 |
| #FFC8B4 | #FFA488 | #FF7744 | #FF5511 | #E63F00 | #C63300 | #A42D00 |
| #FFDDAA | #FFBB66 | #FFAA33 | #FF8800 | #EE7700 | #CC6600 | #BB5500 |
| #FFEE99 | #FFDD55 | #FFCC22 | #FFBB00 | #DDAA00 | #AA7700 | #886600 |
| #FFFFBB | #FFFF77 | #FFFF33 | #FFFF00 | #EEEE00 | #BBBB00 | #888800 |
| #EEFFBB | #DDFF77 | #CCFF33 | #BBFF00 | #99DD00 | #88AA00 | #668800 |
| #CCFF99 | #BBFF66 | #99FF33 | #77FF00 | #66DD00 | #55AA00 | #227700 |
| #99FF99 | #66FF66 | #33FF33 | #00FF00 | #00DD00 | #00AA00 | #008800 |
| #BBFFEE | #77FFCC | #33FFAA | #00FF99 | #00DD77 | #00AA55 | #008844 |
| #AAFFEE | #77FFEE | #33FFDD | #00FFCC | #00DDAA | #00AA88 | #008866 |
| #99FFFF | #66FFFF | #33FFFF | #00FFFF | #00DDDD | #00AAAA | #008888 |
| #CCEEFF | #77DDFF | #33CCFF | #00BBFF | #009FCC | #0088A8 | #007799 |
| #CCDDFF | #99BBFF | #5599FF | #0066FF | #0044BB | #003C9D | #003377 |
| #CCCCFF | #9999FF | #5555FF | #0000FF | #0000CC | #0000AA | #000088 |
| #CCBBFF | #9F88FF | #7744FF | #5500FF | #4400CC | #2200AA | #220088 |
| #D1BBFF | #B088FF | #9955FF | #7700FF | #5500DD | #4400B3 | #3A0088 |
| #E8CCFF | #D28EFF | #B94FFF | #9900FF | #7700BB | #66009D | #550088 |
| #F0BBFF | #E38EFF | #E93EFF | #CC00FF | #A500CC | #7A0099 | #660077 |
| #FFB3FF | #FF77FF | #FF3EFF | #FF00FF | #CC00CC | #990099 | #770077 |
前端工程師該如何在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; } 延伸閱讀：
受不了電子書這麼沒有翻書的感覺!但HTML5教學救了我!
HTML5教學的CSS基礎請打好!-字型排序一次滿足
HTML5教學的CSS基礎請打好!-區塊邊框一次掌握
聰明SEO都醬做(8)網路行銷課程說:靠KISS讓人愛上你?
邊上Python課程邊喝咖啡?是學怎麼用AI科技沖咖啡!
AI機器人到底有沒有觸覺?上Python課程一探究竟
人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？
