如何使用
- 從一種經核准的基色開始,然後選擇一個 token 前綴和 AA 或 AAA 對比目標。
- 如果您仍希望在複製貼上交接之前快速進行 UI 確認,請打開 顏色 token 預覽 首先。
- 如果您想要對重複項、弱對比對或幾乎相同的角色進行最後一次一致性檢查,請執行 顏色 token 審核 在您匯出之前。
- 當您需要兩種模式切換時,請保持暗匯出開啟。如果您只需要一組輕型啟動器,請將其關閉。
- 複製與你的程式碼庫或 token 文件相符的匯出格式,然後稍後使用 對比檢查器。
從基於角色的色票規劃轉變為程式碼交接
此頁面位於「可存取色票」之後、工程交接之前。它回答了一個更狹隘的問題:這個色票應該如何離開瀏覽器並輸入 CSS 或 token 文件?
如何在附近的頁面之間進行選擇
使用 調色盤 或 色彩和諧 當色票仍在移動時。使用 無障礙色票 當 UI 角色仍在分配時。使用 顏色 token 預覽 當這些角色基本上設定完畢並且您希望在匯出之前在瀏覽器端快速確認時。使用 顏色 token 審核 預覽之後,剩下的問題是重複的角色、近似匹配或對比失敗是否仍然需要在切換之前進行清理。使用 顏色 token 差異 審核後,剩下的問題是下一個 token 集與推出前的目前 token 集有何不同。使用 語意顏色 token 當角色顏色看起來已經可以接受但語意命名在匯出之前仍然需要產品、文件或行銷交接層。使用 元件顏色 token 當這些語義名稱現在在最終匯出之前需要按鈕、卡片、輸入、導航或徽章別名時。使用 CSS 顏色混合 當作業是一種可實施的混合式表達式時,以及 OKLCH轉換器 當一種核准的顏色需要感知值時。當剩餘任務是將基於角色的色票交給工程師或 token 文件時,請使用此頁面。
常見問題解答
該頁面匯出什麼?
它將基於角色的淺色和可選的深色色票匯出為 CSS 變數、JSON token 物件以及從一種核准的基色構建的類似 Tailwind 的鍵映射。
我什麼時候應該使用它而不是無障礙色票?
當角色分配本身仍在變化時,請使用無障礙色票。當色票已經足夠接近並且下一個工作是將其打包為程式碼或文件時,請使用此頁面。
我什麼時候應該使用它來代替 CSS Color Mix 或 OKLCH Converter?
當主要工作是從兩種顏色建立可立即投入生產的混合表達式時,請使用 CSS 顏色混合。當一種核准的顏色需要感知值時,請使用 OKLCH Converter。當下一個任務是將整個基於角色的色票交給工程師或 token 文件時,請使用此頁面。
分享 URL 中儲存了什麼?
分享連結儲存基色、token 前綴、對比目標以及是否包含暗模式 token。