顏色明暗生成器 - 免費線上設計創意工具

← ToolBox / 顏色明暗生成器

📖 檢視「顏色明暗生成器使用指南」

🎨 Color Shade & Tint Generator

Mix a base colour with white for lighter tints and with black for darker shades to build a coordinated ladder for buttons and backgrounds.

📐 工作原理與說明

tint = C·(1−t) + 255·t；shade = C·(1−t) + 0·t（t 為混合比例，0 ≤ t ≤ 1）

按線性混色：tint 是在基色上按比例混入白色得到更亮的色，shade 是混入黑色得到更暗的色；按固定步長生成整組明暗色卡，用於按鈕、背景與邊框的層次設計。

基色 HEX（如 #6366F1）

每側檔數

⚠️ 使用說明與注意事項

tint 是基色混入白色（t→1 越亮），shade 是基色混入黑色（越暗），線性混合即可獲得平滑過渡。
HEX 支援 3 位簡寫（如 #F60）與 6 位標準寫法，工具會自動展開。
無障礙配色建議保證文字與背景的對比度（WCAG AA 至少 4.5:1），不要只看美觀。

📋 說明

左→右為由淺（tint）到基色再到深（shade）的漸變；每側檔數即混入白/黑的比例步數。

設計系統（如 Tailwind 的 50–900）常用這種按明度分檔的色板組織方式。

📚 深度解析：Color Shade Generator

💡 常見使用場景

生成元件的 state 色階。
做圖表序列色。
補設計系統的 shade。

生成橙色彩階 50~900

<p><strong>輸入：</strong>基色 #FF6B35。</p><p><strong>處理：</strong>在 OKLCH/HSL 上推明度梯度。</p><p><strong>輸出：</strong>50/100/…/900 共 10 檔 HEX。</p>

❓ 常見問題（FAQ）

為什麼不用固定加減？: 人眼對亮度的感知非線性，按感知均勻色彩空間推更自然。結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。
兩種色對比度不夠會提示嗎？: 會按 WCAG 算出對比度值與等級，未達標會標紅提醒，便於及時換色或調深。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。