MUTools
色彩與設計檢查設計與配色

顏色名稱與相近色查詢

顏色名稱與相近色查詢可以協助你找到與輸入顏色最接近的「顏色名稱」,也能依名稱反查顏色。輸入 #FF6347 這類 HEX 或 rgb(255, 99, 71),工具會依相近程度依序列出 CSS 命名顏色(Web 顏色名稱),並顯示各自的 HEX 與接近度(ΔE)。反過來輸入 tomato 等顏色名稱,則會立即給出該顏色的 HEX 與 RGB。

輸入 HEX/RGB/HSL 顏色代碼可查詢最相近的顏色名稱,輸入顏色名稱可查看對應的顏色。

輸入的顏色
#1E90FF
rgb(30, 144, 255)

最相近的 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 色彩空間中計算距離,因此「看起來最接近」的顏色會排在前面。輸入欄同時接受顏色代碼與顏色名稱,不必先選擇格式。你也可以用系統檢色器選色,或從命名顏色清單中挑選。

全部處理均在你的瀏覽器中完成,輸入的顏色不會傳送到任何伺服器。免註冊、免安裝,開啟即用。

使用方法

  1. 在輸入欄貼上 HEX、RGB 或 HSL 顏色代碼(會自動辨識格式),也可以用檢色器選擇顏色。
  2. 工具會依相近程度依序顯示最相近的 CSS 顏色名稱。若有完全一致的名稱,會標註「完全相符」。
  3. 用複製按鈕複製顏色名稱或 HEX 值,直接用於 CSS 或設計工具。
  4. 若想用名稱反查顏色,輸入顏色名稱(例如 tomato),即可看到對應的 HEX 與 RGB。
  5. 展開「從清單中尋找命名顏色」,即可從完整的 CSS 顏色名稱清單中挑選並確認。

使用情境

  • 希望為設計稿中的 HEX 找到相近又好懂的顏色名稱的網頁設計師。
  • 偏好用命名顏色而非數值來設定 CSS color 屬性的前端工程師。
  • 想確認 tomato、teal 等 CSS 顏色名稱實際對應什麼 HEX、RGB 的開發者。
  • 想為品牌色或從畫面取得的顏色,取一個方便溝通的名稱的設計師與負責人。
  • 需要快速查詢相近顏色名稱、把 rgb 轉換成顏色名的使用者。

注意事項

  • 顏色名稱涵蓋 CSS 標準化的 148 個命名顏色(Web 顏色名稱)。由於名稱本身是 CSS 關鍵字,各語言介面下皆以英文顯示。
  • 接近度「ΔE」是貼近人眼感知的 OKLab 色彩空間中的歐氏距離,與印刷領域使用的 CIE ΔE2000 不同,僅作為排序的參考。
  • 指向同一顏色的別名(aqua 與 cyan、gray 與 grey 等)在相近結果中會依 HEX 合併為一筆;反查與清單中則保留所有名稱。
  • 查詢與計算全程在瀏覽器中完成,輸入的顏色不會傳送到任何地方。

常見問題

輸入的顏色會被傳送到伺服器嗎?
不會。顏色名稱查詢與相近色計算全部在你的瀏覽器中完成,處理工作上的配色或品牌色也很安心。
可以依 HEX 查詢顏色名稱嗎?
可以。輸入 `#FF6347` 這類 HEX,工具會依視覺相近程度列出最相近的 CSS 命名顏色(Web 顏色名稱)。若有完全一致的名稱會標註「完全相符」,適合查詢十六進位顏色名稱。
可以用顏色名稱反查 HEX、RGB 嗎?
可以。輸入 `tomato` 等 CSS 顏色名稱,工具會顯示對應的 HEX 與 RGB,讓你也能從顏色名稱反查回代碼。
「相近顏色」是怎麼判定的?
工具在貼近人眼感知的 OKLab 色彩空間中計算輸入顏色與各命名顏色的距離(ΔE),再由小到大排序。由於比較的是感知上的接近度而非單純的 RGB 差異,看起來最接近的顏色會排在前面。
顏色名稱會翻譯成中文嗎?
CSS 顏色名稱是標準關鍵字(程式碼中使用的識別字),因此無論介面語言為何,都以英文原樣顯示。