2019年3月4日 星期一

複製貼上快速搞定!給前端工程師的十六進位代碼常用顏色表!

還在為各種顏色代碼煩惱嗎?前端工程師及網頁設計師必備十六進位數字代碼常用顏色懶人包,複製貼上快速搞定!
還在為各種顏色代碼煩惱嗎?前端工程師及網頁設計師必備十六進位數字代碼常用顏色懶人包,複製貼上快速搞定!

本篇提到的是最常用的十六進位數字表示法。網頁顏色是在全球資訊網(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教學與CSS語法:打造美感文字與字形
有這種事?報名HTML5教學,老師卻教CSS語法
怎麼用程式語言框住文字訊息與圖片?上HTML5教學就會了!
地球最狂HTML5教學(上):初學者救星,超棒免費編輯器在這裡! 
地球最狂HTML5教學(中)利用表格標籤抓住消費者的目光! 
地球最狂HTML5教學(下)利用標籤指令優化多媒體功能 
利用HTML5教學讓你的電子書栩栩如生,停不下來!