前端工程師一定要知道的事情''網頁顏色代碼對照表''

前端工程師必知的小語法!!
前端工程師必知的小語法!!


網頁顏色是在全球資訊網(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教學教你網頁設計標籤的活用
HTML5教學也能實現3D的立體形式?
讓你實現目標與夢想的技術實力-Java課程
擠進高薪科技大門-Java課程等你來瞭解! 
達內教育評價-故事背後事實的真相甚麼是這樣?!
Java課程助你擠進IT專業職場大門