如何使用色彩組合工具
- 1
選擇您的方法
從模板（預設配色）、生成器（色彩理論）或自訂（建立您自己的）選項卡中選擇以開始。
- 2
選擇或生成色彩
按類別瀏覽模板配色，使用互補色或三原色等配色方案生成，或手動建立自訂配色。
- 3
編輯與細化
點擊任何顏色即可使用選色器編輯，拖曳顏色以重新排序，或使用隨機按鈕以進行新的排列。
- 4
檢查無障礙性
使用對比度檢查器確保您的色彩組合符合 WCAG 文字可讀性無障礙標準。
- 5
匯出您的配色
將您最終的配色匯出為 CSS 變數、SCSS、Tailwind 配置、JSON 資料或 PNG 圖像，供您的專案使用。
主要功能
模板配色庫
從按自然、現代、復古等類別組織的專業精選配色庫中選擇。
色彩理論生成器
使用色彩理論原則生成和諧配色，包括互補色、三原色、類比色、單色和分離互補色方案。
多格式匯入/匯出
從 CSS 變數、SCSS、Tailwind 配置、JSON 或十六進制列表匯入配色。可匯出為以上任一格式以及 PNG 圖像。
無障礙對比度檢查器
內建 WCAG 對比度檢查器，附有 AA/AAA 合規性指示，確保您的色彩組合符合無障礙標準。
互動式色彩編輯器
點擊任何顏色即可使用選色器編輯，拖曳以重新排序顏色，並即時預覽調整亮度。
自訂配色建立
建立並儲存您自己的自訂配色，可自訂名稱並擁有無限色彩組合。
什麼是色彩組合檢視器？
色彩組合檢視器是一種設計工具，可協助您為專案建立、組織和管理配色方案。它將色彩理論原則與格式轉換、無障礙檢查和模板庫等實用功能相結合，以簡化您的設計工作流程並確保專業、和諧的色彩組合。
為何使用我們的色彩組合工具？
- 1
專業色彩理論
利用經證實的色彩理論原則生成科學平衡的配色方案，以實現視覺吸引人的設計。
- 2
開發人員友善的匯出
直接匯出為 CSS 變數、SCSS、Tailwind CSS 或 JSON 格式，以便無縫整合到您的開發工作流程中。
- 3
無障礙合規性
內建 WCAG 對比度檢查，確保您的色彩選擇符合無障礙標準，實現包容性設計。
- 4
模板庫
存取數百個按風格和類別組織的專業精選配色，即時獲取靈感。
- 5
完全隱私
所有處理都在您的瀏覽器本地進行 - 您的配色和偏好保持私密和安全。
常見問題
我可以匯入哪些色彩格式？
您可以從 CSS 變數（:root）、SCSS 變數（$color）、Tailwind 配置檔案、JSON 物件或簡單的十六進制色彩列表匯入配色。支援檔案上傳和文字貼上。
色彩理論生成器如何運作？
生成器利用色輪上的數學色彩關係來建立和諧的配色。您可以選擇互補色（相對顏色）、三原色（三個等距顏色）、類比色（相鄰顏色）等。
對比度檢查器遵循哪些無障礙標準？
該工具遵循 WCAG 2.1 指南，檢查 AA（4.5:1 比例）、AAA（7:1 比例）和 AA 大字體（3:1 比例）的合規性，以確保您的色彩適用於視力障礙用戶。
我可以編輯配色中的單獨顏色嗎？
是的！點擊任何色塊即可開啟選色器編輯器。您也可以拖曳顏色以重新排序，或使用隨機按鈕來隨機重新排列配色。
有哪些匯出格式可用？
將您的配色匯出為 CSS 自訂屬性、SCSS 變數、Tailwind CSS 配置、JSON 資料物件或 PNG 圖像。每種格式都針對不同的開發工作流程進行了優化。
一個配色可以包含多少種顏色？
模板配色通常有 5 種顏色，但自訂配色可以包含 3 種或更多顏色。該工具會自動處理不同配色大小，並在模板需要時進行擴展。