色彩色調產生器

從單一顏色生成完整的淡色與深色範圍——選擇加深／加亮步驟和色調數量，然後立即複製任何數值。

基底顏色

步驟值

每個步驟的加亮／加深幅度（1–25%）。

色調數量

在基底顏色兩側各生成的淡色和深色數量。

漸層

已生成的色調

選擇基底顏色、步驟百分比和數量——所有淡色和深色立即在您的瀏覽器中計算完成。

關於色彩色調產生器

色彩明暗階梯產生器能將單一顏色擴展為完整的深淺色範圍。給定一個基礎色,它會在一側產生逐漸變淺的淺色調,在另一側產生逐漸變深的深色調──就是現代設計系統中常見的 50 到 900 經典階梯。

兩個控制項決定輸出結果:步進百分比設定每一階變淺或變深的幅度(每步 1% 至 25%),數量則設定基礎色兩側各要顯示多少個淺色與深色調,最多可達十個。漸層長條可一眼預覽整組階梯。

產生過程會在你輸入時於瀏覽器中即時完成──沒有任何資料傳送到伺服器。可複製任一數值、完整清單,或將整組階梯複製為 CSS 變數,直接放入設計代符檔或 Tailwind 風格的色階中使用。

是的,完全免費。所有淺色與深色調都在你的瀏覽器中即時運算,沒有費用、不需要帳號,也不限制你能產生多少組階梯。

淺色調是你的基礎色混入白色(變淺),深色調則是基礎色混入黑色(變深)。產生器會同時產生兩個方向,並在你的基礎色兩側分別標示「淺色調(較淺)」與「深色調(較深)」。

將每側數量設為 4 或 5,總共可得到九到十一個色塊,基礎色位於中間。步進大約 8% 到 10%,通常就能產生與熱門框架 50 到 900 色階相似的間距。

較小的步進(3% 至 6%)適合細微的懸停與邊框變化;中等步進(8% 至 12%)適合完整的設計系統階梯;較大的步進(15% 至 25%)則會產生高對比、海報式的組合。留意漸層預覽──好的階梯應該均勻變深,不會出現色帶。

可以。「複製 CSS 變數」會將整組階梯輸出為具名稱的 CSS 自訂屬性,「全部複製」則提供純數值清單,可貼到任何地方,從 SCSS 對照表到 JavaScript 主題物件都適用。