設計工具

色彩與對比工具

Convert HEX, RGB, and HSL colors, check WCAG contrast ratios, and generate accessible shade ramps locally.

Live preview

Readable interface text

This preview uses the selected foreground and background colors so you can judge legibility beyond the numeric ratio.

Primary actionSecondary label

Contrast

17.06:1
Normal text AA: Pass
Large text AA: Pass
Normal text AAA: Pass
#1a1a2e / rgb(26, 26, 46)
hsl(240 28% 14%)
#ffffff / hsl(0 0% 100%)

Foreground shade ramp

功能亮點

Color Conversion

Convert between HEX, RGB, and HSL values from one input.

WCAG Contrast

Check contrast ratio and AA/AAA pass states for text colors.

Shade Ramp

Generate lighter and darker variants for UI tokens and palettes.

Live Preview

Preview foreground/background combinations at common text sizes.

Copy Values

Copy color values and ramps for CSS variables or design docs.

Browser Local

All color math runs locally with no external service.

常見問題

The checker uses the WCAG relative luminance contrast formula.

Yes. Copy HEX, RGB, HSL, or shade ramp values into CSS custom properties.

No. It checks color contrast, which is one important part of accessible UI design.

持續成長的快速、隱私優先開發者工具集合。所有工具都在瀏覽器中執行,資料不會離開你的裝置。

工具

JSON 解析器JSON Schema 驗證器JSON 轉換器JSON 轉 TypeScriptOpenAPI 檢視器程式碼格式化SQL 格式化cURL 轉換器時間戳轉換器Cron 解析器URL 編碼器QR Code 工具IP 與 CIDR 計算器Gzip 與 Deflate 工具JWT 解碼器JWT 驗簽與 JWK 工具雜湊產生器密碼與 TOTPBase64 編碼器UUID 產生器圖片 metadata圖片壓縮Tiny 圖片壓縮器圖片工具箱 Pro螢幕錄製正則測試器文字 DiffMarkdown 與 Mermaid 預覽色彩與對比工具

法律

隱私權政策服務條款

© 2026 ZPTools. 保留所有權利。