Color Palette + WCAG Checker

本地檢查對比度、AA/AAA 合規、生成 palette 變體，並匯出 CSS 或 Tailwind v4 色彩 token。

所有色彩計算都喺你嘅瀏覽器本地完成。唔使上傳、唔使登入，設計資料唔會離開你部機。

前景色

背景色

對比比例 4.51:1

AA 正文字通過

AAA 正文字失敗

AA 大字通過

主色轉換結果

HEX #1A73E8

RGB rgb(26, 115, 232)

HSL hsl(214 82% 51%)

OKLCH oklch(0.574 0.195 257.9)

產生出嚟嘅 palette

#1A73E8

主色

#E88F1A

互補色

#1ADAE8

同色系（左）

#281AE8

同色系（右）

#0F4A97

深色 shade

#6DA6F0

淺色 tint

CSS variables

: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

@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);
}

常見問題

最近 pass 建議色係點計出嚟？

TeaFun 會盡量保留你原本前景色嘅 hue 同 saturation，再調整 lightness，直到正文至少達到 WCAG AA。

Tailwind 匯出係咪 v4 新格式？

係。匯出內容會用 `@theme` token 同 `oklch()` 值，你可以直接貼入 Tailwind v4 專案。

可以用嚟做客戶項目嗎？

可以。工具完全 browser-only，你可以檢查品牌色、匯出 token，同生成 PNG swatch，而唔使將資料交俾第三方服務。