HTML Color Codes 全方位免費線上選色器，輕鬆獲取色彩 ...

「HTML Color Codes」是一款全方位免費線上選色器，不用額外下載、安裝軟體，直接透過瀏覽器就能使用，除了選色工具外，還有顏色圖表、顏色名稱檢索等 ... 跳至主要內容 FacebookTwitterPinterestLineShare（Copyright:alessandroguerriero/123RFStockPhoto） 不知道你會不會經常用到選色器或選色工具（ColorPicker）呢？對我來說，我在編輯網頁樣式表CSS時才會找顏色，通常會從一些網站配色服務尋找看起來合適且舒服的色碼，顏色雖然看似不多，但相差一些些就可能有完全不同的感覺，例如前幾天介紹的「Colors.css 符合當前網頁設計風格的預設16種顏色調色盤」就提供許多很適合現代網頁設計的預設配色，我最近也開始使用；另外像是Colorable可產生符合WCAG規範的配色組合也是很推薦的配色工具，假如你偏好日系風格，NIPPONCOLORS 則有代表日本的250種配色組合。

本文要介紹的「HTMLColorCodes」是一款全方位免費線上選色器，不用額外下載、安裝軟體，直接透過瀏覽器就能使用，除了選色工具外，還有顏色圖表、顏色名稱檢索等等功能，顏色表收錄FlatDesign、MaterialDesign和網頁安全色（WebSafeColor）調色盤，對於要找色碼來說可以在一站完成。

不僅如此，HTMLColorCodes還是一個很實用的色彩工具，除了選色外還能查詢HEX色碼、RGB、HSL和CMYK，並將你選擇的顏色匯出為HTML、CSS或SCSS，對於平常會用到選色器的設計師來說這網站相當方便，不僅提供你在線上快速選取顏色，亦能將選取的顏色暫存起來，以便下次重新打開網站時依然能夠取用你先前選擇的顏色調色盤。

網站名稱：HTMLColorCodes 網站鏈結：https://htmlcolorcodes.com/ 使用教學 STEP1 開啟HTMLColorCodes後預設功能為選色器（ColorPicker），直接將網頁往下拉就能開始使用。

STEP2 HTMLColorCodes選色器其實跟一般Windows和MacOS選色工具沒有太大差異，從右側拉桿來調色，再從中間點擊即可選取某個色塊，選取後右側會顯示更大張的色彩預覽，以及該顏色色碼、RGB、HSL等資訊。

如果你對於顏色沒什麼想法，可點擊選單的「Chart」頁面，網站收錄完整平面設計（FlatDesign）、MaterialDesign和網頁安全色，這些顏色組合上更為單純，直接點擊一樣能夠選取顏色並顯示色碼。

常用瀏覽器支援140種已命名色彩，除了可以在W3C或其他網站找到，也能在HTMLColorCodes找到這些顏色表，收錄包含顏色預覽、名稱、HEX、RGB和HSL色碼資訊，如果要使用於CSS中，可直接使用顏色名稱來指定顏色。

從上方可以快速選取某一種顏色，例如紅色、綠色、藍色或灰色系列。

STEP3 因為是選色器，當然不能漏掉重要的色彩選取功能。

當你選擇顏色後，右上角調色盤會出現你剛才選擇過的最後六個顏色，如果你希望顏色維持在調色盤中，不要被後來選取的顏色覆蓋，可以按一下下方的「鎖頭」圖示將它鎖定即可儲存起來，再點擊一次可以解除鎖定模式。

STEP4 值得一提的是記得前面說過HTMLColorCodes允許我們選擇六種顏色嗎？點擊下載就可以將你選取的顏色資訊匯出，產生為HEX、RGB色碼，或是HTML、CSS和SCSS代碼寫法範例。

最後，你還可以將網站收錄的調色盤下載為所需格式。

值得一試的三個理由： 開啟瀏覽器就能使用選色工具，無需下載或安裝軟體 內建FlatDesign、MaterialDesign和網頁安全色等色表 可匯出HEX、RGB、HSL色碼，或產生HTML、CSS代碼範例 相關文章 TheColorbook從當前Dribbble設計流行的配色組合獲取靈感 Tailwind.ink以神經網路產生色彩調色盤，在主色彩延伸100種相關顏色 Colovely最簡色彩產生器，快速顯示當前顏色HEX、RGB及HSL KlartColors免費線上配色工具，從網站資料庫獲得選色靈感 使用電子郵件訂閱網站 輸入你的電子郵件地址訂閱網站更新，使用電子郵件接收通知。

