色彩調色板產生器

從互動式色輪建立和諧的調色板——套用類比色、互補色或三角色等和諧規則，然後立即複製任何數值。

亮度 100%

和諧規則

類比色單色三角色互補色分裂互補色四方色色調自訂

基底顏色

目前顏色

HEX

RGB

HSL

調色板

選擇和諧規則和基底顏色，然後拖曳色輪標記進行微調。點擊任何色票可複製，或將其設為新的基底顏色。

關於色彩調色板產生器

色彩調色盤產生器透過互動式色輪建立和諧的配色方案。選擇一個基礎色,再挑選一種調和規則──類似色、單色、三角配色、互補色、分裂互補色、方形配色或完全自訂──工具會立即計算出對應的調色盤,並在色輪上提供可拖曳的標記以便微調。

每個色塊都會顯示其 HEX、RGB、HSL 與 HSB 數值,調色盤中任何顏色都能一鍵設為新的基礎色。亮度滑桿可讓整組配色一起變亮或變暗,同時保持色相關係不變,非常適合快速探索配色的各種變化。

所有運算都在瀏覽器中即時完成,使用的是 HSV 色輪上的色彩理論數學──沒有上傳,也沒有伺服器往返。當調色盤符合需求時,可複製個別數值、一次複製全部顏色、複製現成的 CSS 變數,或匯出為 JSON。

是的,完全免費。調色盤的運算完全在你的瀏覽器中執行,沒有點數、帳號或使用次數限制。

每種規則會根據你的基礎色,在色輪上以固定角度放置其他調色盤顏色:互補色位於相對位置(180°),三角配色的顏色間隔 120°,類似色讓相鄰色彩保持接近,分裂互補色則位於對面色相的兩側,方形配色則將四種色相間隔 90°。

類似色或單色配色對介面來說最安全,因為它們給人平靜且協調的感覺。若需要為按鈕和行動呼籲提供強烈的強調色,並搭配主導色相使用,可選擇互補色或分裂互補色。

可以。切換至「自訂」規則,即可在色輪上獨立拖曳每個標記,或從任一調和規則開始,再拖曳標記進行調整──工具會在你移動標記時即時更新調色盤。

每個色塊都會顯示 HEX、RGB、HSL 與 HSB 數值,皆可個別複製。你也可以將整組調色盤複製為純數值、可直接用於樣式表的 CSS 自訂屬性,或作為 JSON 交給程式碼或設計工具使用。