任務路徑 / 從輸入到結果
如何建立五色和諧配色
- 01
設定種子色
在「種子色 HEX」中輸入六位十六進制值——# 前綴可選——或用「種子色選擇器」直覺地取色。兩個控制項會保持同步，工作區以種子色 #5D4DF1 開啟。
- 02
選擇和諧規則
選擇「類似色」「互補色」「分裂互補色」「三色」「四色」或「單色」。引擎先套用固定色相偏移，再把中間色塊固定為種子色原值；其餘色塊不一定落在教科書式的精確角度。「單色」保留種子色的色相，同時改變飽和度和明度。
- 03
設定對比度目標
選擇「文字對比度目標」：3:1 大型文字、4.5:1 AA 正文，或 7:1 AAA 正文——預設是 4.5:1。每個色塊都會與黑色或白色中表現更好的一方做對比測量。
- 04
產生配色
點擊「產生配色」。五個色塊隨即出現，居中的一塊永遠是你的種子色原值——其餘四塊在受控範圍內圍繞它偏移色相、飽和度和明度，因此整條色帶保持可用，而不會滑向螢光色或渾濁色。
- 05
讀懂對比度標記
每個色塊顯示十六進制值、對比度比率，以及「通過」或「低於目標」標記；色塊上的文字以對比中勝出的顏色（黑或白）渲染。「低於目標」只是提示文字應選用更深或更淺的相鄰色，並不代表這個顏色有問題。
- 06
複製 CSS 或下載 JSON
「複製 CSS」複製一個帶註釋的 :root 程式碼區塊，內含自訂屬性 --palette-1 到 --palette-5。「下載 JSON」儲存 toolars-palette.json，其中記錄種子色、和諧規則、對比度目標和每個顏色的對比度資料，並帶有明確置為 null 的 aiModel 與 api 欄位。