使用方式
- 輸入基底色或選取一個顏色。「隨機產生基底色」會為您挑選顏色。
- 選擇色彩和諧類型。「明暗色階」會建立從極淺到極深的 11 階色票。
- 鎖定想保留的顏色，接著繼續探索其他基底色。
- 選擇 HEX、CSS 自訂屬性或 JSON，設定名稱後複製程式碼。
運作方式
色彩和諧是透過在色環上旋轉色相來產生：互補色會加入相反的色相（180°）；類似色會加入兩側相差 30° 和 60° 的鄰近色；三角色會使用相差 120° 的三種色相；四角色會使用相差 90° 的四種色相；分裂互補色則會加入互補色兩側的色相（150° 和 210°）。
旋轉是在 OKLCH 中進行，而不是 HSL。OKLCH 能維持視覺上的明度一致，因此同一色票中的黃色和藍色看起來會一樣明亮，不會讓黃色顯得刺眼。若旋轉後的顏色超出 sRGB 螢幕可呈現的範圍，系統會降低彩度直到符合範圍，同時保留明度和色相。
明暗色階使用固定的 OKLCH 明度級距，名稱從 50 到 950，類似 Tailwind CSS 的命名方式；接近白色和黑色時會降低彩度，避免最淺的色調看起來像螢光色。色彩和諧可作為配色起點；用於內容前，請先透過對比檢查工具確認文字和背景的搭配。
範例
為品牌色搭配點綴色
以 #3366cc 為基底選擇「互補色」，會加入 #8c6500，這是一種明度相同的暖赭色。藍色搭配橙黃色，常用於藍色品牌旁的點綴色。
元件庫的設計代碼
選擇「明暗色階」，將名稱設為「primary」，再匯出 CSS 變數。產生的 --primary-50 到 --primary-950 可直接使用：背景用 50–100、邊框用 200–300、文字用 700–900。
探索配色時保留特定顏色
鎖定三角色票中的第二個顏色，再嘗試不同的基底色。鎖定的色票會保留 HEX 值，其他顏色則會隨之變動。
常見問題
為什麼產生的顏色和 HSL 色環工具不同？
此工具會在感知色彩空間 OKLCH 中旋轉色相。OKLCH 的色相角度與 HSL 並非完全一致，因此某個顏色的「相反色」可能會與 HSL 工具產生的色調略有不同。
可以在 Tailwind CSS 中使用 JSON 嗎？
JSON 會將名稱對應到 HEX 值，格式與 Tailwind 在主題設定中接受的色彩格式相同。在 Tailwind 4 中，也可以將 CSS 變數貼到 @theme 區塊，並將名稱改為 --color-…。
產生的色票符合無障礙需求嗎？
不會自動符合。色彩和諧不代表文字和背景之間具有足夠對比。請使用 Contrast Checker 檢查預計使用的每組顏色。
隱私權
色票會在瀏覽器中產生。您的顏色不會傳送到任何地方，也不會儲存。