電子郵件地址 訂閱更新 追蹤更新文章分類 分類 選取分類 個人服務    個人網誌    免費論壇    微型網誌    留言板類    網路相簿    電子信箱 免費空間    10MB-50MB    1GB以上    200MB-500MB    500MB-1GB    50MB-200MB    圖片空間    影音空間    網站空間    音樂空間 免費贈品 免費軟體    光碟工具    可攜軟體    圖片工具    影音工具    文書處理    檔案管理    系統工具    網路相關    防毒軟體 商業軟體 手機APP    工具類    教育類    新聞資訊類    生活類    遊戲類 架站資源    Alexa    PageRank    免費DNS    投票服務    搜尋引擎最佳化    搜尋引擎登錄    流量統計    網站監測    網站線上人數    網站轉址 熱門主題    好玩遊戲    字型下載    桌布下載    線上動漫    線上掃毒    線上翻譯    編輯推薦    縮短網址 素材模版    免費圖片    免費圖示    網站模板    網站配色    網誌物件    網頁素材    音樂音效 網站公告 網路科技    手機相關    搜尋引擎    查詢資料    網路書籤    網路賺錢    線上代理    線上地圖    線上字典    線上廣播    電子賀卡 線上工具    圖片編輯    圖示製作    書籤整合    產生器類    網站縮圖    線上問卷    線上轉檔 贊助評論 開源程式    免費程式（PHP） 雜七雜八    好康資訊    實用教學    折價券區    星座算命    網站評鑑    網路遊戲    趣味網站 預設分類 最新文章123RF圖庫提供免費圖片編輯工具，自動去背、濾鏡、美化增強超簡單 NsLookup查詢網域名稱DNS紀錄，從不同伺服器取得回應結果 ProtonDrive瑞士免費網路硬碟，以最安全的方法儲存或分享檔案 WinfrGUI免費檔案救援軟體，支援各種格式也能復原USB隨身碟記憶卡 WorldwideRadio聽國外廣播的瀏覽器外掛，收錄全世界超過50000個電台 SimpleLogin免費郵件匿名服務，轉寄郵件隱藏真實身份避免垃圾郵件 FreeConvert免費線上轉檔工具，支援圖片、影片、音訊、文件、電子書、壓縮檔等超過1500種格式 NTUSpeed台大網路測速服務，測試連線至學術網路上傳、下載速度 IPME查IP位址超方便，打開網頁立即顯示還能查Whois、DNS紀錄 PacedEmail讓頻繁的電子郵件通知不再干擾用戶，依照頻率產生摘要轉寄郵件 精選主題 思源黑體：Adobe與Google合作開發開放原始碼中文字型思源宋體NotoSerifCJK字型免費下載！Google、Adobe再次攜手推出開放原始碼字體Mipony白馬下載器：網路下載必裝！支援數百免空可突破下載限制Spotify免費聆聽4000萬首歌，音樂串流應用iOS、Android版下載日本亞馬遜AmazonGlobal線上購物直送台灣，免消費稅免找代購中華郵政i郵箱初體驗，24小時自助郵局寄件取件超方便YouTubeMusic免費音樂串流服務正式登場，升級Premium零廣告體驗MicrosoftEdge正式版免費下載！以Chromium重新打造微軟瀏覽器Photopea免費圖片編輯器，堪稱Photoshop線上版支援PSD等常見格式財政部統一發票兌獎APP掃描發票存手機，自動記帳主動對獎超方便使用健保卡+戶號線上查詢勞保勞退年資、應繳欠繳保費和退休金核發試算YouTubeKids兒童專用影音頻道，手機平板應用程式免費下載Disney+台灣影音串流平台訂閱付款教學，最多可四螢幕同時觀看以Outline搭配DigitalOcean架設VPN伺服器教學，每月最低5美元起 實用教學 19個免費YouTube影片下載工具推薦，轉檔MP4、MP3免安裝軟體25個免費線上去背工具推薦，全自動快速移除相片背景5個去人聲免費工具推薦，音樂轉伴奏、擷取各種樂器聲音25個免費相片壓縮工具推薦，讓檔案變小又不損壞畫質12個免費縮網址服務推薦，將網址縮短兼流量統計功能46個免費圖庫網站總彙整15個免費下載高解析度圖片最佳圖庫下載高畫質相片素材的13個免費圖庫資源精選12個你應該知道的中英文假字、文章產生器20個免費下載創用CC授權音樂的網站彙整40個設計師必備免費資源超推懶人包Facebook全新下載資料副本功能，一次備份所有臉書記錄匯出Instagram資料下載讓使用者完整備份相片影片、留言、訊息等個人記錄7個線上接收手機簡訊驗證碼的免費網路服務整理PayPal兩步驟驗證設定教學，以手機簡訊或應用程式降低被盜用風險如何在瀏覽器不支援AdobeFlashPlayer後繼續播放SWF檔案？7-11賣貨便操作教學，整合多種付款方式、固定運費優惠全家好賣+使用教學，賣場註冊、商品上架、手續費和運費優惠說明8個匿名偷看IG限時動態不留下觀看紀錄的網路服務整理 WordPress架站資源 自架WordPress虛擬主機租用教學，將網誌備份匯出、匯入到新家殺手級WordPress體檢項目：101個建立新網站的超簡易捷徑！Cloudflare架站者必備免費CDN、DNS託管服務設定教學16個免費網站速度測試工具推薦！網頁效能評比，搜尋引擎最佳化必備亞馬遜VPS服務AmazonLightsail搭配ServerPilot快速架設WordPress教學使用GoogleCloudPlatform雲端主機免費版架設WordPress教學使用Cloudways架設WordPress網站教學，快速部屬最佳化環境RunCloud佈署最佳化主機環境，整合DigitalOcean架設WordPress教學使用SiteGround虛擬主機一鍵快速安裝WordPress教學FastComet評價極高的虛擬主機推薦，一鍵安裝WordPress教學VaultPress完整備份你的WordPress網站，無痛搬家或回復特定時間點WPRocket最強WordPress快取外掛，完整最佳化設定選項教學不續費虛擬主機？WordPress.com對應個人網域每年13美元搬家超划算 Close免費軟體 APP Mac 擴充功能 系統工具 圖片處理 文書編輯 線上工具 線上翻譯 線上轉檔 配色工具 縮網址 產生器 免費空間 網路硬碟 圖片空間 影音空間 網站空間 熱門主題 Facebook Instagram VPN YouTube 編輯推薦 免費圖庫 字型下載 網路科技 電子信箱 實用教學 資料查詢 免費圖示 音樂音效 架站資源 DNS SEO WordPress 素材模版 免費圖片 網站監測 分享到...BufferCopyEmailFacebookFlipboardHackerNewsLineLinkedInMessengerMixPinterestPocketPrintRedditSMSTelegramTumblrTwitterVKWhatsAppXingYummly