前端工程師只要有了這篇顏色代碼大全就不必再為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/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
; }