🎨 顏色工具
顏色選取器
HEX ↔ RGB ↔ HSL 即時互換,一鍵複製,並顯示 WCAG 對比度。
#3B82F6
互補
HEX
RGB
HSL
♿ WCAG 對比度
Aa 白字3.68:1
正文 Fail大字 AA
Aa 黑字5.71:1
正文 AA大字 AAA
🎨 Tints(加白)/ Shades(加黑)
點擊任意色塊即套用
🖌 常用色板
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Pink
Rose
White
Gray
Dark
Black
❓ 常見問題
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 個等比步驟方便快速使用。