命名色彩查詢器

為任何顏色找到最接近的 CSS 命名顏色和最近似的 Tailwind 色調——感知比對，附可直接複製的數值。

您的顏色

#3B82F6

最近似的 CSS 顏色

—

差異: —

最近似的 Tailwind 色調

—

差異: —

輸入或選取任何顏色，立即查看最接近的命名 CSS 顏色和 Tailwind 色調——在您的瀏覽器中以感知方式比對。

關於命名色彩查詢器

色彩命名查詢工具能回答一個簡單的問題:這個顏色叫什麼名字?輸入或選擇任何顏色,它會立即回傳最接近的 CSS 命名色彩──取自瀏覽器能識別的標準清單,例如「steelblue」或「coral」──以及最接近的 Tailwind 調色盤色階,例如「sky-600」。

比對方式採用感知式而非純數值方式,因此建議的名稱看起來確實與你輸入的顏色相似,而不僅僅是原始 RGB 數值上的接近。差異指標會告訴你這個比對是完全相符、非常接近,還是僅為近似值,讓你了解為了取得一個好記的名稱,犧牲了多少精確度。

查詢完全在你的瀏覽器中執行,每項結果都附有複製按鈕。它非常適合用來撰寫更易讀的 CSS、將任意的品牌色對齊到 Tailwind 色階,或單純了解你從照片中選取的顏色叫什麼名字。

是的。比對過程在你的瀏覽器中,針對內建的色彩清單本機計算,因此查詢免費、即時且不受限制。

CSS 定義了約 148 個命名色彩(147 個不重複數值,因為部分是別名,如 gray/grey),從「red」這樣的基本色到「papayawhip」這種冷門項目都有。每個瀏覽器都能識別它們,而這個工具會找出最接近你輸入顏色的那一個。

工具使用感知式色彩距離量度,而非簡單的 RGB 比較,因此建議的名稱能反映人眼實際看到的相似程度──這對柔和色調與近灰色尤其重要。

取自 Tailwind 預設調色盤中最接近的色階,以熟悉的「色相加數字」格式命名,例如「emerald-500」。這對於將任意設計色彩對齊到 Tailwind 的色階、讓你的工具類別保持一致非常有用。

代表你輸入的顏色與命名色彩完全一致──你可以用該名稱取代 HEX 數值而不會造成任何視覺上的差異。較低的等級(「非常接近」、「接近」、「近似」)則表示差異逐漸增加,儘管往往肉眼難以察覺。