2015年8月1日 星期六

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

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

Wayne Fu 0 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 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP