配色盤 + WCAG 檢查器
在本地檢查對比度、AA/AAA 合規、產生配色盤變體，並匯出 CSS 或 Tailwind v4 色彩 token。
所有色彩計算都在你的瀏覽器本地完成。不需要上傳、不需要登入，設計資料不會離開你的裝置。
前景色
背景色
對比比例 4.51:1
AA 正文字 通過
AAA 正文字 失敗
AA 大字 通過
主色轉換結果
HEX
#1A73E8RGB
rgb(26, 115, 232)HSL
hsl(214 82% 51%)OKLCH
oklch(0.574 0.195 257.9)產生的配色盤
#1A73E8
主色#E88F1A
互補色#1ADAE8
同色系（左）#281AE8
同色系（右）#0F4A97
深色 shade#6DA6F0
淺色 tintCSS 變數
:root {
--color-primary: #1A73E8;
--color-background: #FFFFFF;
--color-accessible: #1A73E8;
--color-complementary: #E88F1A;
--color-analogous-left: #1ADAE8;
--color-analogous-right: #281AE8;
--color-shade: #0F4A97;
--color-tint: #6DA6F0;
}Tailwind v4 主題
@theme {
--color-primary: oklch(0.574 0.195 257.9);
--color-background: oklch(1.000 0.000 89.9);
--color-accessible: oklch(0.574 0.195 257.9);
--color-complementary: oklch(0.727 0.156 65.4);
--color-analogous-left: oklch(0.811 0.135 203.2);
--color-analogous-right: oklch(0.443 0.276 269.2);
--color-shade: oklch(0.421 0.139 257.6);
--color-tint: oklch(0.717 0.124 255.4);
}常見問題
最接近通過的建議色是怎麼算出來的？
TeaFun 會盡量保留您原本前景色的 hue 與 saturation，再調整 lightness，直到正文至少達到 WCAG AA。
Tailwind 匯出是 v4 新格式嗎？
是。匯出內容會使用 `@theme` token 與 `oklch()` 值，你可以直接貼進 Tailwind v4 專案。
可以用於客戶專案嗎？
可以。工具完全在瀏覽器中運行，您可以檢查品牌色、匯出 token，並產生 PNG swatch，不必把資料交給第三方服務。
瀏覽相同標籤
前往其他擁有相同工作流程、格式或用途的工具。