什麼是色彩名稱查詢器？
輸入任意 HEX、RGB 或 HSL 色彩值，就能從包含 1,500 多個名稱的資料庫中找到最接近的命名顏色。它把一串色碼變成你能直接唸出來的名字，寫設計文件或跟同事討論配色時很方便。
工具用的是開源 color-name-list 色名資料庫,Figma 外掛和 Tailwind 擴充套件常引用同一份資料。可以輸入十六進位值、切到 RGB 或 HSL 直接填通道,或用取色器選色塊。工具會用 RGB 歐氏距離算出最接近的命名顏色,並以 HEX、RGB、HSL、HSV 和 CMYK 一併呈現,還會附帶兩個備選名稱、相似度分數與 WCAG 對比度檢查,讓你看得出來是「幾乎一致」還是「只是大致接近」。
使用方法
- 步驟一——輸入 HEX 格式的色彩值（如 #3B82F6），切到 RGB 或 HSL 直接填通道數值，或使用取色器以視覺化方式選擇顏色。
- 步驟二——工具立即找到最接近的命名顏色，並顯示精確匹配距離。
- 步驟三——查看色彩名稱、其精確 HEX 值，以及輸入顏色與命名顏色之間的視覺化對比。
何時使用
- 寫品牌規範或元件庫前,先給一個顏色取個正式名字。
- 把截圖裡的顏色翻譯成工程師可以用名字搜尋的標準色。
- 把油漆或布料色卡對照到常見的網頁安全色,看看叫什麼名字。
結果
開發者輸入 #4A90D9，發現最接近的顏色是「鋼藍色」(#4682B4)，相似度為 96.2%。
常見問題
- 這些色名是從哪裡來的?
- 資料來自開源專案 color-name-list,大約 1500 個名字,彙整了 xkcd 色彩調查、各家油漆品牌色卡和 CSS 規範命名。許多設計工具也在用這份資料,看起來會很眼熟。
- 為什麼有些顏色相似度永遠到不了 100%?
- 只有完全等於色名表裡某一筆的顏色才能得到 100%。其他都是按 RGB 距離找最近的一個。95% 以上肉眼基本看不出差;低於 85% 就代表命名顏色跟你輸入的明顯有差。
- 它用的是 RGB 距離還是感知距離?
- 用的是 RGB 歐氏距離。算起來快,對多數網頁色都夠用。但是高飽和的紅色和綠色,人眼比 RGB 模型更敏感,這種情況下可能會挑出一個稍微偏色的名字。
- 可以直接輸入 HSL、RGB 或 HEX 嗎?
- 可以——三種都內建了。把輸入分頁切到 HEX、RGB 或 HSL 填值就行,也能直接用取色器選。結果卡片還會一併列出配對色的 HSL、HSV 和 CMYK,需要哪種格式直接複製即可。
- 為什麼兩個差很多的 HEX 值會對應到同一個名字?
- 色名表在某些區域比較稀疏,例如灰調中性色和淺粉色。當兩個輸入都離任何已命名色都很遠時,最近鄰就會重複。看相似度分數就能看出差距有多大。