色碼表 — 色碼查詢、HEX/RGB 轉換與配色工具

免費線上色碼表，一頁完成取色到配色的完整閉環：取色器四向輸入（原生色板、HEX、RGB 三通道、HSL 三滑桿，任一方式即時聯動），即時得到 HEX / RGB / HSL / CMYK 四種色碼；再從九大色系色碼矩陣（9 系 × 10 級）、CSS 顏色名稱對照表裡挑現成的；還有場景色票冊——網頁常用、馬卡龍、莫蘭迪、商務藍與中國傳統色 16 色。點擊任意色塊一鍵複製色碼，全部計算在瀏覽器本機完成，不上傳任何資料——日常查 rgb色碼表、十六進位色碼，還是挑中國傳統色配色，這張色碼表一頁搞定。

HEX、RGB、HSL、CMYK——同一個顏色的四種寫法

同一種顏色有四種常用寫法，各有適用場景：

HEX 就是 RGB 的十六進位寫法——每通道兩位、按 RRGGBB 排列。HSL 用色相角度（0-360°）+ 飽和度% + 明度% 描述同一顏色，「同色系深一點/淺一點」拖一根滑桿就行。本頁取色器四種格式即時互轉，任一格式輸入全程聯動。

CMYK 說明：螢幕發光（RGB 加色）、印刷吸墨（CMYK 減色），物理機制不同，任何螢幕算出的 CMYK 都只是近似值——本頁按標準公式換算，正式印刷請以實物色卡（潘通等）為準。

明暗梯度與配色方案：從一個色到一套色

取好主色後，兩個產生器直接擴充成色盤：

• 明暗梯度——向黑、向白各 4 檔共 9 檔，RGB 線性插值。淺底介面取深檔做文字、取淺檔做底色，是 UI 配色最常用的套路。
• 配色方案——按 HSV 色相旋轉生成四組：互補色（180°）、類似色（±30°）、三角搭配（120° 等距）、分割互補（150°/210°）。日常設計裡絕大多數和諧配色都落在這四種關係裡，點色票即複製 HEX。

CSS 顏色名稱：瀏覽器認得的 140 個詞

CSS 預先定義了 140 個顏色關鍵字——tomato、deepskyblue、papayawhip——所有瀏覽器渲染一致。上方對照表收錄最常用的 30 個，附中文名與精確色值。寫原型、看程式碼可讀性時用名稱方便；正式專案建議統一用 HEX 變數，設計與開發共享同一份色板。

中國傳統色：十六個傳了千年的顏色

色票冊收錄經典中國傳統色——胭脂、朱砂、藤黃、月白、黛藍……這些名字源自古代染坊與畫譜，今天仍是國風設計、遊戲皮膚、品牌視覺的高頻取色來源。本頁色值採網頁流通版，正式出版級使用請對照《中科院色譜》等出版標準校準。

誰在用這頁工具

• 前端開發——取 HEX、按亮度驗證對比度、複製 HSL 做主題變數
• UI/產品設計師——從品牌色拉 9 檔色階、試配色方案
• 內容創作者——馬卡龍/莫蘭迪色票做封面、PPT、社群配圖
• 學生與愛好者——查顏色名稱與代碼，一鍵複製

選好配色後，可以用線上 Markdown 編輯器寫作、字數統計控字數，或到工具頻道看全部線上工具。