還在為各種顏色代碼煩惱嗎?前端工程師及網頁設計師必備十六進位數字代碼常用顏色懶人包,複製貼上快速搞定!
本篇提到的是最常用的十六進位數字表示法。網頁顏色是在全球資訊網(world wide web,也就是 www)上設計網頁時，表示各種顏色的方法。通常使用三組十六進位數字表示，部分常用顏色 (如三原色：紅、藍、綠) 也可以用英語名稱 (red、blue、green)來表示。此外，尚有直接使用多組十進位表示的方法。
依據維基百科的說明，因為網頁是基於電腦瀏覽器 (也就是 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 - 取一些紅色與綠色的值，並設定藍色為最大值，出現了天空藍:
十六進位數字表示方法
在 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教學與CSS語法:打造美感文字與字形
有這種事?報名HTML5教學,老師卻教CSS語法怎麼用程式語言框住文字訊息與圖片?上HTML5教學就會了!地球最狂HTML5教學(上):初學者救星,超棒免費編輯器在這裡!
地球最狂HTML5教學(中)利用表格標籤抓住消費者的目光!
地球最狂HTML5教學(下)利用標籤指令優化多媒體功能
利用HTML5教學讓你的電子書栩栩如生,停不下來!
