🎨 顏色工具

顏色選取器

HEX ↔ RGB ↔ HSL 即時互換,一鍵複製,並顯示 WCAG 對比度。

#3B82F6
互補
HEX
RGB
R
G
B
HSL
H
S
L

♿ 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 個等比步驟方便快速使用。