前端工程師最實用懶人包,十六進位代碼的常用顏色表!
網頁顏色是在全球資訊網(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
; }