自從有前端工程師推薦的常用顏色懶人包,網頁變得超水的!
我前端工程師的朋友推薦給我用的常用顏色懶人包,只要輕鬆複製,就能做出超美網頁呢!
網頁顏色是在全球資訊網(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。
不同的顏色在HTLML顯示不同,範例如下：
#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教學之1-想要網頁舒服好閱讀,排版是關鍵
Java課程、UI課程、程式課程、網路行銷課程推薦
什麼? AI人工智慧也會養蝦? 電腦精準分析控制,結果讓你一想不到!!
控制不了明天的天氣沒關係,你的網站經過SEO優化後,由你主宰
"液體貓"其實是人工智慧運用AI技術創作出來的合成照片喔!
