調色板產生器

調色板產生器使用色輪和諧規則將單一基色轉換為一組協調的顏色。選擇起始顏色並選擇一種模式 - 色調和色調、單色、互補色、類似色、三元色或四元色 - 工具使用每個樣本的 HEX 代碼計算平衡調色板。

良好的顏色組合遵循 HSL 色輪上的可預測關係：互補色彼此相對，類似的顏色並排放置，三元色的間隔均勻。 用手解決這些意味著雜耍色調角度和輕度值。 此工具立即進行數學計算並顯示結果，因此您可以選擇有效的方案。

一切都運行客戶端。調整基色、切換模式、點擊任何樣本以複製其 HEX 程式碼,或使用複製 CSS 將整個調色板匯出為 CSS 自訂屬性。沒有帳戶,沒有上傳,一旦頁面加載,它就會保持離線工作。

一個工作範例展示了它如何作為婚禮調色板產生器,有一個條件:沒有婚禮預設,所以你帶上顏色。輸入鼠尾草綠,#9caf88,作為基本顏色並選擇互補色。四個樣本是#c2ceb6、#9caf88、塵土飛揚的薰衣草#9b88af 和更深的#755e8d,複製 CSS 將它們作為 -color-100 傳回 -color-400。對於柔和的調色板產生器結果,從淺色基數開始,例如#a7c7e7:類比、三元和四元保持其輕盈和飽和度,因此每個樣本都保持柔軟。

和諧模式來自色輪關係,圍繞圓圈以固定量旋轉色調:互補色為 180 度,三元色為 120 度,類似色為小步。數學是在 HSL 中完成的,這很方便,而且感知上並不均勻。 HSL 亮度將黃色和藍色視為與同等光相同的值,而肉眼看來並非如此,這就是為什麼三元集可以在紙上看起來平衡,而在屏幕上看起來不平衡。根據對比度檢查器檢查您計劃用於文字的任何調色板,而不是相信數字。色調和色調是透過移動亮度同時保持色調和飽和度而產生的,這使得它們作為一組 CSS 變數非常有用。