🎨 顏色工具
顏色選取器
HEX ↔ RGB ↔ HSL 即時互換,一鍵複製,並顯示 WCAG 對比度。
♿ WCAG 對比度
🎨 Tints(加白)/ Shades(加黑)
點擊任意色塊即套用
🖌 常用色板
❓ 常見問題
HEX 色碼是什麼?
HEX 是十六進位(Hexadecimal)色碼,格式為 #RRGGBB,每兩碼代表紅、綠、藍三個頻道的強度(00–FF,即 0–255)。例如 #FF0000 是純紅色,#3B82F6 是藍色。
RGB 和 HSL 有什麼差別?
RGB 以紅(R)、綠(G)、藍(B)三原色混合描述顏色,最接近螢幕顯示原理。HSL 則以色相(H, 0–360°)、飽和度(S, 0–100%)、亮度(L, 0–100%)描述,更符合人類對顏色的直覺——調飽和度只需改 S,調亮暗只需改 L。
對比度 WCAG 是什麼?
WCAG(Web Content Accessibility Guidelines)是網頁無障礙指南。對比度指前景色與背景色的亮度比值。AA 標準要求正常文字 ≥ 4.5:1、大文字 ≥ 3:1;更嚴格的 AAA 要求 ≥ 7:1(正常文字)。設計按鈕或文字顏色時應確保達到 AA 以上。
Tints 和 Shades 有什麼用?
Tints(淺色)是原色混入白色後的結果,Shades(深色)是混入黑色後的結果。設計系統中常用一個主色生成完整的顏色量表(如 50–900),本工具提供 9 個等比步驟方便快速使用。
延伸閱讀
顏色怎麼混出來的?色彩混合的科學與藝術全解析
紅色加藍色為什麼變紫色?為什麼螢幕的顏色和顏料的顏色混法不同?從光的三原色到顏料的減色混合,本文帶你深入色彩混合的物理原理、視覺科學,以及設計師與藝術家必備的色彩知識。
圖片壓縮為何能變小?JPEG、PNG、WebP 的取捨原理
圖片壓縮不是單純縮小尺寸,而是利用像素重複、視覺感知與編碼方式減少資料。本文比較 JPEG、PNG、WebP 的有損與無損原理,以及品質參數為何不能直接當百分比。
HEX、RGB、HSL 差在哪?色碼對不上與對比度怎麼看
設計稿寫 HEX、工程師要 RGB、調淺色又碰到 HSL,同一個顏色卻對不齊最常見。本文說明三種色碼在記什麼、何時該用哪一種,以及文字對比度為何不能只看「深淺感覺」,並與混色原理文區隔,聚焦實務對色而非光學百科。