前端工程師知識站:怎麼在HTML和CSS中宣告顏色代碼

前端工程師知識站:怎麼在HTML和CSS中宣告顏色代碼

複雜繁多的顏色代碼讓許多前端工程師感到煩惱~ 今天就把相關知識一次教給你!!

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