顏色權杖匯出生成器

拿一個 認可的品牌或強調色,然後將基於角色的明暗權杖匯出為 CSS 變數、JSON 和實用程式映射切換。

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

其他語言 日本語 | English | 繁體中文

如何使用

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

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

此頁面位於「可存取色票」之後、工程移交之前。它回答了一個更狹隘的問題:這個色票應該如何離開瀏覽器並輸入 CSS 或權杖文件?

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

光權杖
黑暗代幣
CSS 變數
JSON 權杖
實用地圖

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

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

常見問題解答

該頁面匯出什麼?

它將基於角色的淺色和可選的深色色票匯出為 CSS 變數、JSON 權杖物件以及從一種批准的基色構建的類似 Tailwind 的鍵映射。

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

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

我什麼時候應該使用它來代替 CSS Color Mix 或 OKLCH Converter?

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

共用 URL 中儲存了什麼?

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