前端工程師最實用懶人包,十六進位代碼的常用顏色表!
網頁顏色是在全球資訊網(world wide web,也就是 www)上設計網頁時,表示各種顏色的方法。通常使用三組十六進位數字表示,部分常用顏色 (如三原色:紅、藍、綠) 也可以用英語名稱 (red、blue、green)來表示。此外,尚有直接使用多組十進位表示的方法。本篇提到的是最常用的十六進位數字表示法。
十六進位數字表示方法
在 HTML 和 CSS 中使用 3 位元組,共 6 個十六進位數字表示一種顏色。每位元組從 00 到 FF,最前面以「#」開頭,接續「#」之後的前兩位數字為紅色的值,中間兩位是綠色的值,最後兩位是藍色的值。
根據wikipedia敘述,由於網頁是基於電腦瀏覽器 (就是 IE、Chrome、Safari 等) 開發的媒體,所以顏色以光學三原色 RGB(紅、綠、藍)為主。 網頁顏色是以 16 進位代碼表示,一般以「#」號開頭,後面分別為紅、綠、藍的16位元進位數。FF 為最大數,例如白色是 R、G、B 三個顏色的最高值,在網頁程式碼便是:#FFFFFF。黑色是三個顏色為 0,在網頁程式碼便是:#000000。
範例如下:
#FF0000 - 這個 HTML 代碼是要宣告純粹紅色的最高值,所以前兩個數字為 F,因為不包含任何的藍色與綠色,所以後兩組的兩個數字為 0,宣告結果為:     
#0000FF - 這個 HTML 代碼是要宣告純粹藍色的最高值,所以後兩個數字為 F,因為不包含任何的紅色與綠色,所以前兩組的兩個數字為 0,宣告結果為:     
#00FF00 - 這個 HTML 代碼是要宣告純粹綠色的最高值,所以中間兩個數字為 F,因為不包含任何的紅色與藍色,所以前後兩組的兩個數字為 0,宣告結果為:     
#FFFF00 - 純紅色與純綠色的結合,所以前兩組的兩個數字為 F,宣告結果為:     
#CCEEFF - 取一些紅色與綠色的值,並設定藍色為最大值,出現了天空藍:     
十進位表示法
十進位表示法為「rgb(紅色值,綠色值,藍色值)」,數值從最小到最大範圍為 0-255。可以表示的顏色數總共有:256*256*256 = 16777216 種。
常用顏色懶人包,前端工程師複製貼上即可!
| 
#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; }
