前端工程師必備十六進位代碼常用顏色表! | 駭客任務-程式設計師的小天地

前端工程師必備十六進位代碼常用顏色表!

前端工程師必備十六進位代碼常用顏色表!

By Neo 0 Comment 2019-03-04

在學習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; }

 

</div >

推薦閱讀:

HTML5教學解碼網頁區塊圖和表格

認真上HTML5教學,踏足出版業就業路更寬廣

利用HTML5教學讓你的電子書栩栩如生,停不下來!

上到賺到,HTML5教學還不夠,老師還繼續教CSS語法

實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!

實用HTML5教學小技巧二-如何使用HTML來做表格~

實用HTML5教學小技巧三-HTML新增的標籤有哪些?


            

Add Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *