顏色權杖匯出工具

已核准的品牌色或強調色 開始,將以角色為基礎的明暗權杖匯出為 CSS 變數、JSON 和實用工具對應表。

此頁面用於工程交接。在色票方向已經可以接受並且下一個工作是將其打包為程式碼或文件之後使用它。

其他語言 日本語 | English | 繁體中文 | 繁體中文(香港)

如何使用

  1. 從一種已核准的基色開始,然後選擇一個權杖前綴和 AA 或 AAA 對比目標。
  2. 如果您仍希望在複製貼上交接之前快速進行 UI 簽核,請打開 顏色權杖預覽
  3. 如果您想要對重複項、弱對比對或幾乎相同的角色進行最後一次一致性檢查,請在匯出之前執行 顏色權杖審核
  4. 當您需要兩種模式切換時,請保持深色匯出開啟。如果您只需要一組淺色起始權杖,請將其關閉。
  5. 複製與你的程式碼庫或權杖文件相符的匯出格式,然後稍後使用 對比檢查器

從以角色為基礎的色票規劃轉變為程式碼交接

此頁面位於「無障礙色票」之後、工程移交之前。它回答了一個更狹隘的問題:這組色票應該如何從瀏覽器交付到 CSS 或權杖文件?

在色票方向已經可以接受後建立可匯出的權杖。

淺色權杖
深色權杖
CSS 變數
JSON 權杖
實用地圖

如何在附近的頁面之間進行選擇

使用 色票色彩和諧 當色票仍在調整時。使用 無障礙色票 當 UI 角色仍在分配時。使用 顏色權杖預覽 當這些角色基本上設定完畢並且您希望在匯出之前在瀏覽器端快速簽核時。使用 顏色權杖審核 預覽之後,剩下的問題是重複的角色、近似匹配或對比失敗是否仍然需要在切換之前進行清理。使用 顏色權杖差異 審核後,剩下的問題是下一個權杖集與推出前的當前權杖集有何不同。使用 語意顏色權杖 當角色顏色看起來已經可以接受但語意命名在匯出之前仍然需要產品、文件或行銷移交層。使用 元件顏色權杖 當這些語意名稱現在在最終匯出之前需要按鈕、卡片、輸入、導航或徽章別名時。使用 CSS 顏色混合 當作業是一種可實施的混合式表達式時,以及 OKLCH轉換器 當一種已核准的顏色需要感知值時。當剩餘任務是將以角色為基礎的色票交給工程師或權杖文件時,請使用此頁面。

常見問題解答

該頁面匯出什麼?

它將以角色為基礎的淺色和可選的深色色票匯出為 CSS 變數、JSON 權杖物件以及從一種已核准的基色建立的類似 Tailwind 的鍵值對應。

我什麼時候應該使用它而不是無障礙色票?

當角色分配本身仍在調整時,請使用無障礙色票。當色票已經足夠接近並且下一個工作是將其打包為程式碼或文件時,請使用此頁面。

我什麼時候應該使用它來代替 CSS 顏色混合或 OKLCH 轉換器?

當主要工作是從兩種顏色建立可立即投入生產的混合表達式時,請使用 CSS 顏色混合。當一種已核准的顏色需要感知值時,請使用 OKLCH 轉換器。當下一個任務是將整個以角色為基礎的色票交給工程師或權杖文件時,請使用此頁面。

共用 URL 中儲存了什麼?

分享連結儲存基色、權杖前綴、對比目標以及是否包含深色模式權杖。