2015年8月11日

CSS 色碼英文名稱對照表一覽﹍快速挑選好看的顏色

A+
color-code-table之前看到這篇「CSS1-CSS3 顏色知識知多少?」,整理了所有 "可用英文命名" 的顏色及色碼,這樣的表格對於查找顏色還滿不錯的。

由於原作者的表格,是依照 CSS1 ~ CSS3 的順序來編排,算是學術用途。我把這個表格整理了一下,變成可以依照英文字母、也可依照色碼來升冪、降冪排序,這樣對於實務用途會比較方便。



一、方便找顏色及色碼的網站


如果不需要英文名稱的話,那麼推薦這兩個網站,整理的顏色比較有系統一些。

1. 依彩虹七色排列


color-code-1

這個網頁依照「紅、橙、黃、綠、藍、靛、紫、黑色」的排列方式,每個顏色由淺到深列出。不想太傷腦筋來挑顏色的話,這個列表很方便。


2. 特殊顏色排列


color-code-2

這個網頁把顏色分的更細,不過每個色系一樣提供由深到淺的排列方式,因此查找顏色也是很方便,而且可以找到更特殊的顏色及色系。



二、色碼英文名稱對照表


以下這個表格,預設排列方式為 "由淺到深",從色碼 #ffffff (白色) 一直排列到 #000000 (黑色)。不過考慮到會有讀者想要 "由深到淺"、或是從英文名稱來搜尋顏色,那麼就需要不同的排列方式。

為了符合各種需求,讀者可自行點擊這兩個標題「顏色名稱」、「色碼」,就可看到不同的排序效果了。

顏色名稱 色碼
white#ffffff
ivory#fffff0
lightyellow#ffffe0
yellow#ffff00
snow#fffafa
floralwhite#fffaf0
lemonchiffon#fffacd
cornsilk#fff8dc
seashell#fff5ee
lavenderblush#fff0f5
papayawhip#ffefd5
mistyrose#ffe4e1
bisque#ffe4c4
blanchedalmond#ffe4c4
moccasin#ffe4b5
navajowhite#ffdead
peachpuff#ffdab9
gold#ffd700
pink#ffc0cb
lightpink#ffb6c1
orange#ffa500
lightsalmon#ffa07a
darkorange#ff8c00
coral#ff7f50
hotpink#ff69b4
tomato#ff6347
orangered#ff4500
deeppink#ff1493
fuchsia#ff00ff
red#ff0000
oldlace#fdf5e6
lightgoldenrodyellow#fafad2
linen#faf0e6
antiquewhite#faebd7
salmon#fa8072
ghostwhite#f8f8ff
mintcream#f5fffa
whitesmoke#f5f5f5
beige#f5f5dc
wheat#f5deb3
sandybrown#f4a460
azure#f0ffff
honeydew#f0fff0
aliceblue#f0f8ff
khaki#f0e68c
lightcoral#f08080
palegoldenrod#eee8aa
violet#ee82ee
darksalmon#e9967a
lavender#e6e6fa
lightcyan#e0ffff
burlywood#deb887
plum#dda0dd
gainsboro#dcdcdc
crimson#dc143c
palevioletred#db7093
goldenrod#daa520
orchid#da70d6
thistle#d8bfd8
lightgrey#d3d3d3
tan#d2b48c
chocolate#d2691e
peru#cd853f
indianred#cd5c5c
mediumvioletred#c71585
silver#c0c0c0
darkkhaki#bdb76b
rosybrown#bc8f8f
mediumorchid#ba55d3
darkgoldenrod#b8860b
firebrick#b22222
powderblue#b0e0e6
lightsteelblue#b0c4de
paleturquoise#afeeee
greenyellow#adff2f
lightblue#add8e6
darkgrey#a9a9a9
brown#a52a2a
sienna#a0522d
yellowgreen#9acd32
darkorchid#9932cc
palegreen#98fb98
darkviolet#9400d3
mediumpurple#9370db
lightgreen#90ee90
darkseagreen#8fbc8f
saddlebrown#8b4513
darkmagenta#8b008b
darkred#8b0000
blueviolet#8a2be2
lightskyblue#87cefa
skyblue#87ceeb
grey#808080
olive#808000
purple#800080
maroon#800000
aquamarine#7fffd4
chartreuse#7fff00
lawngreen#7cfc00
mediumslateblue#7b68ee
lightslategrey#778899
slategrey#708090
olivedrab#6b8e23
slateblue#6a5acd
dimgrey#696969
mediumaquamarine#66cdaa
rebeccapurple#663399
cornflowerblue#6495ed
cadetblue#5f9ea0
darkolivegreen#556b2f
indigo#4b0082
mediumturquoise#48d1cc
darkslateblue#483d8b
steelblue#4682b4
royalblue#4169e1
turquoise#40e0d0
mediumseagreen#3cb371
limegreen#32cd32
darkslategrey#2f4f4f
seagreen#2e8b57
forestgreen#228b22
lightseagreen#20b2aa
dodgerblue#1e90ff
midnightblue#191970
aqua#00ffff
springgreen#00ff7f
lime#00ff00
mediumspringgreen#00fa9a
darkturquoise#00ced1
deepskyblue#00bfff
darkcyan#008b8b
teal#008080
green#008000
darkgreen#006400
blue#0000ff
mediumblue#0000cd
darkblue#00008b
navy#000080
black#000000



三、簡易使用方法


一般而言,除非是靠設計吃飯,否則色碼看起來跟不懂程式的人看 code 的感覺是一樣的。範本中各處的色碼,對我們一般使用者而言,代表的含意跟 QR CODE 看起來是差不多的。

如果範本中放置的色碼,能夠改由英文名稱呈現,可以一定程度地增加辨識率,那麼我想會是本篇這個表格可以發揮的作用。

如果讀者有 CSS 基礎的話,那麼可以理解使用顏色的語法會是這樣:

color: #e6e6fa
使用這個對照表後,那麼這個顏色的表達方法,就可以改為以下:

color: lavender
也就是 "薰衣草" 色,這樣在範本進行維護、搜尋就可以方便許多。


更多 CSS 相關文章:

2 則留言:

  1. 有時會想用英文字指定顏色呀!
    不竟字母、數字(黑白除外)變化太多!

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。