前端工程師實用懶人包:網頁顏色代碼對照表
前端工程師實用懶人包:網頁顏色代碼對照表

前端工程師必備懶人包在這裡:十六進位代碼常用顏色表.讓你輕鬆搞定所有顏色代碼!

前端工程師實用懶人包:網頁顏色代碼對照表

前端工程師實用懶人包:網頁顏色代碼對照表

網頁顏色是前端工程師在全球資訊網(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; }

 

參考連結:

前端工程師的基本知識:HTML與CSS

最後修改日期: 2019-03-15