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

CSS 色碼若能夠改由英文名稱呈現，可以一定程度地增加辨識率。

本篇整理了所有CSS 色碼以及英文名稱對照表，且表格可任意排序，便於查找需要的顏色。

服務項目 諮詢/服務項目 客製化/套版架設網站流程 痞客邦搬家 架站作品集 導覽 如何使用本站 Blogger新手指引 本站的Hack及工具 熱門文章一覽 文章列表+讚統計 Blogger 小技巧 小工具 行動版 官方工具 留言相關 Blogger相關 Blogger筆記 Blogger範本 Blogger語法 Google Google試算表 Chrome套件 GoogleDrive Google搜尋 GoogleAdsense GoogleAnalytics AppsScript Google相關 部落格 部落格經營 搬家 SEO 社交分享按鈕 網站工具 網頁效能 部落格廣告 著作權保護 網頁設計 字型 RWD Bootstrap jQuery工具 CSS技巧 Javascript技巧 網頁開發工具 圖片展示工具 網路雲端 Facebook Line Dropbox Evernote 資訊安全 免費空間 會員中心 會員資訊 會員限定文章 會員加值文章 點數使用明細 會員公告 會員討論區 關於會員系統 關於 關於本站 贊助管道 版權聲明 隱私權政策 留言板 2015年8月11日 CSS色碼英文名稱對照表一覽﹍快速挑選好看的顏色 WayneFu 電腦-網頁設計-CSS 0 A+ 色 a:link{text-decoration:underline;}.post{background:#fff;color:#222}[style*='990000'],[style*=cc0000],[style*='6aa84f'],[style*='3d85c6']{border-bottom:2pxdashed#ccc}[style*='990000']:before,[style*=cc0000]:before{content:"紅字";font-size:70%;font-weight:700;vertical-align:top}[style*='6aa84f']:before{content:"綠字";font-size:70%;font-weight:700;vertical-align:top}[style*='3d85c6']:before{content:"藍字";font-size:70%;font-weight:700;vertical-align:top} 之前看到這篇「CSS1-CSS3顏色知識知多少？」，整理了所有"可用英文命名"的顏色及色碼，這樣的表格對於查找顏色還滿不錯的。

由於原作者的表格，是依照CSS1~CSS3的順序來編排，算是學術用途。

我把這個表格整理了一下，變成可以依照英文字母、也可依照色碼來升冪、降冪排序，這樣對於實務用途會比較方便。

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

1.依彩虹七色排列 http://www.wibibi.com/info.php?tid=372 這個網頁依照「紅、橙、黃、綠、藍、靛、紫、黑色」的排列方式，每個顏色由淺到深列出。

不想太傷腦筋來挑顏色的話，這個列表很方便。

2.特殊顏色排列 http://www.ifreesite.com/color/ 這個網頁把顏色分的更細，不過每個色系一樣提供由深到淺的排列方式，因此查找顏色也是很方便，而且可以找到更特殊的顏色及色系。

二、色碼英文名稱對照表 以下這個表格，預設排列方式為"由淺到深"，從色碼#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的感覺是一樣的。

範本中各處的色碼，對我們一般使用者而言，代表的含意跟QRCODE看起來是差不多的。

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

如果讀者有CSS基礎的話，那麼可以理解使用顏色的語法會是這樣： color:#e6e6fa 使用這個對照表後，那麼這個顏色的表達方法，就可以改為以下： color:lavender 也就是"薰衣草"色，這樣在範本進行維護、搜尋就可以方便許多。

更多CSS相關文章： 0 0 如這篇文章對你有幫助，歡迎「分享」到FB、「追蹤」粉絲團、「訂閱」最新文章 FB LINE 電腦-網頁設計-CSS WayneFu 前端開發‧Blogger探研‧網站架設 歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的Blogger中文部落格。

利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！ 下方連結還有更多的Blogger資源及服務，如需諮詢、合作，歡迎填寫聯絡表單或來信：[email protected] FB社團 粉絲團 Blogger工具 諮詢/架站/網頁設計 架站作品集 2則留言: 雅姬蘭2015年8月12日中午12:11有時會想用英文字指定顏色呀!不竟字母、數字(黑白除外)變化太多!回覆刪除回覆WayneFu2015年8月12日晚上9:23看來這個表您會用得到^^刪除回覆回覆回覆新增留言載入更多… 張貼留言注意事項： ◎勾選「通知我」可收到後續回覆的mail！◎請在相關文章留言，與文章無關的主題可至「Blogger社團」提問。

◎請避免使用Safari瀏覽器，否則無法登入Google帳號留言(只能匿名留言)！◎提問若無法提供足夠的資訊供判斷，可能會被無視。

建議先參考這篇「Blogger提問技巧及注意事項」。

◎CSS相關問題非免費諮詢，建議使用「Chrome開發人員工具」尋找答案。

◎手機版相關問題請參考「Blogger行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」；或參考「Blogger行動版範本修改技巧」，或本站Blogger行動版標籤相關文章。

◎非官方範本問題、或貴站為商業網站，請參考「Blogger免費諮詢+付費諮詢」◎若是使用官方RWD範本，請參考「Blogger推出全新自適應RWD官方範本及佈景主題」→不建議對範本進行修改！◎若留言要輸入語法，""這兩個符號請用其他符號代替，否則語法會消失！◎為了過濾垃圾留言，所有留言不會即時發佈，請稍待片刻。

◎本站「已關閉自刪留言功能」。

站內搜尋 文章分類 生活-理財 (2) 生活-數位生活-3C產品 (18) 生活-數位生活-網路電視 (2) 生活-數位生活-Android (11) 生活-數位生活-Eink產品 (6) 生活-數位生活-iPhone (5) 休閒-三國志11-五奇戰記 (5) 休閒-三國志11-公孫恭開局 (9) 休閒-三國志11-引兵誘敵開局 (14) 休閒-三國志11-水淹開局 (2) 休閒-三國志11-火攻開局 (13) 休閒-三國志11-防守反擊開局 (13) 休閒-三國志11-圍城港關坑兵開局 (6) 休閒-三國志11-運用建築設施開局 (16) 休閒-三國志11-綜合主題 (8) 休閒-小遊戲-射擊 (2) 休閒-小遊戲-益智 (2) 休閒-小遊戲-動作 (11) 休閒-小遊戲-策略 (3) 休閒-太空戰士7 (6) 電腦-部落格-站務-大事紀要 (7) 電腦-部落格-站務-公告 (27) 電腦-部落格-站務-留言板 (3) 電腦-部落格-站務-會員系統 (7) 電腦-部落格-站務-網站服務 (11) 電腦-部落格-中國大陸封鎖 (7) 電腦-部落格-社交分享按鈕 (10) 電腦-部落格-部落格相關 (10) 電腦-部落格-部落格經營 (13) 電腦-部落格-著作權保護 (19) 電腦-部落格-搬家 (12) 電腦-部落格-網站工具 (31) 電腦-部落格-網域 (15) 電腦-部落格-廣告 (10) 電腦-部落格-Godaddy (7) 電腦-部落格-SEO (52) 電腦-部落格-WordPress (10) 電腦-網頁設計-字型 (18) 電腦-網頁設計-免費圖庫 (9) 電腦-網頁設計-使用者體驗 (13) 電腦-網頁設計-表格 (8) 電腦-網頁設計-接案心得 (5) 電腦-網頁設計-圖片展示工具 (10) 電腦-網頁設計-網頁技巧 (12) 電腦-網頁設計-網頁開發工具 (13) 電腦-網頁設計-網站效能 (18) 電腦-網頁設計-Bootstrap (10) 電腦-網頁設計-CSS (50) 電腦-網頁設計-HTML (23) 電腦-網頁設計-iOS (5) 電腦-網頁設計-Javascript技巧 (30) 電腦-網頁設計-Javascript筆記 (6) 電腦-網頁設計-jQuery (34) 電腦-網頁設計-NodeJs (6) 電腦-網頁設計-RWD (17) 電腦-網頁設計-SublimeText (3) 電腦-網路雲端-免費空間 (10) 電腦-網路雲端-爬蟲 (6) 電腦-網路雲端-資訊安全 (20) 電腦-網路雲端-線上工具 (16) 電腦-網路雲端-瀏覽器 (8) 電腦-網路雲端-Dropbox (5) 電腦-網路雲端-Evernote (10) 電腦-網路雲端-Facebook (50) 電腦-網路雲端-Github (2) 電腦-網路雲端-IFTTT (4) 電腦-網路雲端-Line (12) 電腦-網路雲端-PTT (8) 電腦-網路雲端-RSS閱讀器 (12) 電腦-網路雲端-YahooPipe (4) 電腦-Blogger-工具-文章列表-TOC (13) 電腦-Blogger-工具-文章列表-TOC極速版 (6) 電腦-Blogger-工具-私密留言 (6) 電腦-Blogger-工具-官方工具 (15) 電腦-Blogger-工具-側邊欄 (16) 電腦-Blogger-工具-推文 (5) 電腦-Blogger-工具-單篇文章計數器 (5) 電腦-Blogger-工具-搜尋功能 (8) 電腦-Blogger-工具-導覽列 (13) 電腦-Blogger-工具-Blogger工具 (22) 電腦-Blogger-Hack-留言-留言相關 (29) 電腦-Blogger-Hack-留言-舊範本留言 (10) 電腦-Blogger-Hack-標籤-多層樹狀標籤 (7) 電腦-Blogger-Hack-標籤-兩層樹狀標籤 (6) 電腦-Blogger-Hack-標籤-標籤文章列表 (3) 電腦-Blogger-Hack-標籤-標籤相關 (2) 電腦-Blogger-Hack-私密文章 (4) 電腦-Blogger-Hack-讀者反應 (4) 電腦-Blogger-Hack-Blogger語法 (15) 電腦-Blogger-行動版 (24) 電腦-Blogger-Blogger小技巧 (26) 電腦-Blogger-Blogger相關 (90) 電腦-Blogger-Blogger筆記 (14) 電腦-Blogger-Blogger範本 (20) 電腦-Google-搜尋 (14) 電腦-Google-試算表 (30) 電腦-Google-網站管理員 (8) 電腦-Google-Adsense (26) 電腦-Google-Analytics (16) 電腦-Google-AppsScript (16) 電腦-Google-Authorship (5) 電腦-Google-Chrome (19) 電腦-Google-CloudPlatform (1) 電腦-Google-Drive (21) 電腦-Google-G＋ (26) 電腦-Google-Gmail (9) 電腦-Google-Google相關 (21) 電腦-Google-GooglePhoto (7) 電腦-Google-Picasa (16) 電腦-Google-Youtube (5) 電腦-Windows-Hotkeyz (7) 電腦-Windows-Win軟體 (4) 電腦-Windows-Win8Win10 (7) 電腦-Windows-XP (1) 閱讀-有錢人想的和你不一樣 (15) 閱讀-為健康把關的57堂課 (2) 精選文章 最新文章 recentposts Blogger精選 網頁設計精選 聯絡我 最新回應 請先閱讀「填寫諮詢聯繫表單SOP」瞭解重要資訊，如非需要發案給本站，提問請至「Blogger社團」，本站不會回覆任何私人諮詢問題，謝謝！ 稱呼：(必填) 電子郵件：(必填) 您的網址或提問的相關網址：(必填) 簡單自介、如何找到本站：(必填) 請詳細描述您的需求、問題或意見，如提供的資訊不足，可能無法回覆：(必填) 友格 關注1 關注2 訂閱 CC0免費圖庫搜尋引擎 TV線上看電視 RSS訂閱 FEEDLY訂閱 TOP