顏色名稱與相近色查詢
顏色名稱與相近色查詢可以協助你找到與輸入顏色最接近的「顏色名稱」,也能依名稱反查顏色。輸入 #FF6347 這類 HEX 或 rgb(255, 99, 71),工具會依相近程度依序列出 CSS 命名顏色(Web 顏色名稱),並顯示各自的 HEX 與接近度(ΔE)。反過來輸入 tomato 等顏色名稱,則會立即給出該顏色的 HEX 與 RGB。
輸入 HEX/RGB/HSL 顏色代碼可查詢最相近的顏色名稱,輸入顏色名稱可查看對應的顏色。
最相近的 CSS 顏色名稱
- dodgerblue完全相符#1E90FF · ΔE 0.000
- cornflowerblue#6495ED · ΔE 0.059
- royalblue#4169E1 · ΔE 0.102
- steelblue#4682B4 · ΔE 0.113
- mediumslateblue#7B68EE · ΔE 0.117
- deepskyblue#00BFFF · ΔE 0.127
- mediumpurple#9370DB · ΔE 0.135
- slateblue#6A5ACD · ΔE 0.149
「ΔE」是 OKLab 色彩空間中的感知接近度指標(數值越小越接近)。這是近似值,與 CIE ΔE2000 不同。
全部處理均在您的瀏覽器中完成,輸入的顏色不會傳送到任何伺服器。
相關工具
色彩選擇器
從圖片中擷取顏色並取得色碼的免費色彩選擇器,可用放大鏡依像素精準拾取,支援 HEX / RGB / HSL 切換與調色盤匯出。免費、免註冊。
- 設計與配色
- 效率
圖片配色擷取
線上圖片取色工具,上傳圖片即可自動從圖片擷取主要配色(代表色/主色)並產生調色盤。支援 HEX/RGB/HSL 三種格式、顯示各顏色占比、可調整 4–12 種顏色,並能匯出 JSON、CSS 變數、SCSS 或 Tailwind 設定。圖片不上傳伺服器,全程在瀏覽器中完成,免費且無需註冊。
- 擷取
- 設計與配色
配色產生器
只要選一個基準色,就能依配色理論自動產生互補色、類似色、三角配色等配色方案的免費配色產生器。可輸出 CSS 變數、Tailwind、SCSS、JSON 格式,並提供對比度參考,全程在瀏覽器中完成。
- 產生器
- 設計與配色
色碼轉換
在 HEX、RGB、HSL、HSV、OKLCH 色碼之間互相轉換的免費工具,支援透明度(RGBA、8 位 HEX)與 CMYK 參考值,一鍵複製任意格式,全程在瀏覽器中完成。
- 轉換
- 設計與配色
對比度檢查
即時計算前景色與背景色對比度的免費對比度檢查工具,依 WCAG 2.1/2.2 判定 AA、AAA 是否合格,並支援合格色建議、色覺(色盲)模擬與 APCA,全程在瀏覽器中完成。
- 檢查
- 設計與配色
- 無障礙
CSS 漸層產生
以 GUI 操作顏色、方向與色彩停駐點,即可自動產生 CSS 漸層程式碼的免費漸層產生器。支援線性、放射、圓錐(conic)漸層,可調整不透明度,並輸出 CSS 變數、Tailwind、SCSS 格式與分享 URL。複製即可使用,全程在瀏覽器中完成。
- 產生器
- 開發
- 設計與配色
顏色名稱與相近色查詢是什麼?
顏色名稱與相近色查詢可以協助你找到與輸入顏色最接近的「顏色名稱」,也能依名稱反查顏色。輸入 #FF6347 這類 HEX 或 rgb(255, 99, 71),工具會依相近程度依序列出 CSS 命名顏色(Web 顏色名稱),並顯示各自的 HEX 與接近度(ΔE)。反過來輸入 tomato 等顏色名稱,則會立即給出該顏色的 HEX 與 RGB。
當你想知道「這個 HEX 是什麼顏色名稱」或「這種顏色叫什麼」時,這個工具可以一併完成顏色名稱查詢、rgb 轉顏色名、十六進位顏色名稱的確認。在你想用命名顏色撰寫 CSS,或為顏色取一個方便溝通的名字時特別好用。
工具並非單純比較數值差異,而是在貼近人眼感知的 OKLab 色彩空間中計算距離,因此「看起來最接近」的顏色會排在前面。輸入欄同時接受顏色代碼與顏色名稱,不必先選擇格式。你也可以用系統檢色器選色,或從命名顏色清單中挑選。
全部處理均在你的瀏覽器中完成,輸入的顏色不會傳送到任何伺服器。免註冊、免安裝,開啟即用。
使用方法
- 在輸入欄貼上 HEX、RGB 或 HSL 顏色代碼(會自動辨識格式),也可以用檢色器選擇顏色。
- 工具會依相近程度依序顯示最相近的 CSS 顏色名稱。若有完全一致的名稱,會標註「完全相符」。
- 用複製按鈕複製顏色名稱或 HEX 值,直接用於 CSS 或設計工具。
- 若想用名稱反查顏色,輸入顏色名稱(例如 tomato),即可看到對應的 HEX 與 RGB。
- 展開「從清單中尋找命名顏色」,即可從完整的 CSS 顏色名稱清單中挑選並確認。
使用情境
- 希望為設計稿中的 HEX 找到相近又好懂的顏色名稱的網頁設計師。
- 偏好用命名顏色而非數值來設定 CSS color 屬性的前端工程師。
- 想確認 tomato、teal 等 CSS 顏色名稱實際對應什麼 HEX、RGB 的開發者。
- 想為品牌色或從畫面取得的顏色,取一個方便溝通的名稱的設計師與負責人。
- 需要快速查詢相近顏色名稱、把 rgb 轉換成顏色名的使用者。
注意事項
- 顏色名稱涵蓋 CSS 標準化的 148 個命名顏色(Web 顏色名稱)。由於名稱本身是 CSS 關鍵字,各語言介面下皆以英文顯示。
- 接近度「ΔE」是貼近人眼感知的 OKLab 色彩空間中的歐氏距離,與印刷領域使用的 CIE ΔE2000 不同,僅作為排序的參考。
- 指向同一顏色的別名(aqua 與 cyan、gray 與 grey 等)在相近結果中會依 HEX 合併為一筆;反查與清單中則保留所有名稱。
- 查詢與計算全程在瀏覽器中完成,輸入的顏色不會傳送到任何地方。