檢色器
檢查 WCAG 對比度、建立 CSS 漸層並產生調色盤。
只是想選個顏色或轉換 HEX ↔ RGB ↔ HSL（帶滴管）? 請用 HEX RGB 轉換器。
範例
對比度檢查
輸入
#F5F5F5 上的 #1A1A1A
輸出
≈ 16:1 —— 通過 AA & AAA
CSS 漸層
輸入
#3B82F6 → #9333EA, 90°
輸出
background: linear-gradient(90deg, #3B82F6, #9333EA);
調色盤
輸入
#3B82F6
輸出
明暗 + 補色、類似色、三色調
關於此工具
這個免費線上顏色工作室把三樣必備功能合到一起：帶 AA/AAA 通過-不通過和即時文字預覽的 WCAG 對比度檢查器；提供可複製宣告的 CSS 漸層產生器；用於明暗、補色、類似色和三色調的調色盤產生器。每個分頁都內建取色器，一切都在你的瀏覽器中執行，不上傳。純粹的 HEX ↔ RGB ↔ HSL 轉換和螢幕滴管請用 {link}。
使用方法
- 對比度：設定文字和背景顏色以檢查 WCAG 無障礙性。
- 漸層：選兩種顏色和一個角度，然後複製 CSS。
- 調色盤：輸入一個基準色，點擊任意色塊即可複製。
適合誰
檢查無障礙合規、建立 CSS 背景、建立協調調色盤的設計師和開發者 —— 無須在多個工具之間來回切換。
常見問題
這個顏色工具能做什麼?
一處三件事：檢查兩種顏色的 WCAG 對比度、建立 CSS 漸層、從基準色產生明暗和配色調色盤。每個分頁都內建取色器。
免費嗎?
免費 —— 無須註冊，完全免費，一切都在你的瀏覽器中執行，不上傳。
對比度檢查器如何運作?
輸入文字顏色和背景顏色，它會顯示 WCAG 對比度以及一般和大字體各自的 AA、AAA 通過/不通過，並附帶即時預覽。
我需要多大的對比度?
WCAG AA 對一般文字至少需要 4.5:1，大字體需要 3:1；AAA 分別需要 7:1 和 4.5:1。檢查器會為你標出每個等級。
我可以複製 CSS 漸層和調色盤顏色嗎?
可以。漸層分頁提供可直接複製的 background: 宣告，每個調色盤色塊點擊即可複製其 hex。
在哪裡選顏色或轉換 HEX/RGB/HSL?
使用專門的 HEX RGB 轉換器 —— 它可選色（Chrome/Edge 上的螢幕滴管）並顯示 HEX、RGB 和 HSL。本工作室專注於你用顏色做的事：對比度、漸層和調色盤。
我可以從網頁或圖片取色嗎?
可以 —— 在 Chrome 和 Edge 上用 HEX RGB 轉換器的滴管（及其書籤小工具）從螢幕任意位置取色，然後把 hex 帶到這裡。
相關工具